Ejemplos comentados

Página personalizada más estrecha que el Jumbotron normal.

Ver Demo »


    

Archivo:Narrow Jumbotron Template for Bootstrap.html

container Contenedor genérico nav nav-pills pull-right .nav Es una barra de navegación .nav-pills No tiene el estilo por defecto. El tipo pills es similar a un botón. .pull-right Va alineada a la derecha. class="active" La opción con .active es la que aparecerá preseleccionada. text-muted Lo que esté marcado con .text-muted aparece en tonos menos marcados. <p class="lead"> .lead marca la frase con más importancia para tener la atención del usuario. btn btn-lg btn-success .btn [role=button] El enlace se mostrará como un botón .btn-lg Indica que queremos un botón más grande .btn-success El color del botón es el correspondiente a un botón que indica éxito. col-lg-6 .col-lg-[número] Indica que habrá columnas. [número] es el ancho de la columna. Bootstrap utiliza un ancho de 12 unidades. En este caso podemos ver como 6 columnas de ancho 2 6 * 2 = 12 ¡así que todo correcto! Las columnas se escalan de forma proporcional a la resolución. col-lg-6 .col-lg-[número] Indica que habrá columnas. [número] es el ancho de la columna. Bootstrap utiliza un ancho de 12 unidades. En este caso podemos ver como 6 columnas de ancho 2 6 * 2 = 12 ¡así que todo correcto! Las columnas se escalan de forma proporcional a la resolución. <div class="footer"> Elemento footer. En este caso es un div genérico. /container Cerramos el div contenedor con márgenes y paddings 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>Narrow Jumbotron Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="Narrow%20Jumbotron%20Template%20for%20Bootstrap_files/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="Narrow%20Jumbotron%20Template%20for%20Bootstrap_files/jumbotron-narrow.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> <div class="container"> <div class="header"> <ul class="nav nav-pills pull-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <h3 class="text-muted">Project name</h3> </div> <div class="jumbotron"> <h1>Jumbotron heading</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> </div> <div class="row marketing"> <div class="col-lg-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> <div class="col-lg-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> <div class="footer"> <p>© Company 2013</p> </div> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> </body></html>