Ejemplos comentados

Plantilla con el pie de página enganchado al final de la página cuando la altura del contenido no es suficiente.

Ver Demo »


    

Archivo:Sticky Footer Template for Bootstrap.html

container Contenedor genérico <p class="lead"> .lead marca la frase con más importancia para tener la atención del usuario. container Contenedor genérico text-muted Lo que esté marcado con .text-muted aparece en tonos menos marcados. Placed at the end of the document so the pages load faster Cargamos estos archivos al final. Los scripts bloquean la carga de la página, así que los cargamos al final. <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="http://getbootstrap.com/docs-assets/ico/favicon.png"> <title>Sticky Footer Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="Sticky%20Footer%20Template%20for%20Bootstrap_files/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="Sticky%20Footer%20Template%20for%20Bootstrap_files/sticky-footer.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy this line! --> <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- Wrap all page content here --> <div id="wrap"> <!-- Begin page content --> <div class="container"> <div class="page-header"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p>Use <a href="http://getbootstrap.com/examples/sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> </div> </div> <div id="footer"> <div class="container"> <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk/">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> </body></html>