Bootstrap es el framework de HTML, CSS y JavaScript más popular para desarrollar sitios web responsivos y móviles.
Una página se dice responsiva si se ajusta automáticamente al dispositivo, ya sea un celular, una tableta o una computadora.
Características de Bootstrap:
Hace que el desarrollo web sea más rápido y fácil.
Esta hecho para todo tipo de personas, dispositivos de cualquier forma y proyectos de cualquier tamaño.
Escala fácil y eficientemente un sitio web y aplicaciones con un código base simple, desde teléfonos, tabletas y computadoras con sentencias CSS.
En Bootstrap 3 existen estilos para dispositivos móviles que son parte del núcleo del framework.
Cuenta con una extensa documentación para elementos comunes HTML, docenas de elementos HTML personalizados, componentes CSS y plugins jQuery.
Es de código abierto. Está hospedado, desarrollado y mantenido en GitHub.
Es compatible con todos los navegadores modernos (Chrome, Firefox, Opera, Internet Explorer, Edge y Safari)
Existen muchos sitios web desarrollados con Bootstrap, algunos ejemplos de sitios reales se pueden ver aquí.
Bootstrap cuenta con muchos ejemplos y plantillas para comenzar a desarrollar un sitio web de forma sencilla. En el sitio Start Bootstrap
puede encontrar algunas plantillas básicas para comenzar a diseñar su sitio web.
Utilizando Bootstrap
Descarga
Si desea descargar directamente y utilizar Bootstrap, vaya a getbootstrap.com y siga las instrucciones.
CDN (Content Delivery Network)
Si no desea descargar y hospedar Bootstrap usted mismo, puede ser incluido como un CDN. MaxCDN provee soporte CDN para CSS y JavaScript de Bootstrap. Puede incluirse también jQuery:
Muchos usuarios habrán descargado Bootstrap desde MaxCDN al haber navegado en alguna otra página que lo utilice. Por esta razón, será cargado desde el caché cuando
visiten su sitio, lo que significa un tiempo menor de carga. También, la mayoría de los CDN se aseguran que una vez que un usuario les solicita un archivo, le será
entregado a través del servidor más cercano, lo que significa un tiempo menor de carga.
Siempre puede conseguir la más reciente versión de Bootstrap desde el sitio web oficial.
Creando la primer página con Bootstrap
Añadir el doctype HTML5
Bootstrap utiliza elementos HTML y propiedades CSS que requieren HTML5.
Bootstrap 3 es responsivo
Bootstrap 3 está diseñado para ser responsivo en dispositivos móviles. Los estilos responsivos son parte del núcleo central de bootstrap. Para asegurarse del correcto
render de la página y el zoom táctil, añada la etiqueta <meta> dentro de <head>.
Ejemplo 2. Paǵina básica con contenedor de ancho completo
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
Mallas en Bootstrap
El sistema de mallas en bootstrap permite utilizar hasta 12 columnas dentro de una página. Si no desea utilizar todas las 12 columnas individualmente,
puede agruparlas para crear columnas más anchas.
El sistema de columnas es responsivo, las columnas se acomodarán automáticamente de acuerdo al tamaño de la página.
Existen 4 clases de mallas:
xs: para teléfonos
sm: para tablets
md: para computadoras
lg: para computadoras grandes
Estas clases se pueden combinar para crear un sitio dinámico y flexible.
En primer lugar, se debe crear un renglón <div class="row">. Luego, añadir el número deseado de columnas etiquetadas con la clase requerida
.col-*-*. Los números en .col-*-* siempre deben sumar hasta 12 para cada renglón.
Una tabla básica en bootstrap tiene un relleno ligero y solamente divisores horizontales. La clase .table añade el estilo básico a la tabla.
Estos son las clases de estilo que existen en bootstrap:
.table: Estilo básico de tabla.
.table-striped: Estilo tipo zebra.
.table-bordered: Añade bordes a todos los costados de la tabla y celdas.
.table-hover: Habilita hover en los renglones de la tabla.
.table-condensed: Hace la tabla más compacta al cortar a la mitad el espaciado entre celdas.
Considere que para agregar clases a una tabla, en primer lugar debe agregar la clase base table, seguido de la clase que desea añadir. Debe separarlas con
un espacio y estar dentro del mismo par de comillas dobles.
Ejemplo 5. Estilo básico de tablas. Pruebe los diferentes estilos.
Las clases contextuales pueden ser utilizadas para darle color a los renglones y celdas de una tabla.
Las clases contextuales que pueden usar son:
.active: Aplica un color al renglón o celda.
.success: Indica una acción positiva satisfactoria.
.info: Indica un cambio o acción informativo neutral.
.warning: Indica una advertencia que requiera su atención.
.danger: Indica una acción peligrosa o potencialmente negativa.
Ejemplo 6. Estilo tipo zebra
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells.</p>
<p>The classes that can be used are: .active, .success, .info, .warning, and .danger.</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Texto y tipografía
En bootstrap, el tamaño por defecto de la letra es de 14 pixeles, con interlineado de 1.428. Esto se aplica a <body> y todos los párrafos.
Adicionalmente, todos los elementos <p> tienen un margen inferior que es igual a la mitad del interlineado (10 pixeles por defecto).
Por defecto, algunos elementos se mostrarán un poco diferente con bootstrap que por defecto en el navegador.
Algunas de las etiquetas de HTML que bootstrap modifica la forma como se despliegan, son las siguientes:
Ejemplo 7. Texto y tipografía en bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Texto secundario, más claro.</h1>
<p>El elemento small se utiliza para crear texto secundario más claro :</p>
<h1>Encabezado h1<small>texto secundario</small></h1>
<h2>Encabezado h2<small>texto secundario</small></h2>
<h3>Encabezado h3<small>texto secundario</small></h3>
<h4>Encabezado h4<small>texto secundario</small></h4>
<h5>Encabezado h5<small>texto secundario</small></h5>
<h6>Encabezado h6<small>texto secundario</small></h6>
</div>
<div class="container">
<h1>Resaltar Texto</h1>
<p>Utilice la etiqueta mark para <mark>resaltar</mark> texto.</p>
</div>
<div class="container">
<h1>Abreviaciones</h1>
<p>El elemento abbr swe utiliza para marcar una abreviación o un acrónimo:</p>
<p>La <abbr title="Organización Mundial de la Salud">OMS</abbr> fue fundada en 1948.</p>
</div>
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United States
and close to 5 million globally.</p> <footer>From WWF's website</footer>
</blockquote>
</div>
<div class="container">
<h1>Listas Descriptivas</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<div class="container">
<h1>Secciones de Código</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines
a section in a document.</p>
</div>
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
<div class="container">
<h1>Lineas de Código</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
<div class="container">
<h2>Colores Contextuales</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>
<div class="container">
<h2>Fondos Contextuales</h2>
<p>Use the contextual background classes to provide "meaning through colors":</p>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>
</body>
</html>
Jumbotron y Encabezado de Página
Los jumbotrones son grandes cajas que sirven para llamar la atención de algún tipo de contenido especial o relevante en la página. Un jumbotron
se despliega como un rectángulo gris con las esquinas redondeadas.
Ejemplo 8. Jumbotron
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
Si el jumbotron se utiliza fuera de un contenedor, se extenderá en todo el ancho de la página.
Un encabezado sirve para dividir secciones. La clase añade espacio extra alrededor del elemento.
Ejemplo 9. Encabezado de Página
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
Wells
La clase well, o pozo por su traducción literal al español, crea un rectángulo redondeado alrededor del elemento.
Bootstrap proporciona un mecanismo que permite la creación de alertas de forma muy sencilla.
Las alertas son creadas con la clase .alert, seguidas de alguna de las clases contextuales .alert-success, .alert-info,
.alert-warning o .alert-danger:
Ejemplo 11. Alertas
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
Para cerrar los mensajes de alerta, añadir class="close" y data-dismiss="alert" al link o elemento botón:
Ejemplo 12. Cerrando Alertas
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<p>The a element with class="close" and data-dismiss="alert" is used to close the alert box.</p>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
Las clases .fade y .in añaden un efecto de desvanecimiento cuando se cierra un mensaje de alerta:
Ejemplo 13. Animación al cerrar alertas
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<p>The .fade and .in classes adds a fading effect when closing the alert message.</p>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
Botones
Bootstrap proporciona 7 estilos de botones
Button Styles
Para poder utilizar estos estilos, Bootstrap tiene las siguientes clases:
Dado que en el ejemplo no tenemos una página a la cual enlazar a través del link, se colocó un # para no recibir un error 404. En un caso
realista debería sustituirse por una dirección real.
Bootstrap proporciona cuatro tamaños de botones, las clases que definen los diferentes tamaños son:
Bootstrap permite agrupar un conjunto de botones para que aparezcan como uno solo. Se debe utilizar un elemento <div> con la clase
.btn-group para crear un grupo de botones:
Bootstrap proporciona 200 de un conjunto de Glyphicons. Pueden ser utilizados en texto, botones, barras de herramientas,
navegación, formularios, etc. Glyphicons Halflings
no son gratis, sin embargo su creador ha permitido que sean incluidos como parte de Bootstrap.
Sintaxis:
<span class="glyphicon glyphicon-name"></span>
donde name deberá reemplazarse por el nombre del glyphicon deseado.
Ejemplo 22. Diferentes formas de utilizar glyphicons
Las insignias son indicadores numéricos que indican cuántos elementos se encuentran asociados con un link. Para crear una insignia se debe usar la clase .badge
dentro de un elemento <span>:
Las etiquetas son utilizadas para proporcionar información adicional acerca de algo. Para utilizarlo es necesario añadir la clase .label seguida de una
de las seis clases contextuales .label-default, .label-primary, .label-success, .label-info, .label-warning
o .label-danger dentro de un elemento para crear las etiquetas.
Una barra de progreso puede ser utilizada para mostrar el estado de algún proceso. Bootstrap proporciona una variedad de barras de progreso. Para crear una
barra de progreso por defecto se debe añadir la clase .progress al elemento <div>:
Si usted tiene un sitio con muchas páginas, tal vez le sea útil añadir algún tipo de paginación a su sitio. Para crear una paginación básica en Bootstrap se debe añadir la clase
.pagination a cada elemento <ul>:
Ejemplo 28. Paginación con Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Pagination</h2>
<p>The .pagination class provides pagination links:</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<div class="container">
<h2>Pagination - Active State</h2>
<p>Add class .active to let the user know which page he/she is on:</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<div class="container">
<h2>Pagination - Disabled State</h2>
<p>Add class .disabled if a page for some reason is disabled:</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<div class="container">
<h2>Pagination - Sizing</h2>
<p>Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:</p>
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul class="pagination pagination-md">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
Menú desplegable
Una menú desplegable es un menú que permite elegir a un usuario elegir un valor de una lista predefinida. La clase .dropdown indica un menú desplegable.
Para abrir un menú desplegable, se puede utilizar un botón o un enlace con la clase .dropdown-toggle y el atributo data-toggle="dropdown".
La clase .caret crea un ícono de flecha que indica que el menú es delegable.
Añada la clase .dropdown-menu al elemento <ul> para construir el menú desplegable.
Ejemplo 29. Menú desplegable
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
La clase .divider permite crear una separación entre los elementos de la lista desplegable.
La clase .dropdown-header permite añadir un encabezado dentro de un menú desplegable.
La clase .disabled permite deshabilitar un elemento del menú desplegable.
La clase .dropdown-menu-right alinea el menú desplegado a la derecha del elemento que contiene al menú.
Ejemplo 30. Diferentes menús desplegables.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="dropdown-header">Dropdown header 2</li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>The .disabled class is used to disable an item in the dropdown menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li class="disabled"><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Pestañas
La mayoría de las páginas tienen algún tipo de menú. En HTML un menú es usualmente definido como una lista no ordenada. Para que la lista aparezca en forma horizontal y
no vertical, basta con añadir la clase .list-inline a la etiqueta <ul>.
Para que bootstrap haga la lista como pestañas, solo es necesario agregar la clase <ul class="nav nav-tabs"> a la etiqueta de la lista no ordenada. Puede agregarse
también la clase <li class="active"> a la página actual.
Ejemplo 31. Paginación con pestañas de Bootstrap.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="col-md-3">
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Observe que en el ejemplo se hizo un menú desplegable en una de las pestañas.
Las pastillas son otra forma de paginación y se crean con <ul class="nav nav-pills">. Puede marcarse la página actual con <li class="active">.
Las pastillas pueden acomodarse de forma vertical con la clase .nav-stacked. En una pantalla grande el menú ocupará todo el ancho de la pantalla,
pero en una pantalla pequeña el contenido se ajustará a una sola columna.
Las pastillas también pueden contener menus desplegables.
Para centrar o justificar las pestañas o pastillas, se utiliza la clase .nav-justified.
Para hacer pestañas tipo toggle, se debe añadir el atributo data-toggle="tab" a cada enlace. Luego se debe añadir la clase .tab-pane con
un identificador para cada pestaña contenida en un elemento <div> con la clase .tab-content. Si se desea un efecto de desvanecimiento basta con añadir
la clase .fade a .tab-pane.
El mismo código aplica para las pastillas, solo cambiando el atributo a data-toggle="pill".
Ejemplo 32. Varios tipos de paginación.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Pills</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>
<div class="col-md-3">
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<div class="container">
<h3>Vertical Pills</h3>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
<div class="container">
<h3>Pills With Dropdown Menu</h3>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
<div class="container">
<h3>Centered Tabs</h3>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<br>
<h3>Centered Pills</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home1">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home1" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<div class="container">
<h2>Dynamic Pills</h2>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home2">Home</a></li>
<li><a data-toggle="pill" href="#menu4">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu5">Menu 2</a></li>
<li><a data-toggle="pill" href="#menu6">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home2" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div id="menu4" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div id="menu5" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>
<div id="menu6" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Formularios
Los formularios con bootstrap automáticamente reciben estilo global por defecto. Todos los elementos de texto <input>, <textarea>,
and <select> con la clase .form-control tienen el 100% del ancho de la página.
Bootstrap proporciona tres tipos de estilo para los formularios:
Vertical
Horizontal
Alineados
Las reglas estándar para estos tres estilos son las siguientes:
Siempre utilizar <form role="form">
Encerrar las etiquetas y controles del formulario con <div class="form-group">
Añadir la clase .form-control a todos los elementos <input>, <textarea>, y <select>.
Para los formularios alienados, todos los elementos están pegados a la izquierda, y las etiquetas están junto a cada campo. Una regla para los formularios alineados es:
Añadir la clase .form-inline al elemento <form>.
Los formularios horizontales se colocan aparte de los demás formularios. Algunas reglas para utlizarlos son:
Añadir la clase .form-horizontal al elemento <form>.
Añadir la clase .control-label a todos los elementos <label>.