Guia Bootstrap Inces

INCES MILITAR
Barquisimeto – Estado Lara
Fase: Desarrollo Web

Instructor: Kurt Vladimir Gude P.
Twitter
Bootstrap
Guía de Twitter Bootstrap 3
1. Introducción a Bootstrap:
Twitter Bootstrap es un framework o conjunto de herramientas de Código abierto para diseño de
sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros,
menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de
JavaScript opcionales adicionales.
Bootstrap es un framework de interfaz visual (front-end) principalmente para móviles. Es
elegante, intuitivo y eficaz, para un desarrollo web más rápido y más fácil. Bootstrap utiliza HTML, CSS y
Javascript.
Se recomienda tener conocimientos básicos de HTML y CSS.
1.1. Origen de Bootstrap:

Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton de Twitter, como un marco de
trabajo (framework) para fomentar la consistencia a través de herramientas internas. Antes de Bootstrap,
se usaban varias librerías para el desarrollo de interfaces de usuario, las cuales guiaban a
inconsistencias y a una carga de trabajo alta en su mantenimiento.
El primer desarrollo en condiciones reales ocurrió durante la primera "Semana de Hackeo"
(Hackweek) de Twitter." Mark Otto mostró a algunos colegas como acelerar el desarrollo de sus
proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han
introducido en el marco de trabajo.
En agosto del 2011, Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se
convirtió en el proyecto de desarrollo más popular de GitHub (plataforma de desarrollo colaborativo).
1.2. Características de Bootstrap:

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible
con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o
aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de
compatibilidad parcial que hace disponible la información básica de un sitio web para todos los
dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas
redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de
navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su
uso.
Desde la versión 2.0 también soporta diseños sensibles. Esto significa que el diseño gráfico de la
página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado
(computadoras, tabletas, teléfonos móviles).
Las características principales de Bootstrap se explican a continuación:
 Sistema de cuadrilla y diseño sensible: Bootstrap viene con una disposición de cuadrilla estándar
de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable.
Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y
tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con
baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente.
 Entendiendo la hoja de estilo CSS: Bootstrap proporciona un conjunto de hojas de estilo que
proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una
uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de
los elementos de texto, tablas y formularios.
1
 Componentes re-usables: En adición a los elementos regulares de HTML, Bootstrap contiene otra
interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (ej.
grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas
horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de
miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.
 Plug-ins de JavaScript: Los componentes de JavaScript para Bootstrap están basados en la librería
jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen
elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También
extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una
función de auto-completar para campos de entrada (input). La versión 2.0 soporta los siguientes
plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse,
Carousel y Typeahead.
1.3. Descarga de Bootstrap:

Bootstrap está disponible para su descarga en su versión más reciente desde su sitio web oficial:
http://getbootstrap.com/.
La librería jQuery puede ser descargada desde su sitio web oficial: https://jquery.com/.
1.4. ¿Cómo utilizar Bootstrap?:

Para aprovechar las bondades de Bootstrap en un documento html, se debe contar con:
 Los elementos de Bootstrap descargados, que incluyen: hoja de estilo Bootstrap CSS, documento
Bootstrap JavaScript y fuentes.
 La librería JQuery descargada.
 Un editor de texto como NotePad, NotePad++ o WordPadm en Windows; en Linux puedes usar G-
Edit. También puede utilizar otros editores orientados al desarrollo web como Netbeans, Sublime
Text y herramientas WYSIWYG como Adobe Dreamweaber.
1.5. Ejemplo de documento HTML usando Bootstrap:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>.::Ejemplo de Bootstrap::.</title>


<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"
/>
<link rel="stylesheet" type="text/css" href="../css/otra_pagina.css" />
</head>
<body>
<h1>Hola, mundo!</h1>
<hr />


<script src="../js/jquery-1.12.4.min.js"></script>

<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Nota: Para este ejemplo, debe crear una carpeta llamada “css” que incluya el archivo “bootstrap.min.css”
y una carpeta llamada “js” que contenga las librerías “bootstrap.min.js” y “jquery-1.12.4.min.js”.
-------- o --------
2
2. Diseñando con la rejilla (Grid) de Bootstrap:
2.1. Preparando la página:

Antes de comenzar a diseñar la estructura de contenidos de las páginas, es necesario realizar
algunos preparativos importantes.
2.1.1. El doctype de HTML5:

Bootstrap utiliza algunos elementos HTML y algunas propiedades CSS que requieren el uso del
doctype de HTML5. No olvide incluir este doctype al inicio de todas sus páginas.
<!DOCTYPE html>
<html lang="es">
...
</html>
2.1.2. El móvil es lo más importante:

Bootstrap 3 se ha creado desde cero pensando en los móviles. Así que en vez de incluir algunos
estilos opcionales para móviles, todo eso ya está incluido en el propio Bootstrap. Se puede decir que
para Bootstrap 3, los dispositivos móviles son lo más importante.
Para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos
móviles, es importante que añada la siguiente etiqueta dentro de la cabecera <head> de las páginas:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
</head>
2.1.3. Imágenes responsive:

Bootstrap 3 ya no adapta el tamaño de las imágenes automáticamente como sucedía en
Bootstrap 2. Para mantener el mismo comportamiento de antes, debe añadir la clase .img-
responsive a cada imagen que quiera que se comporte de manera responsive. Esta clase incluye las
propiedades max-width: 100%; y height: auto; para que la imagen escale en función del tamaño
del elemento en el que se encuentra.
<img src="../img/foto.jpg" class="img-responsive" alt="Imagen responsive">
2.1.4. El contenedor (Containers):

Bootstrap requiere un contenedor para envolver los contenidos del sitio. Usted puede elegir uno
de dos contenedores (tenga en cuenta que, debido al relleno y más, ningún contenedor es apilable):
Contenedor Descripción
.container Utilice este contenedor para envolver sus elementos con un ancho fijo
responsive (sensible), centrado, respecto a la ventana del navegador.
.container-fluid Utilice este contenedor para envolver sus elementos abarcando el ancho
completo (responsive) de la ventana del navegador.
El siguiente ejemplo muestra una imagen centrada dentro de un contenedor; responsive, es decir,
que se adaptará al tamaño de la ventana del navegador.
<div class="container">
<h3>Imagen responsive</h3>
</div>
El siguiente ejemplo muestra una imagen dentro de un contenedor, ocupando todo el ancho de la
pantalla; responsive, es decir, que se adaptará al tamaño de la ventana del navegador.
<div class="container-fluid">
<h3>Imagen responsive ocupando todo el ancho</h3>
</div>
3
2.2. La rejilla (Grid) de Bootstrap:
Bootstrap incluye una rejilla o sistema de cuadrícula (Grid) fluída pensada para móviles y que
cumple con el diseño web responsive.
El diseño de páginas basado en rejilla se realiza mediante filas y columnas donde se colocan los
contenidos. Esta rejilla permite un máximo de 12 columnas en toda la página.
Así funciona la rejilla de Bootstrap:

 Las filas (rows) siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de
tipo .container-fluid (anchura completa).
 Las filas (rows) se utilizan para agrupar horizontalmente a varias columnas (cols).
 El contenido siempre se coloca dentro de las columnas (cols), ya que las filas (rows) sólo deberían
contener como hijos elementos de tipo columna.
 Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4) para crear rejillas
rápidamente.
 La separación entre columnas se realiza aplicando padding. Para contrarrestar sus efectos en la
primera y última columnas, las filas (elementos .row) aplican márgenes negativos.
 Las columnas de la rejilla definen su anchura especificando cuántas de las 12 columnas de la fila
ocupan. Si por ejemplo, se quiere dividir una fila en tres columnas iguales, se utilizaría la clase
.col-xs-4 (el 4 indica que cada columna ocupa 4 de las 12 columnas en las que se divide cada
fila).
El siguiente ejemplo muestra un contenedor con tres filas (.row). La primera fila se divide en
doce columnas; la segunda fila se divide en tres columnas (del igual ancho); y la tercera fila se divide en
dos columnas (de igual ancho).
<div class="row">
<div class="col-md-1">col-01</div>
</div>
<div class="row">
<div class="col-md-4">AAAA</div>
<div class="col-md-4">BBBB</div>
<div class="col-md-4">CCCC</div>
</div>
<div class="row">
<div class="col-md-6">izquierda</div>
<div class="col-md-6">derecha</div>
</div>
</div>
Para una mejor visualización de cada columna en cada fila, podemos aplicar un estilo CSS3
(.border) para ver el borde de cada columna. El siguiente ejemplo es el mismo ejemplo anterior
aplicando un estilo CSS3.
4
<div class="row">
<div class="col-md-1" style="border:1px solid blue;">col-01</div>
</div>
<div class="row">
<div class="col-md-4" style="border:1px solid red;">AAAA</div>
<div class="col-md-4" style="border:1px solid red;">BBBB</div>
<div class="col-md-4" style="border:1px solid red;">CCCC</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px solid black;">izquierda</div>
<div class="col-md-6" style="border:1px solid black;">derecha</div>
</div>
</div>
Al visualizar el ejemplo anterior en un dispositivo pequeño, las columnas se disponen

verticalmente, una encima de otra. Para comprobarlo, proceda a disminuir el ancho de la ventana de su
navegador. Para resolver esto, revise el tema que se presenta a continuación.
2.2.1. Prefijos de la clase (col-x-n):

El sistema de rejillas (Grid) de Bootstrap incluye cuatro prefijos asociados a las columnas en la
rejilla. Estos prefijos son:
Prefijo de la clase Descripción Tamaño

.col-xs- Para dispositivos muy pequeños (teléfonos) < 768px
.col-sm- Para dispositivos pequeños (tablets) >= 768px
.col-md- Para dispositivos medianos (PC de escritorio) >= 992px
.col-lg- Para dispositivos muy grandes (PC de escritorio grandes) >= 1200px
El ejemplo del tema anterior utiliza el prefijo .col-md-, por lo tanto se visualizará correctamente
en ventanas de navegador cuyo ancho sea mayor o igual a 992px. Al visualizarlo en una tablet o
teléfono, las columnas se disponen verticalmente (una encima de la otra).
En el siguiente ejemplo se muestran cuatro filas (.row), donde cada fila está dividida en dos
columnas. Cada fila contiene diferentes prefijos para sus columnas.
<div class="row">
<div class="col-lg-6" style="background:#bbb;">col-lg-6 (PC grande)</div>
<div class="col-lg-6" style="background:#ddd;">col-lg-6 (PC grande)</div>
</div>
<br />
<div class="row">
<div class="col-md-6" style="background:#bbb;">col-md-6 (PC mediano)</div>
<div class="col-md-6" style="background:#ddd;">col-md-6 (PC mediano)</div>
</div>
<br />
5
<div class="row">
<div class="col-sm-6" style="background:#bbb;">col-sm-6 (Tablet)</div>
<div class="col-sm-6" style="background:#ddd;">col-sm-6 (Tablet)</div>
</div>
<br />
<div class="row">
<div class="col-xs-6" style="background:#bbb;">col-xs-6 (móvil)</div>
<div class="col-xs-6" style="background:#ddd;">col-xs-6 (móvil)</div>
</div>
</div>
Nota: Recuerde que al ejemplo anterior se le aplica un estilo CSS (.style) para una mejor visualización
del tamaño de las columnas. No es obligatorio usarlo.
2.2.2. Definir ancho de una columna según el dispositivo:

Podemos definir el ancho de una columna dependiendo del dispositivo en que se muestre. Por
ejemplo, podemos definir que una determinada columna se muestre con un tamaño de seis columnas
para una PC y de doce columnas en un teléfono:
<div class="row">
<div class="col-xs-12 col-md-6" style="background:#bbb;">
Tamaño variable
</div>
</div>
</div>
El siguiente ejemplo define un tamaño diferente a una columna dependiendo del dispositivo
donde se muestre. Se define un tamaño de: 10 columnas para un teléfono; 9 columnas para una tablet;
6 columnas para un PC mediano; y 5 columnas para un PC grande:
<div class="row">
<div class="col-xs-10 col-sm-9 col-md-6 col-lg-5"
style="background:#bbb;">Cuatro tamaños
</div>
</div>
</div>
Nota: Recuerde que el estilo CSS (.style) se aplica con fines de una mejor visualización del tamaño de
las columnas. No es necesario usarlo.
2.2.3. Mover columnas a la derecha:

Por defecto, las columnas están alineadas a la izquierda. Para mover una columna a la derecha
se usa la clase .col-XX-offset-*, la cual define la cantidad de columnas que tendrá como margen
izquierdo. Los prefijos son:
Prefijo de la clase Descripción Tamaño

.col-xs-offset- Margen izquierdo para dispositivos muy pequeños (teléfonos) < 768px
.col-sm-offset- Margen izquierdo para dispositivos pequeños (tablets) >= 768px
.col-md-offset- Margen izquierdo para dispositivos medianos (PC de escritorio) >= 992px
.col-lg-offset- Margen izquierdo para dispositivos grandes (PC de escritorio >= 1200px
grande)
6
Por ejemplo, podemos centrar una columna, definida con col-xs-6, con un margen izquierdo
definido con col-xs-offset-3.
<div class="row">
<div class="col-xs-6 col-xs-offset-3" style="background:#ccc;">
Esta columna está centrada
</div>
</div>
</div>
El siguiente ejemplo centra una columna con diferente tamaño dependiendo del dispositivo donde
se muestre. Tamaño de: 10 columnas para un teléfono; 8 columnas para una tablet; 6 columnas para un
PC mediano; y 4 columnas para un PC grande:
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2
col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4"
style="background:#ccc;">
<h3>Columna</h3>
<h3>centrada</h3>
</div>
</div>
</div>
2.2.3. Columnas anidadas:

Bootsrap 3 permite anidar columnas dentro de otras columnas. Para ello, dentro de una columna
(clase .col-md-*) debemos crear un nuevo elemento fila (clase .row) y añadir una o más columnas
(clase .col-md-*). Las columnas anidadas siempre tienen que sumar 12 columnas de anchura, tal y
como muestra el siguiente ejemplo:
<div class="row">
<div class="col-md-8 col-md-offset-2" style="background:#ccc;">
Nivel 1: .col-md-8
<div class="row">
<div class="col-md-6" style="background:#bbb;">
Nivel 2: .col-md-6
</div>
<div class="col-md-6" style="background:#ddd;">
Nivel 2: .col-md-6
</div>
</div>
</div>
</div>
</div>
-------- o --------
7
3. Tipografía:
Los estilos relacionados con la tipografía y el texto de los contenidos son esenciales en cualquier
framework CSS. Por esa razón, Bootstrap 3 incluye decenas de estilos para los principales elementos
utilizados en los sitios y aplicaciones web.
3.1. Encabezado (Heading):

Ejemplo:
<h1>h1 Bootstrap heading (36px)</h1>
</div>
3.1.1. Subtítulos en línea (Inline Subheading):

Para agregar un subtítulo en la misma línea del encabezado, simplemente introduzca un texto
con la etiqueta <small>. Ejemplo:
<h1>h1 Heading. <small>Subtítulo h1</small></h1>
</div>
3.2. Párrafo:
Bootstrap ofrece un tamaño de fuente (.font-size) global de 14px, que se aplica por defecto a
un texto o párrafo. Un párrafo se define con la etiqueta <p>. Un párrafo incluye un margen inferior cuyo
valor es la mitad que su interlineado (10px por defecto). Ejemplo:
<p>Este es un ejemplo de párrafo ...</p>
3.2.1. Párrafo destacado:

Ejemplo:
<p class="lead">Este es un párrafo destacado ...</p>
3.3. Formato (énfasis) a un texto:
Etiqueta Descripción
<strong> Muestra el texto con un estilo de fuente en negrita. Se usa para indicar énfasis fuerte.
<b> Muestra el texto con un estilo de fuente en negrita.
<em> Muestra el texto con un estilo en cursiva o itálica. Se usa para términos técnicos.
<i> Muestra el texto con un estilo en cursiva o itálica.
<ins> Muestra el texto subrayado. Se usa para marcar secciones de texto que fueron insertadas.
<u> Muestra el texto subrayado. (Esta etiqueta está desaprobada)
<del> Muestra el texto tachado. Se usa para marcar secciones de texto que han sido borradas.
<s> Muestra el texto tachado. (Esta etiqueta está desaprobada)
<big> Muestra el texto con un tamaño un poco más grande.
<small> Muestra el texto con un tamaño más pequeño (85% del tamaño de letra).
<sup> Muestra el texto como superíndice.
<sub> Muestra el texto como subíndice.
<mark> Muestra el texto resaltado, con un fondo de color (highlight). Se usa para indicar relevancia.
<kbd> Muestra el texto resaltado, con fondo oscuro. Se usa para indicar combinaciones de teclas.
<code> Se usa para definir código de computadora (lenguajes de programación).
<pre> Se usa para mostrar texto preformateado, respetando los saltos de línea y espaciado.
8
Ejemplo:
<strong>Texto en negrita para destacarlo o enfatizarlo</strong> <br />

<b>Texto en negrita de html5</b> <br />
<em>Texto en cursiva que se usa para voz o términos técnicos</em> <br />
<i>Texto en cursiva de html5</i> <br />
<ins>Texto insertado en un documento</ins> <br />
<u>Texto subrayado de html5</u> <br />
<del>Texto tachado</del> para indicar que ha sido borrado <br />
<s>Texto tachado</s> para indicar poca relevancia o poca precisión <br />
<big>Texto con letra grande</big> <br />
<small>Texto con letra pequeña</small> <br />
20 Km<sup>2</sup> <br />
H<sub>2</sub>O <br />
Texto <mark>resaltado</mark> para indicar relevancia <br />
Presione <kbd>Ctrl + S</kbd> para guardar. <br />
El elemento <code><section></code> es nuevo en HTML5. <br />
<pre><p>Así se escribe un párrafo</p></pre> <br />
3.4. Alinear un texto:
Clase Descripción
.text-left Permite alinear el texto a la izquierda.
.text-center Permite centrar el texto.
.text-right Permite alinear el texto a la derecha.
.text-justify Permite justificar el texto.
.text-nowrap Permite que el texto no se fragmente al disminuir el ancho del navegador.
Ejemplo:
<h4>Ejemplo de alineación de un texto</h4>
<p class="text-left">Texto alineado a la izquierda.</p>
<p class="text-center">Texto centrado.</p>
<p class="text-right">Texto alineado a la derecha.</p>
<p class="text-justify">Texto justificado.</p>
<p class="text-nowrap">Texto que no se fragmenta al disminuir la ventana.</p>
3.5. Texto en color:
Clase Descripción
.text-primary Aplica un color que indica que es “importante” a un texto.
.text-success Aplica un color de “resultado exitoso” a un texto.
.text-info Aplica un color referente a una “información” a un texto.
.text-warning Aplica un color que indica que se “requiere atención” a un texto.
.text-danger Aplica un color de “acción negativa o peligrosa” a un texto.
.text-muted Aplica un color gris a un texto.
Ejemplo:
<h4>Ejemplo de texto en color</h4>
<p class="text-primary">Texto tipo primary.</p>
<p class="text-success">Texto tipo success.</p>
<p class="text-info">Texto tipo info.</p>
<p class="text-warning">Texto tipo warning.</p>
<p class="text-danger">Texto tipo danger.</p>
<p class="text-muted">Texto tipo muted.</p>
9
3.6. Texto con fondo de color:
Clase Descripción
.bg-primary Aplica un fondo de color “primary” (importante) a un texto.
.bg-success Aplica un fondo de color “success” (resultado exitoso) a un texto.
.bg-info Aplica un fondo de color “info” (información) a un texto.
.bg-warning Aplica un fondo de color “warning” (requiere atención) a un texto.
.bg-danger Aplica un fondo de color “danger” (acción negativa o peligrosa) a un texto.
Ejemplo:
<h4>Ejemplo de texto con fondo de color</h4>
<p class="bg-primary">Texto con fondo primary.</p>
<p class="bg-success">Texto con fondo success.</p>
<p class="bg-info">Texto con fondo info.</p>
<p class="bg-warning">Texto con fondo warning.</p>
<p class="bg-danger">Texto con fondo danger.</p>
3.7. Mayúscula y minúscula:
Clase Descripción
.text-uppercase Convierte todo el texto en mayúscula.
.text-lowercase Convierte todo el texto en minúscula.
.text-capitalize Convierte un texto a la inicial de cada palabra en mayúscula.
Ejemplo:
<h4>Ejemplo de conversión en mayúscula y minúscula</h4>
<p class="text-uppercase">Texto en mayúscula.</p>
<p class="text-lowercase">Texto en minúscula.</p>
<p class="text-capitalize">Texto con iniciales en mayúscula.</p>
3.8. Abreviaturas (Abbreviations):

Las abreviaturas tienen un borde inferior punteado. Cuando el ratón se posa encima se muestra
un texto adicional (que corresponde al significado de la abreviatura). Ejemplo:
<abbr title="Señora">Sra.</abbr> Josefina Pérez
3.8.1. Abreviaturas iniciales:

Agregue la clase .initialism (iniciales) a una abreviatura para reducir ligeramente su tamaño
de letra y así hacer que el texto se lea mejor. Ejemplo:
El <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
3.9. Direcciones (Addresses):

Use la etiqueta <address> para mostrar la información de contacto de su sitio o página. Añada
<br> al final de cada línea para mantener el texto de la dirección bien formateado. Ejemplo:
<address>
<strong>Twitter, Inc.</strong><br/>
1355 Market Street, Suite 900<br/>
San Francisco, CA 94103<br/>
Phone: (123) 456-7890
</address>
10
Este es otro ejemplo de información de contacto:
<address>
<strong>Ing. Eduardo Vargas</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
3.10. Citas (Blockquotes):

Estos elementos se emplean para incluir contenido de otras fuentes dentro de su página. Se
recomienda encerrar el texto con el elemento <p>. Ejemplo:
<blockquote>
<p>Este es un texto de otro autor.</p>
</blockquote>
3.10.1. Cita nombrando la fuente:

Estos elementos se emplean para incluir contenido de otras fuentes dentro de su página. Se
recomienda encerrar el texto con el elemento <p>. Ejemplo:
<blockquote>
<p>Cuando quieres una cosa, todo el Universo conspira para ayudarte a
conseguirla.</p>
<footer> Paulo Coelho en <cite title="Source Title"> El Alquimista</cite>
</footer>
</blockquote>
3.10.2. Cita alineada a la derecha:

Cita con el contenido alineado a la derecha. Ejemplo:
<blockquote class="blockquote-reverse">
<p>Huid del país donde uno solo ejerce todos los poderes: es un país de
esclavos.</p>
</blockquote>
-------- o --------
11
4. Tablas (Tables):
Clase Descripción
.table Aplica el estilo de tabla de Bootstrap.
Para aplicar los estilos básicos de Bootstrap 3 a una tabla, agregue la clase .table a un
elemento <table>. El resultado es una tabla con un .padding muy sutil y con líneas de separación
solamente en las filas.
4.1. Tabla básica:

Ejemplo:
<table class="table">
<caption>Tabla básica</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pablo</td>
<td>Picasso</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Salvador</td>
<td>Dalí</td>
</tr>
</tbody>
</table>
</div>
4.2. Tabla tipo cebra:

Clase Descripción
.table-striped Aplica el estilo de tabla tipo “cebra”, aplicando color a las filas alternadamente.
Una tabla tipo cebra (piel de cebra) es aquella cuyas filas alternan su color de fondo para mejorar
la legibilidad de los contenidos. En Bootstrap 3, agregue la clase .table-striped para crear una tabla
cebreada. Ejemplo:
<table class="table table-striped">

...
</table>
Nota: Las tablas tipo cebra no funcionan en Internet Explorer 8, porque utilizan el selector :nth-child
de CSS.
4.3. Tabla con bordes:

Clase Descripción
.table-bordered Aplica un estilo que permite ver los bordes de la tabla.
Para aplicar el estilo tradicional de las tablas con los cuatro bordes en todas las celdas y en la
propia tabla, agregue la clase .table-bordered. Ejemplo:
<table class="table table-bordered">
12
4.4. Tabla dinámica:
Clase Descripción
.table-hover Este estilo cambia el color de fondo de una fila, cuando se posa encima el
cursor.
Usando la clase .table-hover, se consigue que cuando pasemos el cursor por encima de una
fila, cambia su color de fondo (gris claro) para mejorar la lectura de dicha fila y de la tabla en general.
Ejemplo:
<table class="table table-hover">
4.5. Tabla condensada:

Clase Descripción
.table-condensed Este estilo reduce el espacio entre filas de la tabla.
Cuando una tabla es muy grande o se tienen muchas tablas en una misma página, puede ser
interesante mostrar sus contenidos de forma más compacta. Agregue la clase .table-condensed a
una tabla para que el padding de las filas se reduzca a la mitad. Ejemplo:
<table class="table table-condensed">
4.6. Tabla con colores:

Podemos aplicar un color de fondo a una determinada fila <tr> o a una celda <td> usando
cualquiera de las siguientes clases:
Clase Descripción
.active Aplica el color del estado .hover (gris) a una fila <tr> o una celda <td>.
.success Aplica un color de “resultado exitoso” a una fila <tr> o una celda <td>.
.info Aplica un color referente a una “información” a una fila <tr> o una celda <td>.
.warning Aplica un color que indica que se “requiere atención” a una fila <tr> o una celda <td>.
.danger Aplica un color de “acción negativa o peligrosa” a una fila <tr> o una celda <td>.
Ejemplo:
<caption>Tabla con colores</caption>
<thead class="active">
<tr>
<th>Pais</th>
<th>Moneda</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Estados Unidos</td>
<td>Dolar</td>
</tr>
<tr>
<td>Venezuela</td>
<td class="active">Bolívar</td>
</tr>
<tr>
<td class="info">Japón</td>
<td>Yen</td>
</tr>
</tbody>
</table>
</div>
13
4.7. Tabla responsive:
Clase Descripción
.table-responsive Este estilo aplica a la tabla un comportamiento responsive.
La solución que propone Bootstrap 3 para crear tablas responsive que se vean bien en
dispositivos pequeños consiste en añadir un “scroll horizontal” a las tablas que sean demasiado anchas.
Para ello, encierre cualquier tabla con la clase .table dentro de un elemento (ej: <div>) con la clase
.table-responsive.
En otras palabras, si el dispositivo o ventana del navegador tiene una anchura menor o igual a
768px y la tabla responsive tiene una anchura mayor, se agregará un “scroll horizontal”.
Cuando las tablas responsive se muestran en dispositivos con una anchura superior a 768px, se
ven igual que cualquier otra tabla normal.
Ejemplo:
<div class="table-responsive">
...
</table>
</div>
</div>
Nota: Disminuya el ancho del navegador para apreciar el “scroll horizontal”.
4.8. Tabla con varios estilos:

Puede aplicar más de un estilo a una tabla agregando las clases que se desean usar. Ejemplo:
<table class="table table-striped table-bordered table-hover">
...
</table>
</div>
4.9. Fusionando filas y columnas:

Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
Estos atributos no corresponden a Bootstrap, pero es importante recordarlos.
El siguiente ejemplo muestra cómo usar colspan para fusionar dos columnas; es decir, que una
celda ocupe dos columnas contiguas en una misma fila:
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2">D</td>
<td>E</td>
</tr>
El siguiente ejemplo muestra cómo usar rowspan para fusionar dos filas; es decir, que una celda
ocupe dos filas contiguas en una misma columna:
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
-------- o --------
14
5. Listas:
5.1. Lista no ordenada (con viñetas):

Ejemplo:
<h4>Ejemplo de Lista no ordenada</h4>

<ul>
<li>Blanco</li>
<li>Rojo</li>
<li>Verde</li>
<li>Morado</li>
</ul>
5.2. Lista ordenada (con números):

Ejemplo:
<h4>Ejemplo de Lista ordenada</h4>

<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
5.3. Lista anidada:

Ejemplo:
<h4>Ejemplo de Lista anidada</h4>
<ol>
<li>América</li>
<li>Asia</li>
<li>Europa
<ul>
<li>España</li>
<li>Francia</li>
<li>Italia</li>
</ul>
</li>
<li>África</li>
</ol>
5.4. Lista sin estilo (unstyled):
Clase Descripción
.list-unstyled Esta clase puede aplicarse a una lista ordenada <ol> o desordenada <ul>,
para que los ítems no muestren viñetas o numeración.
Ejemplo:
<h4>Ejemplo de Lista sin estilo</h4>

<ul class="list-unstyled">
<li>Chile</li>
<li>Venezuela
<ol>
<li>Barquisimeto</li>
<li>Valencia</li>
</ol>
</li>
<li>Uruguay</li>
</ul>
15
5.5. Lista en línea:
Clase Descripción
.list-inline Esta clase puede aplicarse a una lista ordenada <ol> o desordenada <ul>,
para que los ítems se muestren en una misma línea.
Ejemplo:
<h4>Ejemplo de Lista en línea</h4>

<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
5.6. Lista de definición:
Etiqueta Descripción
<dl> Esta etiqueta define una lista de definición o de descripción. Este tipo de listas agrupa
los ítems en pares: un ítem corresponde a un término (o descriptor) y el otro ítem
corresponde a su descripción.
<dt> Esta etiqueta define a un ítem correspondiente a un término.
<dd> Esta etiqueta define a un ítem correspondiente a una descripción.
Ejemplo:
<h4>Ejemplo de Lista de definición</h4>

<dl>
<dt>País:</dt>
<dd>Argentina</dd>
<dt>Capital:</dt>
<dd>Buenos Aires</dd>
</dl>
5.6.1. Lista de definición horizontal:
Clase Descripción
.dl-horizontal Use esta clase en una lista de definición para que un ítem <dt> y su
correspondiente ítem <dd> se muestren en una misma línea.
Ejemplo:
<h4>Ejemplo de Lista de definición horizontal</h4>

<dl class="dl-horizontal">
<dt>País:</dt>
<dd>Venezuela</dd>
<dt>Capital:</dt>
<dd>Caracas</dd>
</dl>
-------- o --------
16
6. Formularios (Forms):
Bootstrap 3 aplica por defecto algunos estilos a todos los componentes de un formulario.
Un formulario se compone de una serie de controles (o campos) agrupados con la etiqueta
<form>.
Cada control estará acompañado por un elemento <label>.
El elemento <label> y el control se agrupan en una etiqueta <div>. Esta etiqueta <div>
incluirá la clase .form-group para un espaciado óptimo.
Agregue la clase .form-control a todos los elementos textuales <input>, <textarea> y
<select> para asignarles una anchura width: 100%.
Clase Descripción
.form-group Incluya esta clase en una etiqueta <div> para que Bootstrap agrupe
apropiadamente un elemento <label> y el control respectivo.
.form-control Agregue esta clase a los elementos <input>, <textarea> y <select> para
establecer su anchura width: 100%.
6.1. Formulario básico:

Ejemplo # 1:
<form>
<div class="form-group">
<label for="usu">Usuario</label>
<input type="text" class="form-control" id="usu" placeholder="Usuario" />
</div>
<label for="pw">Clave</label>
<input type="password" class="form-control" id="pw" placeholder="Clave" />
</div>
</form>
Ejemplo # 2:
<form>
<label for="correo">E-mail</label>
<input type="email" class="form-control" id="correo" placeholder="E-mail"
/>
</div>
<label for="pass">Password</label>
<input type="password" class="form-control" id="pass"
placeholder="Password" />
</div>
<label for="archivo">Adjuntar un archivo</label>
<input type="file" id="archivo" />
<p class="help-block">Ejemplo de texto de ayuda.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Activa esta casilla
</label>
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
17
6.2. Tipos de diseño de Formulario:
Bootstrap ofrece tres tipos diferentes de diseño de formulario:
 Vertical (diseño por defecto)
 Horizontal
 En línea
6.2.1. Formulario vertical:

Un formulario con diseño Vertical (por defecto) no requiere que se aplique una clase. Este diseño
muestra cada control con su elemento <label> encima. Ejemplo:
<div class="row">
<div class="col-xs-offset-4 col-xs-4" style="background:#ddd;">
<h4>Ejemplo de Formulario vertical</h4>
<form>
<label for="lg">Login</label>
<input type="text" class="form-control" id="lg" placeholder="Login" />
</div>
<label for="pass">Password</label>
<input type="password" class="form-control" id="pass"
placeholder="Password" />
</div>
</form>
</div>
</div>
6.2.2. Formulario horizontal:

Clase Descripción
.form-horizontal Esta clase modifica el diseño de un formulario, colocando la etiqueta <label> a
la izquierda del control, que fueron agrupados con .form-group.
.control-label Esta clase debe aplicarse a todas las etiquetas <label> que se usan para
acompañar a un elemento control.
Un formulario con diseño Horizontal requiere que se agregue la clase .form-horizontal a la
etiqueta <form> y que se agregue la clase .control-label a todas las etiquetas <label>.
Además, agregue un tamaño con la clase de columnas (grid) a la etiqueta <label>; y encierre el
control con una etiqueta <div> para aplicarle un tamaño. Ejemplo:
<form class="form-horizontal">
<label class="control-label col-sm-2" for="ced">Cédula:</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="ced" placeholder="Cédula">
</div>
</div>
<div class="col-sm-offset-2 col-sm-6">
<label><input type="checkbox"> Recordar</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-6">
</div>
</div>
</form>
18
6.2.3. Formulario en línea:
Clase Descripción
.form-inline Esta clase modifica el diseño de un formulario, colocando la etiqueta <label> a
la izquierda del control, que fueron agrupados con .form-group, y agrupa toso
los elementos en una sola línea horizontal.
Un formulario con diseño En línea requiere que se aplique la clase .form-inline. Este diseño
muestra todos los elementos del formulario en una misma línea horizontal. Ejemplo:
<h3>Formulario Inline (ancho > 768px)</h3>
<form class="form-inline">
<label for="email">E-mail:</label>
<input type="email" class="form-control" id="email" placeholder="Entre
e-mail">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Entre
password">
</div>
<label><input type="checkbox">Recordar</label>
</div>
</form>
</div>
Nota: Este diseño aplica cuando la ventana del navegador tenga una anchura de al menos 768px. Si la
anchura disminuye el diseño se mostrará vertical.
6.3. Controles (campos) de un formulario:

Bootstrap soporta los siguientes controles para un formulario:
 Input
 Textarea
 Checkbox
 Radio
 Select
6.3.1. Input (casilla de texto):

Ejemplo:
<label for="apell">Apellido:</label>
<input type="text" class="form-control" id="apell">
</div>
Bootstrap soporta el control Input en todos sus tipos HTML5:
type Descripción
.text Casilla para ingresar un texto, tal como nombre o dirección.
.password Casilla para ingresar una contraseña (enmascarada con asteriscos o círculos).
.datetime Casilla para ingresar una fecha y hora.
.datetime-local Casilla para ingresar una fecha y hora (sin zona horaria).
.date Casilla para ingresar una fecha.
.month Casilla para ingresar un mes y año.
19
.time Casilla para ingresar un valor de hora (sin zona horaria).
.week Casilla para ingresar un número referente a una semana del año.
.number Casilla para ingresar un valor numérico.
.email Casilla para ingresar un correo electrónico.
.url Casilla para ingresar una dirección URL.
.search Casilla para ingresar un texto a buscar.
.tel Casilla para ingresar un número telefónico.
.color Casilla para ingresar un nombre de color.
6.3.2. Textarea (área de texto):

Ejemplo:
<label for="obs">Observaciones:</label>
<textarea class="form-control" rows="5" id="obs"></textarea>
</div>
6.3.3. Checkbox (casilla de verificaión):

Ejemplo con tres casillas de verificación (una encima de la otra):
<label><input type="checkbox" id="op1" value="op1">Opción 1</label>
</div>
<label><input type="checkbox" id="op2" value="op2" checked>Opción 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" id="op3" value="op3" disabled>Opción 3</label>
</div>
Nota: Puede iniciar el formulario con una casilla de verificación marcada usando la propiedad checked;
o desactivarla aplicando la clase .disabled.
Clase Descripción
.checkbox-inline Aplique esta clase a todas las etiquetas <div> de los controles Checkbox, para
que aparezcan en una misma línea horizontal.
Ejemplo con dos casillas de verificación en la misma línea:
<div class="checkbox-inline">
</div>
<div class="checkbox-inline">
</div>
6.3.4. Radio (Botón de radio):

Ejemplo con tres botones de radio (una encima de la otra):
<div class="radio">
<label>
<input type="radio" name="opt" id="opt1" value="opt1" checked>Option 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opt" id="opt2" value="opt2">Opción 2
</label>
</div>
20
<div class="radio disabled">
<label>
<input type="radio" name="opt" id="opt3" value="opt3" disabled>Opción 3
</label>
</div>
Nota: Puede iniciar el formulario con un botón de radio marcado usando la propiedad checked; o
desactivarlo aplicando la clase .disabled.
Clase Descripción
.radio-inline Aplique esta clase a todas las etiquetas <div> de los controles Radio, para que
aparezcan en una misma línea horizontal.
Ejemplo con dos botones de radio en la misma línea:
<div class="radio-inline">
<label>
</label>
</div>
<div class="radio-inline">
<label>
</label>
</div>
6.3.5. Select (Lista de selección):

Ejemplo de lista de selección o lista desplegable:
<label for="lista">Lista de selección:</label>
<select class="form-control" id="lista">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Nota: Una lista de selección permite escoger una opción de una lista. Para seleccionar más de una
opción de una lista se debe agregar la propiedad multiple.
Ejemplo de lista de selección múltiple:
<label for="lista">Lista de selección Múltiple:</label>
<select multiple class="form-control" id="lista">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
Nota: Seleccione más de una opción manteniendo presionada la tecla “Ctrl”.
21
6.4. Estados de un control:
Existen diferentes estados de un control:
 Con Foco
 Deshabilitado (disabled)
 Solo lectura (readonly)
Bootstrap 3 aplica una sombra a los campos seleccionados (que reciben el foco) colocando un
sombreado alrededor mediante la propiedad box-shadow de CSS.
Un control puede ser deshabilitado aplicando la propiedad disabled. Ejemplo:
<input type="text" class="form-control" id="cod" disabled>
Agregue la propiedad booleana readonly para prevenir que el usuario modifique su valor.
Ejemplo:
<input type="text" class="form-control" id="cod" readonly>
6.5. Tamaños de un control:

Podemos cambiar el tamaño de un control en los siguientes aspectos:
 Altura de un control
 Altura de un control y su label
 Ancho de un control
6.5.1. Altura de un control:
Clase Descripción
.input-lg Agregue esta clase a un control para que se muestre más alto.
.input-sm Agregue esta clase a un control para que se muestre más bajo.
El siguiente ejemplo muestra tres casillas de texto (alta, normal, baja); y tres listas de selección
(alto, normal, bajo):
<input type="text" class="form-control input-lg" placeholder="alto">

<input type="text" class="form-control" type="text" placeholder="normal">
<input type="text" class="form-control input-sm" placeholder="bajo">
<select class="form-control input-lg" id="lista1">

<option>A</option>
<option>B</option>
</select>
<select class="form-control" id="lista2">
<option>A</option>
<option>B</option>
</select>
<select class="form-control input-sm" id="lista3">
<option>A</option>
<option>B</option>
</select>
22
6.5.2. Altura de un control y su label:
Clase Descripción
.form-group-lg Agregue esta clase junto a la clase .form-group para que el control y su label se
muestren más altos.
.form-group-sm Agregue esta clase junto a la clase .form-group para que el control y su label se
muestren más bajos.
Para que las clases .form-group-lg y .form-group-sm se apliquen correctamente se deben

utilizar dentro de un formulario horizontal.
El siguiente ejemplo muestra una casilla de texto y su label altos; y luego otra casilla con su label
bajos:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label for="cod1" class="col-sm-2 control-label">Alto:</label>
<input type="text" class="form-control" id="cod1" placeholder="Código">
</div>
</div>
<div class="form-group form-group-sm">

<label for="cod2" class="col-sm-2 control-label">Bajo:</label>
<input type="text" class="form-control" id="cod2" placeholder="Código">
</div>
</div>
</form>
6.5.3. Ancho de un control:

Podemos cambiar el ancho de una casilla de texto encerrándola con una etiqueta <div> que
tenga aplicado un tamaño con la clase de la grid. Ejemplo:
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
</div>
</div>
</div>
6.6. Control con texto de ayuda:

Colocar un texto de ayuda a un control es una manera eficiente de guiar al usuario en el ingreso
correcto de un dato. Ejemplo:
<label for="cedula">Cédula:</label>
<input type="number" class="form-control" id="cedula">
<span class="help-block">Ingrese solo números.</span>
</div>
-------- o --------
23
7. Botones (Buttons):
Clase Descripción
.btn-default Aplica un color gris por defecto.
.btn-primary Aplica un color que indica que es el botón principal.
.btn-success Aplica un color de “acción exitosa o positiva”.
.btn-info Aplica un color referente a una “información”.
.btn-warning Aplica un color que indica que se “requiere precaución” con esta acción.
.btn-danger Aplica un color de “acción potencialmente negativa o peligrosa”.
.btn-link Aplica un color que lo enfatiza haciendo que se vea como un enlace (link).
Bootstrap provee siete clases para dar estilo a los botones. Ejemplo:
<button type="button" class="btn btn-default">Botón Default</button>

<button type="button" class="btn btn-primary">Botón Primary</button>
<button type="button" class="btn btn-success">Botón Success</button>
<button type="button" class="btn btn-info">Botón Info</button>
<button type="button" class="btn btn-warning">Botón Warning</button>
<button type="button" class="btn btn-danger">Botón Danger</button>
<button type="button" class="btn btn-link">Botón Link</button>
7.1. Dónde usar los botones:

Los estilos de botones pueden ser aplicados a cualquier elemento para darle un aspecto de
botón. Sin embargo, normalmente se aplica a estos elementos:
 <button>
 <a href>
 <input type="button" />
 <input type="submit" />
Ejemplo:
<button type="button" class="btn btn-primary">Botón</button>
<a href="#" class="btn btn-danger" role="button">Link</a>
<input type="button" class="btn btn-warning" value="Botón en Input" />
<input type="submit" class="btn btn-success" value="Botón en Submit" />
</div>
7.2. Tamaños de los botones:
Clase Descripción
.btn-lg Aplica un tamaño más grande a un botón o a un enlace <a>.
.btn-md Aplica un tamaño igual al tamaño por defecto a un botón o a un enlace <a>.
.btn-sm Aplica un tamaño más pequeño a un botón o a un enlace <a>.
.btn-xs Aplica un tamaño mucho más pequeño a un botón o a un enlace <a>.
Bootstrap provee cuatro tamaños que se pueden aplicar a un botón o a un enlace <a> (link).
Este ejemplo aplica tamaño a sus botones:
<h2>Tamaño de los botones</h2>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
</div>
24
El siguiente ejemplo aplica tamaños a los enlaces <a> (links):
<h2>Tamaño de los links</h2>
<a href="#" class="btn btn-info" role="button">Link normal</a>
<a href="#" class="btn btn-info btn-lg" role="button">Link Large</a>
<a href="#" class="btn btn-info btn-md" role="button">Link Medium</a>
<a href="#" class="btn btn-info btn-sm" role="button">Link Small</a>
<a href="#" class="btn btn-info btn-xs" role="button">Link XSmall</a>
</div>
7.3. Botones bloque:
Clase Descripción
.btn-block Un botón bloque se extiende por todo el ancho del elemento padre (contenedor).
Ejemplo:
<h2>Botones bloque</h2>
<button type="button" class="btn btn-primary btn-block">Botón 1</button>
<button type="button" class="btn btn-default btn-block">Botón 2</button>
<h2>Links bloque</h2>
<a href="#" class="btn btn-primary btn-block" role="button">Link 1</a>
<a href="#" class="btn btn-default btn-block" role="button">Link 2</a>
</div>
7.4. Estados de un Botón:
Clase Descripción
.active Aplica a un botón la apariencia de estar presionado.
.disabled Deshabilita un botón, no permite hacerle clic (estado inhabilitado).
Estas clases se pueden aplicar a un botón o a un enlace <a> (link). Ejemplo:
<button type="button" class="btn btn-primary">Botón normal</button>
<button type="button" class="btn btn-primary active">Botón active</button>
<button type="button" class="btn btn-primary disabled">Inhabilitado</button>
<a href="#" class="btn btn-success" role="button">Link normal</a>

<a href="#" class="btn btn-success active" role="button">Link active </a>
<a href="#" class="btn btn-success disabled" role="button">Inhabilitado</a>
</div>
-------- o --------
25
8. Grupo de Botones (Button Groups):
Clase Descripción
.btn-group Bootstrap agrupa una serie de botones a la vez (en una sola línea).
Bootstrap le permite agrupar una serie de botones a la vez (en una sola línea) en un grupo de
botones. Ejemplo:
<div class="btn-group">
<button type="button" class="btn btn-primary ">Primero</button>
<button type="button" class="btn btn-primary ">Segundo</button>
<button type="button" class="btn btn-primary ">Tercero</button>
</div>
Puede aplicar esta clase para agrupar enlaces. Ejemplo:
<a href="#" class="btn btn-info" role="button">Link 1</a>
</div>
8.1. Tamaño de un Grupo de botones:
Clase Descripción
.btn-group-lg Aplica un tamaño más grande a todos los botones de un grupo .btn-group.
.btn-group-sm Aplica un tamaño más pequeño a todos los botones de un grupo .btn-group.
.btn-group-xs Aplica un tamaño mucho más pequeño a los botones de un grupo .btn-group.
Bootstrap provee tres tamaños para un grupo de botones. Estas clases se pueden aplicar a un
grupo de botones en lugar de cambiar el tamaño de cada botón. Ejemplo:
<h3>Grupo de botones tamaño lg</h3>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default ">Uno</button>
<button type="button" class="btn btn-default ">Dos</button>
<button type="button" class="btn btn-default ">Tres</button>
</div>
</div>
8.2. Grupo de Botones Vertical:
Clase Descripción
.btn-group-vertical Agrupa una serie de botones verticalmente en lugar de su estilo horizontal
habitual.
Ejemplo:
<h3>Grupo de botones Vertical</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
26
8.3. Grupo de Botones en Toolbar:
Clase Descripción
.btn-toolbar Permite agrupar una serie de .btn-group en una misma línea.
Bootstrap le permite colocar varios grupos de botones dentro de un toolbar o barra de

herramientas.
<div class="btn-toolbar" role="toolbar">

<button type="button" class="btn btn-default">1</button>
</div>
</div>
</div>
</div>
8.4. Grupo de Botones Justified:
Clase Descripción
.btn-group-justified Agrupa una serie de botones verticalmente en lugar de su estilo horizontal
habitual.
Bootstrap le permite que un grupo de botones abarque todo el ancho de la pantalla, haciendo que
cada botón ocupe la misma anchura. El siguiente ejemplo usa elementos <a href>.
<h3>Grupo de botones links Justified</h3>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Link 1</a>
</div>
</div>
Para elementos <button>, debe envolver cada botón en una clase btn-group.
<h3>Grupo de botones Justified</h3>
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-primary">Botón A</button>
</div>
<button type="button" class="btn btn-primary">Botón B</button>
</div>
<button type="button" class="btn btn-primary">Botón C</button>
</div>
</div>
</div>
27
9. Botón desplegable (dropdown):
Clase Descripción
.dropdown-toggle Agregue esta clase al botón que se va a desplegar.
.dropdown-menu Agregue esta clase a la lista desordenada <ul>.
.dropdown Agrupe el botón y la lista desordenada con una clase .dropdown
Bootstrap permite crear un botón desplegable (dropdown) de la siguiente manera:

 Crear un botón y agregar la clase .dropdown-toggle., y el atributo data-toggle="dropdown".
 Opcionalmente, puede agregar un símbolo  con la clase .caret en una etiqueta <span>.
 Agregue los ítems en una lista desordenada <ul> con la clase .dropdown-menu.
 Encierre el botón principal y la lista desordenada con una etiqueta <div> con la clase .dropdown.
Ejemplo:
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle =
"dropdown">
Menú desplegable
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
</ul>
</div>
Otra forma de crear un botón desplegable es a partir de un enlace <a> como botón principal del
menú. Ejemplo:
<a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Link desplegable
</a>
</ul>
</div>
9.1. Botón desplegable hacia arriba (dropdown):
Clase Descripción
.dropup Agrupe el botón y la lista desordenada con una clase .dropup para crear
un botón desplegable hacia arriba.
Ejemplo:
<div class="dropup">
"dropdown">
Menú hacia arriba
</button>
</ul>
</div>
28
9.2. Separador de ítems (divider):
Clase Descripción
.divider Use esta clase en una etiqueta <li> para que se muestre una línea
separadora entre ítems.
Ejemplo:
<button type="button" class="btn btn-info dropdown-toggle" data-toggle =
"dropdown">
Menú desplegable
</button>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
9.3. Estados de un Link (ítem):
Clase Descripción
.active Coloque esta clase en una etiqueta <li> para una apariencia de estar seleccionado.
.disabled Coloque esta clase en una etiqueta <li>, para deshabilitar un ítem (no permite hacerle
clic).
Ejemplo:
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
Menú desplegable
</button>
<li class="active"><a href="#">Link 1</a></li>
<li class="disabled"><a href="#">Link 3</a></li>
</ul>
</div>
-------- o --------
29
10. Menú desplegable (dropdown):
Clase Descripción
.btn-group Agrupe cada botón desplegable del menú desplegable con la clase .btn-group.
Podemos crear un menú desplegable (dropdown) agrupando una serie de botones desplegables.
Cada botón desplegable debe estar agrupado con la clase .btn-group.
El siguiente ejemplo muestra un menú desplegable formado por dos botones desplegables y un
botón (link):
"dropdown">
Menú desplegable 1
</button>
</ul>
</div>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle =
"dropdown">
Menú desplegable 2
</button>
<li class="disabled"><a href="#">Link 6</a></li>
</ul>
</div>
<a href="#" class="btn btn-danger" role="button">Link</a>
</div>
-------- o --------
30
11. Elementos de navegación (Navs):
Clase Descripción
.nav Use esta clase en una lista desordenada <ul> para aplicar a sus ítems (links) el estilo
de elementos de navegación.
Bootstrap permite aplicar a una lista desordenada <ul> que contiene enlaces (links) el estilo de
elementos de navegación, agregando la clase .nav acompañada del tipo de elemento.
La sintaxis para un navegador es:
<ul class="nav nav-pills">

...
</ul>
11.1. Tipos de elementos de navegación (Navs):
Clase Descripción
.nav-tabs Agregue esta clase junto a .nav para crear el estilo de pestañas de navegación.
.nav-pills Agregue esta clase junto a .nav para crear el estilo de botones de navegación.
Bootstrap tiene dos estilos de elementos de navegación:

 Pestañas (tabs): muestra los enlaces (links) de la lista en forma de pestañas.
 Botones (pills): muestra los enlaces (links) de la lista en forma de botones.
El siguiente ejemplo muestra el estilo de pestañas de navegación (tabs):
<ul class="nav nav-tabs">

<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Mensajes</a></li>
</ul>
El siguiente ejemplo muestra el estilo de botones de navegación (pills):

</ul>
11.2. Elementos de navegación vertical (stacked):
Clase Descripción
.nav-stacked Agregue esta clase junto a una clase .nav-pills para obtener un estilo de
botones de navegación “vertical”.
Los elementos de navegación de tipo botones también se pueden apilar verticalmente. Sólo tiene
que añadir la clase .nav-stacked:
Ejemplo:
<ul class="nav nav-pills nav-stacked">

</ul>
31
11.3. Elementos de navegación justificado (Justified):
Clase Descripción
.nav-justified Agregue esta clase junto a una clase .nav-tabs o a una clase .nav-pills
para aplicar un estilo de navegación “justificado”.
Esta clase permite crear una lista de navegación que ocupa toda la anchura del contenedor en el
que se encuentra, donde todos sus enlaces tienen la misma anchura.
Este comportamiento sólo es posible para los dispositivos con una anchura superior a 768px. En
una anchura menor, la lista de navegación se muestra verticalmente.
Esta es su sintaxis:
<ul class="nav nav-tabs nav-justified">

...
</ul>
<ul class="nav nav-pills nav-justified">

...
</ul>
11.4. Estados de un Link (ítem):
Clase Descripción
.active Coloque esta clase en una etiqueta <li> para una apariencia de estar seleccionado.
.disabled Coloque esta clase en una etiqueta <li>, para deshabilitar un ítem (no permite hacerle
clic).
Ejemplo:

<li class="disabled"><a href="#">Mensajes</a></li>
</ul>
11.5. Navegación con menús desplegables (dropdowns):

Se recomienda revisar la sección 9. “Botón desplegable (dropdown)”. Se puede agregar un menú
desplegable a una lista de navegación de tipo pestañas (tabs) o de tipo botones (pills). Ejemplo:

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
Menú desplegable
</a>
</ul>
</li>
</ul>
32
11.6. Ejemplo de navegación dinámica:
Puede crear elementos de navegación dinámicos, es decir, que cada cuerpo o contenido de la
página esté asociado a cada elemento (pestaña o botón) de navegación.
El procedimiento, en general es:
 Crear una lista de navegación, de tipo pestañas o botones.
 Agregue a cada enlace <a> el elemento: data-toggle="tab".
 Además, cada enlace <a> dede tener un elemento href que sea igual a un identificador precedido
por “#”.
 A continuación de esta lista, se crearán las páginas para cada enlace: encerrados con una etiqueta
<div> que incluya un id y un elemento class="tab-pane fade".
 Todos estos <div> se envolverán con un <div> con la clase “.tab-content”.
Ejemplo:
<h2>Elementos de navegación dinámicos</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#menu1" data-toggle="tab">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME:</h3>
<p>Bienvenidos.</p>
</div>
<div id="menu1" class="tab-pane fade">
<p>Aquí se muestra una imagen (foto).</p>
<img src="foto1.jpg" class="center-block img-responsive" width="400">
</div>
<h3>Menu 2:</h3>
<p>Este es el contenido de Menu 2.</p>
</div>
<h3>Menu 3:</h3>
<p>Aquí se muestra otra imagen (foto).</p>
<img src="foto2.jpg" class="center-block img-responsive" width="400">
</div>
</div>
</div>
Para crear una lista de navegación con botones, sólo cambie la tercera línea del ejemplo anterior
por esta otra línea:
-------- o --------
33
12. Barras de navegación (NavBar):
Las barras de navegación (Navbars) son componentes adaptados al diseño web responsive y
que se utilizan como elemento principal (cabecera) de navegación tanto en las aplicaciones como en los
sitios web.
En los dispositivos móviles se muestran inicialmente minimizadas (colapsadas) y al pulsar sobre
ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente,
las barras de navegación muestran todos sus contenidos horizontalmente.
12.1. Barra de navegación básica:

Una barra de navegación se crea con la etiqueta <nav> aplicándole un estilo apropiado. Se
compone de dos partes:
 El encabezado (head): Es opcional y comprende un enlace a mi Sitio Web y/o un botón para
desplegar el menú de opciones cuando la barra colapsa.
 Conjunto de enlaces: Comprende los enlaces, casillas de texto, botones, listas desplegables que
componen el menú de opciones de la barra de navegación:
Ejemplo:
<nav class="navbar navbar-default" role="navigation">


<div class="navbar-header">
<a href="#" class="navbar-brand">MiSitioWeb</a>
</div>


<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Página 1</a></li>
</ul>
</div>
</nav>
12.2. El encabezado (Head):

La barra de navegación puede contener (es opcional) elementos de encabezado. Estos
elementos son: un logotipo o enlace a mi Sitio Web (brand), en forma de texto o de imagen, y/o un botón
(con un texto o icono) para desplegar el menú de opciones cuando la barra colapsa.
El ejemplo anterior crea una barra de navegación con un logotipo o enlace a mi sitio web (brand).
El siguiente ejemplo contiene un logotipo (brand) en forma de imagen y un texto:


<a href="#" class="navbar-brand">
<img src="../imagenes/logo.jpg" width="90">
</a>
<p class="navbar-text pull-right">Bienvenido Vladimir</p>
</div>

...
</div>
</nav>
34
12.3. Botón de despliegue:
Podemos agregar un botón que aparecerá cuando la barra de navegación colapse. Este botón
sirve para desplegar y ocultar el menú (los enlaces) de la barra.
El siguiente ejemplo crea una barra de navegación con un botón de despliegue “Menú”:


<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#ejemplo-1">
Menú
</button>
</div>

<div class="collapse navbar-collapse" id="ejemplo-1">

</ul>
</div> 

</div> 
</nav>
El siguiente ejemplo agrega un botón de despliegue con icono de tres barras horizontales:

<span class="sr-only">Menú</span>
<span class="icon-bar"></span>
</button>
</div>
</ul>
</nav>
35
12.4. Elementos del Menú:
La barra de navegación puede contener varios elementos en el menú de opciones, tales como
enlaces, listas desplegables o formularios (casillas de texto y botones), los cuales se pueden ocultar al
minimizar la barra.
El siguiente ejemplo crea una barra de navegación con diferentes elementos en el menú:


</button>
</div>





<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menú desplegable
</a>
<li><a href="#">Acción 1</a></li>
</ul>
</li>
</ul>


<form class="navbar-form navbar-left" role="search">
<input type="text" class="form-control" placeholder="Buscar">
</div>
</form>


<button type="button" class="btn btn-default navbar-btn">Salir</button>

</nav>
36
12.5. Alinear elementos de la barra:
Clase Descripción
.navbar-left Esta clase permite alinear los elementos a la izquierda (por defecto) de la barra.
.navbar-right Esta clase permite alinear los elementos a la derecha de la barra.
Para alinear los enlaces, formularios, botones o texto de la barra de navegación, puede utilizar las
clases .navbar-left y .navbar-right, que añaden a ese elemento un float en la dirección
correspondiente. Así, para alinear por ejemplo varios enlaces de navegación, puede encerrarlos dentro
de un elemento <ul> y aplicar sobre este último una de las dos clases mencionadas anteriormente.
En realidad, estas clases se basan en las clases genéricas .pull-left y .pull-right. La
diferencia es que han sido adaptadas a los diferentes visores para que los elementos de la barra de
navegación se vean lo mejor posible en todo tipo de dispositivos.
El siguiente ejemplo agrega elementos a la izquierda y a la derecha de la barra de navegación:


</button>
</div>



</ul>


<ul class="nav navbar-nav navbar-right">
</ul>

</nav>
Nota: No olvide añadir el atributo role="navigation" a todas las barras de navegación, para mejorar
la accesibilidad de los sitios y aplicaciones.
Nota: La barra de navegación responsive requiere el uso del plugin collapse de JavaScript incluido en
Bootstrap 3. Esto para prevenir si Javascript está desactivado en el navegador.
37
12.6. Barra de navegación fija (Fixed to top):
Clase Descripción
.navbar-fixed-top Esta clase fija la barra de navegación en la parte superior de la página.
Aplique la clase .navbar-fixed-top a la barra de navegación para fijarla en la parte superior

de la página. Se recomienda agregar un contenedor .container / .container-fluid.
Nota: Debido a los estilos aplicados, la barra de navegación fija (to top) puede tapar los contenidos que
se encuentran en la parte superior de la página. Para evitarlo, añada un .padding-top en el elemento
<body>. Como por defecto la barra de navegación tiene una altura de 50px, aplique un estilo
recomendado de 70px:
El siguiente ejemplo muestra la manera de crear una barra de navegación fija en la parte
superior:
<body style="padding-top: 70px;">

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
...
</nav>
<h3>Barra de navegación Fija (Fixed to top)</h3>
<p>Este ejemplo muestra la manera de usar <strong>.navbar-fixed-top</strong>
en la barra de navegación.</p>
</div>
</body>
12.7. Barra de navegación fija (Fixed to bottom):

Clase Descripción
.navbar-fixed-bottom Esta clase fija la barra de navegación en la parte inferior de la página.
Aplique la clase .navbar-fixed-bottom para fijarla en la parte inferior de la página. Se

recomienda agregar un contenedor .container / .container-fluid.
Nota: Debido a los estilos aplicados, la barra de navegación fija (to bottom) puede tapar los contenidos
que se encuentran en la parte inferior de la página. Para evitarlo, añada un .padding-bottom: 70px.
El siguiente ejemplo muestra la manera de crear una barra de navegación fija en la parte inferior:
<body style="padding-bottom: 70px;">

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
...
...
</nav>
<h3>Barra de navegación Fija (Fixed to bottom)</h3>
</div>
</body>
38
12.8. Barra de navegación estática en la parte superior (Static top):
Clase Descripción
.navbar-static-top Esta clase adapta la barra de navegación al contenedor, en la parte superior
de la página.
Aplique la clase .navbar-static-top para crear una barra de navegación que ocupe toda la
anchura del elemento (contenedor) en el que se encuentra.
El siguiente ejemplo muestra la manera de crear una barra de navegación estática en la parte
superior:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
...
...
</nav>
<h3>Barra de navegación Estática (Static top)</h3>

<p>Este ejemplo muestra la manera de usar <b>.navbar-static-top</b>
</div>
12.9. Barra de navegación invertida (Inverse):
Clase Descripción
.navbar-inverse Esta clase aplica un color oscuro a la barra de navegación.
El estilo por defecto de las barras de navegación no queda muy bien en las páginas con fondo
oscuro. Por eso Bootstrap 3 define un estilo alternativo muy oscuro que se activa aplicando la clase
.navbar-inverse a la barra de navegación. Ejemplo:
<nav class="navbar navbar-default navbar-inverse" role="navigation">

...
...
</nav>
<h3>Barra de navegación Invertida (Inverse)</h3>
<p>Este ejemplo muestra la manera de usar <b>.navbar-inverse</b>
</div>
39
12.10. Ejemplo de Barra de navegación con formulario login desplegable a la derecha:
<nav class="navbar navbar-inverse" role="navigation">


</button>
<a href="#" class="navbar-brand">WebSiteName</a>
</div>


<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>


<ul class="nav navbar-nav navbar-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Login <span class="glyphicon glyphicon-log-in"></span>
</a>
<div class="dropdown-menu">
<form id="formLogin" class="form container-fluid">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="button" id="btnLogin" class="btn btn-block">
Login
</button>
</form>
<br>
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<h3>Navbar With Dropdown</h3>
</div>
40
12.11. Ejemplo de Barra de navegación lateral (Slide Menu):
El siguiente código pertenece a la barra de navegación:


<nav class="navbar navbar-default sidebar" role="navigation">

</button>
<a href="#" class="navbar-brand">WebSiteName</a>
</div>


<li class="active"><a href="#">Home <span style="font-size:16px;"

class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a>
</li>


<a href="#" class="dropdown-toggle" data-toggle="dropdown">About
<span style="font-size:16px;" class="pull-right
hidden-xs showopacity glyphicon glyphicon-user">
</span>
</a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="#">Crear</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Contact</a></li>
<li class="divider"></li>
<li><a href="#">Team</a></li>
</ul>
</li>
<li><a href="#">links<span style="font-size:16px;" class="pull-right

hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>
<li><a href="#">Tags<span style="font-size:16px;" class="pull-right

hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
</ul>
</nav>
<h3>Slide menu Navbar</h3>
<p>This example adds a slide menu in the navigation bar.</p>
</div>
41
El siguiente código pertenece al script CSS para que funcione el Slide:
<style>
nav.sidebar,
.main {
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
.main {
padding: 10px 10px 0 10px;
}
@media (min-width: 765px) {

.main {
position: absolute;
width: calc(100% - 40px);
margin-left: 40px;
float: right;
}
nav.sidebar:hover + .main {
margin-left: 200px;
}
nav.sidebar.navbar.sidebar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
nav.sidebar .navbar-brand,
nav.sidebar .navbar-header {
text-align: center;
width: 100%;
margin-left: 0px;
}
nav.sidebar a {
padding-right: 13px;
}
nav.sidebar .navbar-nav > li:first-child {
border-top: 1px #e5e5e5 solid;
}
nav.sidebar .navbar-nav > li {
border-bottom: 1px #e5e5e5 solid;
}
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
nav.sidebar .navbar-collapse,
nav.sidebar .container-fluid {
padding: 0 0px 0 0px;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
42
}
nav.sidebar {
width: 200px;
height: 100%;
margin-left: -160px;
float: left;
margin-bottom: 0px;
}
nav.sidebar li {
width: 100%;
}
nav.sidebar:hover {
margin-left: 0px;
}
.forAnimate {
opacity: 0;
}
}
@media (min-width: 1330px) {

.main {
width: calc(100% - 200px);
margin-left: 200px;
}
nav.sidebar {
margin-left: 0px;
float: left;
}
nav.sidebar .forAnimate {
opacity: 1;
}
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate {
opacity: 1;
}
</style>
-------- o --------
43
13. Etiquetas (Labels):
Clase Descripción
.label Use esta clase dentro de un elemento <span> para crear una etiqueta.
Las etiquetas se utilizan generalmente para expresar información valiosa en las páginas web,
tales como notas importantes, tips, consejos, mensajes de advertencia, o información adicional acerca de
algo. El uso de la clase .label se muestra en el siguiente ejemplo:
<span class="label label-default">Nuevo</span>
13.1. Etiquetas en color:
Clase Descripción
.label-default Aplica un color gris por defecto.
.label-primary Aplica un color que indica que es principal.
.label-success Aplica un color de “acción exitosa o positiva”.
.label-info Aplica un color referente a una “información”.
.label-warning Aplica un color que indica que se “requiere precaución” con esta acción.
.label-danger Aplica un color de “acción potencialmente negativa o peligrosa”.
Bootstrap provee seis clases para dar estilo a las etiquetas. Ejemplo:
<span class="label label-default">Default</span>

<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
13.2. Dónde usar las etiquetas:

Una etiqueta puede ser aplicada a cualquier elemento que la requiera. Sin embargo,
normalmente se aplica a estos elementos:
 <h1>..<h6>
 <a href>
 <button>
Ejemplo de etiqueta en un encabezado:
<h3>Rubén Limardo <span class="label label-warning">Ven</span></h3>
Ejemplo de etiqueta en un enlace:
<a href="#">Tutorial <span class="label label-default">New</span></a>
Ejemplo de etiqueta en un botón:
<button type="button" class="btn btn-success">

Botón <span class="label label-default">Nuevo</span>
</button>
-------- o --------
44
14. Badges:
Clase Descripción
.badge Use esta clase dentro de un elemento <span> para crear un indicador “badge”.
Los elementos “badges” son indicadores numéricos asociados a un enlace (link). Los “badges”
se emplean para destacar elementos nuevos o que no han sido leídos.
El uso de la clase .badge se muestra en el siguiente ejemplo:
<span class="badge">1</span>
14.1. Dónde usar los badges:

Un “badge” se utiliza generalmente dentro de un enlace (link). Ejemplo:
<a href="#">Mensajes <span class="badge">24</span></a>
Un “badge” puede ser aplicado a cualquier otro elemento que lo requiera.

El siguiente ejemplo aplica este elemento a un botón:
<button type="button" class="btn btn-primary">

Comentarios <span class="badge">4</span>
</button>
Por otra parte, los “badges” disponen por defecto de los estilos adecuados para verse bien
cuando se incluyen dentro del enlace seleccionado de un elemento de navegación (.nav).
El siguiente ejemplo aplica “badges” a una serie de botones de navegación (.nav pills):

<li class="active">
<a href="#">Nuevos <span class="badge">11</span></a>
</li>
<li><a href="#">Leídos</a></li>
<li><a href="#">Guardados <span class="badge">9</span></a></li>
</ul>
Nota: Lo mejor de los “badges” es que se ocultan automáticamente cuando no hay elementos nuevos o
sin leer, gracias al selector :empty de CSS. Este comportamiento no está disponible en Internet
Explorer 8 porque ese navegador no soporta el selector :empty.
-------- o --------
45
15. Glyphicons:
Bootstrap incluye más de 250 glifos en formato de fuente (font format). Los glifos medianos
(Glyphicons Halflings) no están normalmente disponibles de forma gratuita, pero su creador los ha puesto
a disposición de Bootstrap libre de costo.
El siguiente ejemplo permite incluir un glifo en cada botón.
<h3>Ejemplo de uso de Glyphicon</h3>
<span class="glyphicon glyphicon-user"></span>
</button>
<button type="button" class="btn btn-default">
Inicio <span class="glyphicon glyphicon-home"></span>
</button>
<span class="glyphicon glyphicon-search"></span> Buscar2
</button>
<span style="font-size:20px;" class="glyphicon glyphicon-
user"></span>
</button>
</div>
El siguiente ejemplo permite incluir un glifo en un link <a href> tipo botón. No olvide añadir un
espacio entre el icono y el texto para que se vea mejor.
<h3>Ejemplo 2 de uso de Glyphicon</h3>
<a href="#" class="btn btn-info" role="button">
Link 1 <span class="glyphicon glyphicon-globe"></span>
</a>
<a href="#" class="btn btn-info" role="button">
Link 2 <span class="glyphicon glyphicon-wrench"></span>
</a>
</div>
Este ejemplo crea un grupo de botones tipo barra de herramientas (toolbar) que incluye glifos.
<h3>Ejemplo 3 de uso de Glyphicon</h3>
<div class="btn-toolbar" role="toolbar">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<span class="glyphicon glyphicon-align-center"></span>
</button>
<span class="glyphicon glyphicon-align-right"></span>
</button>
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
</div>
</div>
-------- o --------
46
16. Imágenes (Images):
Clase Descripción
.img-responsive Añada esta clase a una imagen para que se comporte de manera responsive.
.center-block Añada esta clase a una imagen para centrarla en su contenedor.
Como se explica en la sección 2.1.3. “Imágenes responsive”, Bootstrap 3 ya no adapta el tamaño

de las imágenes automáticamente como sucedía en Bootstrap 2.
Ahora, en Bootstrap 3 se debe añadir la clase .img-responsive a la imagen para que se
comporte de manera responsive. La imagen ocupará el ancho del contenedor. Si se quiere que la
imagen ocupe el 100% del ancho del navegador se debe colocar fuera de cualquier contenedor.
Este ejemplo muestra una imagen responsive que ocupa el ancho del navegador:
<img src="../img/foto1.jpg" class="img-responsive" width="100%">
El siguiente ejemplo muestra una imagen responsive que ocupa el ancho del contenedor:
<img src="../img/foto2.jpg" class="img-responsive" alt="Imagen responsive">
</div>
El siguiente ejemplo muestra una imagen centrada, de 400px de ancho, responsive:
<img src="../img/foto3.jpg" class="center-block img-responsive" width="400">
</div>
16.1. Formas de la imagen:

Bootstrap 3 provee tres clases que pueden ser usadas para aplicar formas a las imágenes:
Clase Descripción
.img-rounded Aplica esquinas redondeadas a la imagen.
.img-circle Aplica la forma de un círculo.
.img-thumbnail Muestra la imagen con un relleno blanco y un borde fino.
Ejemplo:
<img src="../img/foto1.jpg" class="img-rounded" width="350">
<img src="../img/foto2.jpg" class="img-circle" width="350">
<img src="../img/foto3.jpg" class="img-thumbnail" width="350">
</div>
Nota: La clase .img-rounded y la clase .img-circle no son soportadas por Internet Explorer 8.
16.2. Imágenes en miniatura (Thumbnails):

Gracias a la rejilla (grid) de Bootstrap 3 y a la clase .thumbnail del elemento <a>, resulta muy
sencillo crear galerías con “imágenes en miniatura” (en inglés, "thumbnails").
Un "thumbnails" es una imagen en miniatura que enlaza (link) con su versión en alta resolución.
Ejemplo:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../imagenes/foto.jpg" alt="Thumbnail">
</a>
</div>
...
</div>
-------- o --------
47
17. Objetos multimedia (Responsive embed):
Bootstrap ofrece clases que permiten a los navegadores mostrar vídeos o presentaciones de
diapositivas de manera responsive.
Ejemplo:


<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="../videos/video1.mp4"></iframe>
</div>


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="../videos/video2.mp4"></iframe>
</div>
Nota: La relación de aspecto (aspect radio) de una imagen describe la proporción entre su anchura y su
altura. Dos proporciones comunes son: 16:9 y 4:3.
17.1. Vídeos con HTML5:

La etiqueta <video> es un elemento introducido en la nueva especificación HTML5 para el
tratamiento y reproducción de vídeos o películas. Este elemento, remplaza parcialmente al elemento
<object>. Esta es concebida por sus creadores para convertirse en la nueva forma estándar para
mostrar vídeo en línea, pero se ha visto obstaculizada por la falta de acuerdo en cuanto a que los
formatos de vídeo deben ser compatibles con el elemento de vídeo.
Nota: Actualmente, existen tres formatos de vídeo soportados: mp4, WebM y Ogg.
Ejemplo:
<video src="mov.mp4" type="video/mp4" poster="foto.jpg" width="400" controls>

Lo sentimos, su navegador no posee soporte para el elemento video de html5.
</video>
<video src="../videos/movie1.mp4" width="400" autoplay controls>

Lo sentimos, tu navegador no posee soporte para el elemento video de html5.
</video>
17.2. Audio con HTML5:

HTML5 provee un estándar para ejecutar archivos de audio. Inserte contenido de audio en sus
documentos HTML mediante la etiqueta <audio>.
Nota: Actualmente, existen tres formatos de audio soportados: mp3, Wav y Ogg.
Ejemplo:
<audio src="intro.mp3" type="audio/mpeg" controls>

Your browser does not support the audio element.
</audio>
<audio src="../audio/musica.mp3" autoplay>

Your browser does not support the audio element.
</audio>
-------- o --------
48
18. Encabezado de página (Page header):
Clase Descripción
.page-header Use esta clase para agregar un estilo y espacio apropiado alrededor de los títulos de
una página.
Bootstrap define un componente "encabezado de página" que resulta muy útil en páginas de
sitios web como blogs, periódicos y revistas para que muestren de forma muy destacada el titular de la
página, con alguna otra información relacionada.
Normalmente, el contenido de este elemento, al que se aplica la clase .page-header, está
formado por un elemento <h1> y un elemento <small> asociado para la información secundaria, aunque
puede contener cualquier otro tipo de elemento. Ejemplo:
<div class="page-header">
<h1>Encabezado de página <small>con un texto secundario</small></h1>
</div>
<p>Este es un texto cualquiera.</p>
<p>Este es otro texto.</p>
-------- o --------
19. Jumbotron:
Clase Descripción
.jumbotron Use esta clase para mostrar contenido de forma muy destacada.
Este componente permite mostrar contenido de forma muy destacada. Si se encierra dentro de
un .container, solamente ocupará la anchura del contenedor y mostrará esquinas redondeadas.
Si no se encierra dentro de un elemento .container, ocupa toda la anchura del dispositivo.
Ejemplo:
<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>
-------- o --------
20. Wells (Pozos):

Clase Descripción
.well Aplica un efecto de tipo hundido (en inglés, "inset") al elemento.
Use esta clase para darle un efecto hundido, con esquinas redondeadas a un contenido.
Ejemplo:
<div class="well">Este texto usa la clase .well</div>
</div>
20.1. Tamaño de los Pozos (Wells):

Clase Descripción
.well-lg Aplica un tamaño grande al efecto de tipo hundido (well).
.well-sm Aplica un tamaño pequeño al efecto de tipo hundido (well).
Ejemplo:
<div class="well well-lg">Este texto usa la clase .well-lg.</div>
<div class="well">Este texto usa la clase .well (normal).</div>
<div class="well well-sm">Este texto usa la clase .well-sm.</div>
</div>
-------- o --------
49
21. Alertas (Alerts):
Clase base Descripción

.alert Esta clase define un mensaje de alerta (no se debe usar solo.
Clase modificador Descripción

.alert-success Aplica un color de “acción exitosa”.
.alert-info Aplica un color referente a una “información”.
.alert-warning Aplica un color que indica una advertencia o “requiere precaución” con esta acción.
.alert-danger Aplica un color de “acción peligrosa o de error”.
Este tipo de mensajes se utiliza normalmente para proporcionar al usuario información contextual
sobre el resultado de sus acciones.
La clase base .alert no define un estilo por defecto. Por eso es obligatorio acompañar esta
clase con uno de sus modificadores. El motivo es que en la práctica no tiene sentido mostrar un mensaje
de alerta neutro (por ejemplo, de color gris claro), ya que las alertas siempre son de algún tipo
(advertencia, error, éxito, información). Ejemplo:
<h2>Alertas</h2>
<div class="alert alert-success" role="alert">
<strong>Success!</strong> Los datos fueron gardados.
</div>
<div class="alert alert-info" role="alert">
<strong>Info!</strong> Esta es una información.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Está a punto de borrar toda la base de datos.
</div>
<div class="alert alert-danger" role="alert">
<strong>Danger!</strong> Error al conectar.
</div>
</div>
21.1. Alertas con botón de cierre:
Clase Descripción
.alert-dismissable Esta clase permite agregar un botón de cierre al mensaje de alerta.
Ejemplo (pulsa sobre la X de la derecha para cerrar el mensaje):
<div class="alert alert-warning alert-dismissable" role="alert">

<button type="button" class="close" data-dismiss="alert">×</button>
<strong>¡Cuidado!</strong> Es importante que leas este mensaje de alerta.
</div>
21.2. Alertas con efecto de atenuación:
Clase Descripción
.fade .in Agregue estas clases para un efecto animado al cerrar el mensaje de alerta.
Estas clases añaden un efecto de atenuación cuando se cierra (X) el mensaje de alerta.
Ejemplo (pulsa sobre la X de la derecha para cerrar el mensaje):
<div class="alert alert-success fade in" role="alert">

<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Acción correcta!</strong> Los datos se han guardado.
</div>
50
21.3. Alertas con enlace (link):
Clase Descripción
.alert-link Agregue esta clase al enlace (link) para adaptar su aspecto al mensaje de alerta.
Si el mensaje de la alerta contiene un enlace, es conveniente aplicarle la clase .alert-link

para que su aspecto se adapte al del resto del mensaje. Ejemplo:
<div class="alert alert-warning" role="alert">

<strong>¡Cuidado!</strong> Comuníquese con el
<a href="#" class="alert-link">Administrador</a>
</div>
-------- o --------
22. Paneles (Panels):

.panel Esta clase encierra un contenido en una caja (no se debe usar solo).
Clase modificador Descripción

.panel.default Aplica un relleno de color “default” (por defecto) a un panel.
.panel-primary Aplica un relleno de color “primary” (importante) a un panel.
.panel-success Aplica un relleno de color “success” (resultado exitoso) a un panel.
.panel-info Aplica un relleno de color “info” (nformación) a un panel.
.panel-warning Aplica un relleno de color “warning” (requiere atención) a un panel.
.panel-danger Aplica un relleno de color “danger” (acción negativa o peligrosa) a un panel.
Clase Descripción
.panel-body Esta clase define la sección de contenido de un panel.
Algunas veces usted puede requerir colocar su contenido en una caja para una mejor
presentación. En tal situación, el componente panel de Bootstrap puede ser muy útil.
La clase base .panel no define un estilo si se coloca sola. Por eso es obligatorio acompañar
esta clase con uno de sus modificadores para aplicar un borde de color a la caja.
Agregue la clase .panel-body para definir la sección de contenido del panel. Ejemplo:
<h2>Paneles básicos</h2>
<div class="panel panel-default">

<div class="panel-body">Panel básico "default"</div>
</div>
<div class="panel panel-primary">

<div class="panel-body">Panel básico "primary"</div>
</div>
<div class="panel panel-warning ">

<div class="panel-body">Panel básico "warning"</div>
</div>
</div>
51
22.1. Panel con título (heading):
Clase Descripción
.panel-heading Esta clase define una sección para un título.
Use la clase .panel-heading para agregar fácilmente una sección para colocar un título
encima de la sección de contenido .panel-body. Ejemplo:

<div class="panel-heading">Título del panel con estilo normal</div>
<div class="panel-body">
Contenido del panel
</div>
</div>
Clase en <h1>..<h6> Descripción

.panel-title Aplica un estilo predefinido a las etiquetas <h1>..<h6>.
Opcionalmente puede encerrar el título con cualquiera de las etiquetas <h1>..<h6> aplicándole
la clase .panel-title. Esta clase aplica un estilo predefinido por Bootstrap a las etiquetas
<h1>..<h6>. Sin embargo, el tamaño de la fuente será sobreescrito por .panel-heading.
Ejemplo:

<div class="panel-heading">
<h2 class="panel-title">Título del panel con estilo h2</h2>
</div>
Contenido del panel
</div>
</div>
22.2. Panel con pie (footer):

.panel-footer Esta clase define una sección para un pie o zona inferior (footer)..
Los paneles también pueden contener un pie o zona inferior donde incluir por ejemplo los botones
de acción o cualquier otro texto secundario. Estas zonas inferiores se utilizan con un estilo de color por
defecto .panel-default, debido a que no heredan los colores ni los estilos cuando se utilizan los
paneles contextuales (tal como .panel-primary).
Ejemplo:

Contenido del panel
</div>
<div class="panel-footer">Pie del panel</div>
</div>
52
22.3. Panel con tabla:
Puede incluir dentro de un panel cualquier tabla sin borde y con la clase .table. Sus contenidos
se adaptarán perfectamente al panel. Si además existe un elemento con la clase .panel-body, se
añade un borde extra en la parte superior de la tabla para mejorar su separación.
Su sintaxis es:


<div class="panel-heading">Título del panel</div>
Contenido del panel
</div>


...
</table>
</div>
Ejemplo:


<div class="panel-heading">Título del panel</div>
Contenido del panel
</div>


<table class="table table-hover">
<caption>Tabla básica</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ludwig</td>
<td>Beethoven</td>
</tr>
<tr>
<td>Wolfgang</td>
<td>Mozart</td>
</tr>
</tbody>
</table>
</div>
-------- o --------
53
23. Carrusel (Carousel plugin):
El carrusel (carousel plugin), también conocido como presentación de diapositivas (slideshow) o
deslizador de imágenes (slider), es una de las mejores maneras de mostrar gran cantidad de contenidos
dentro de un pequeño espacio en las páginas web. Es una presentación dinámica responsive de
contenidos donde las imágenes, vídeos y el texto se hacen visibles o accesibles al usuario de forma
cíclica.
El siguiente ejemplo le mostrará cómo construir un carrusel simple:
<div id="ejemplo" class="carousel slide" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#ejemplo" data-slide-to="0" class="active"></li>
<li data-target="#ejemplo" data-slide-to="1"></li>
<li data-target="#ejemplo" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">

<img src="../imagenes/foto1.jpg" alt="foto1">
<div class="carousel-caption">
<h3>Título 1</h3>
<p>Este es un subtítulo.</p>
</div>
</div>
<div class="item">
<h3>Título 2</h3>
</div>
</div>
<div class="item">
<h3>Título 3</h3>
</div>
</div>
</div>


<a class="left carousel-control" href="#ejemplo" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#ejemplo" role="button" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Nota: Internet Explorer 8 y 9 no soportan las propiedades CSS necesarias para esta animación.
-------- o --------
54
24. Modales (Modal plugin):
Los modales son, básicamente, un cuadro de diálogo que se utiliza para proporcionar información
importante al usuario o pedirle que tome las medidas necesarias antes de continuar. Estas ventanas
modales son ampliamente usadas para advertir a los usuarios de situaciones como el fin de sesión o para
recibir su confirmación final antes de realizar alguna acción crítica, tal como guardar o borrar datos
importantes.
Para activar un modal de Bootstrap (a través de los atributos de datos) se necesita básicamente
dos componentes: el elemento controlador o disparador (trigger) tal como un botón o un enlace; y el
elemento modal en sí.
El siguiente ejemplo activa el modal mediante un botón (trigger):
<h2>Ejemplo de Modal</h2>


<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#miModal-1">Abrir Modal</button>


<div class="modal fade" id="miModal-1" role="dialog">
<div class="modal-dialog">


<div class="modal-content">


<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title">Título del Modal</h4>
</div>


<div class="modal-body">
<p>Aquí va el texto del modal.</p>
<p class="text-danger"><small>Mensaje danger (opcional).</small></p>
</div>


<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Cerrar</button>
</div>
</div> 
</div> 

</div> 
</div> 
Nota: La clase .fade en el elemento .modal añade un efecto de animación mientras se muestra y
oculta la ventana modal. Si desea que el modal simplemente aparezca sin ningún efecto sólo elimine
esta clase.
55
El siguiente ejemplo muestra la forma de activar el modal mediante un enlace o link (trigger):
<h2>Ejemplo 2 de Modal</h2>


<a href="#miModal-2" class="btn btn-primary" data-toggle="modal">Abrir
Modal</a>


<div class="modal-dialog">
...
</div> 
24.1. Tamaño de los Modales (Modal):
Clase Descripción
.modal-lg Aplica un tamaño más largo que el normal a la ventana modal.
.modal-sm Aplica un tamaño más corto que el normal a la ventana modal.
Los modales tienen dos tamaños opcionales, disponibles a través de las clases modificadotas
colocadas junto a la clase .modal-dialog.
Ejemplo:
<h2>Ejemplo 3 de Modal</h2>


<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#miModal-3">Abrir Modal</button>


<div class="modal-dialog modal-lg">
...
</div> 
24.2. Activar Modal desde Javascript (jQuery):

Puede abrir un modal manualmente desde un script jQuery. Ejemplo:
<script type="text/javascript">
$(document).ready(function(){
$(function () {
$("#miModal-1").modal('show');
})
});
</script>
-------- o --------
56
25. Tooltips (Tooltip plugin):
Clase Descripción
.data-toggle="tooltip" Esta clase activa el tooltip.
.title Esta clase permite definir el texto del tooltip.
Los tooltips son pequeñas etiquetas emergentes que se muestran cuando el puntero del ratón se
posa durante unos instantes encima de un componente visual. Son muy prácticos para suministrar una
información adicional relacionada con este componente.
Los tooltips se usan generalmente sobre enlaces (links) o botones. Por defecto, el tooltip se
muestra en la parte superior.
El siguiente ejemplo muestra el uso de tooltip en un botón y en un enlace:
<h3>Ejemplo de Tooltip en un botón</h3>
<button type="button" class="btn btn-success" data-toggle="tooltip"
title="Soy un botón!">Botón</button>
<h3>Ejemplo de Tooltip en un enlace</h3>

<a href="#" data-toggle="tooltip" title="Pulse aquí!">Enlace</a>
</div>
El plugin tooltip no es solamente un plugin-css, tal como dropdown u otros plugins. El plugin
tooltip (así como el plugin popover) lo debe inicializar usted mismo.
Para utilizar este plugin debe activarlo usando jQuery (javascript). Para activar todos los tooltips
en su página sólo tiene que utilizar este script:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
</script>
25.1. Posicionar Tooltips:

Clase Descripción
.data-placement="top" Añada esta clase y este valor para disponer el tooltip arriba.
.data-placement="bottom" Añada esta clase y este valor para disponer el tooltip abajo.
.data-placement="left" Añada esta clase y este valor para disponer el tooltip a la izquierda.
.data-placement="right" Añada esta clase y este valor para disponer el tooltip a la derecha.
Ejemplo:
<h3>Ejemplo de posicionar Tooltip</h3>
<a href="#" data-toggle="tooltip" data-placement="top" title="Estoy
arriba!"> Enlace 1</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Estoy
abajo!"> Enlace 2</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Estoy a la
izquierda!"> Enlace 3</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Estoy a la
derecha!"> Enlace 4</a>
</div>
Nota: Los tooltips con títulos de longitud cero no se visualizarán.
-------- o --------
57
26. Popovers (Popover plugin):
Clase Descripción
.data-toggle="popover" Esta clase activa el popover.
.title Esta clase permite definir el título del popover.
.data-content Esta clase permite definir el contenido del popover.
Los popovers son pequeñas etiquetas emergentes similares a los tooltips que ofrecen
información más completa y extendida. Tienen un título y un contenido, parecido a los de los iPad.
Los popovers se pueden activar al pulsar en un botón o en un enlace, o al posar el puntero del
ratón encima de un componente visual (dependiendo de las clases modificadoras).
Los popovers se usan generalmente sobre enlaces (links) o botones. Por defecto, un popover se
muestra del lado derecho.
El siguiente ejemplo activa y desactiva un popover al pulsar sobre un botón o un enlace:
<h3>Ejemplo de Popover en un botón</h3>
<button type="button" class="btn btn-info" data-toggle="popover" title="Aquí
va el título!" data-content="Algún contenido del popover">Botón</button>
<h3>Ejemplo de Popover en un enlace</h3>

<a href="#" data-toggle="popover" title="Aquí va el título!" data-
content="Algún contenido del popover">Enlace</a>
</div>
El plugin popover no es solamente un plugin-css, tal como dropdown u otros plugins. El plugin
popover (así como el plugin tooltip) lo debe inicializar usted mismo.
Para utilizar este plugin debe activarlo usando jQuery (javascript). Para activar todos los
popovers en su página sólo tiene que utilizar este script:
$(function () {
$('[data-toggle="popover"]').popover()
})
});
</script>
26.1. Posicionar Popovers:

Clase Descripción
.data-placement="top" Añada esta clase y valor para disponer el popover arriba.
.data-placement="bottom" Añada esta clase y valor para disponer el popover abajo.
.data-placement="left" Añada esta clase y valor para disponer el popover a la izquierda.
.data-placement="right" Añada esta clase y valor para disponer el popover a la derecha.
Ejemplo:
<h3>Ejemplo de posicionar Popover</h3>
<a href="#" data-toggle="popover" data-placement="top" title="Título!" data-
content="Estoy arriba!"> Enlace 1</a>
<a href="#" data-toggle="popover" data-placement="bottom" title="Título!"
data-content="Estoy abajo!"> Enlace 2</a>
<a href="#" data-toggle="popover" data-placement="left" title="Título!"
data-content="Estoy a la izquierda!"> Enlace 3</a>
<a href="#" data-toggle="popover" data-placement="right" title="Yítulo!"
data-content="Estoy a la derecha!"> Enlace 4</a>
</div>
Nota: Los popovers con título o contenido de longitud cero no se visualizarán.
58
26.2. Cerrar Popover fuera del elemento:
Clase Descripción
.data-trigger="focus" Esta clase cierra el popover al pulsar fuera del elemento.
Por defecto, los popovers no se esconden hasta que haga clic nuevamente sobre el elemento
disparador (trigger) que lo activó. Se puede utilizar el disparador focus para ocultar un popover cuando el
usuario haga el siguiente clic fuera del elemento.
El siguiente ejemplo activa un popover al pulsar sobre un enlace y lo oculta con un clic fuera del
enlace:
<h3>Ejemplo de Popover que cierra fuera</h3>
<a href="#" data-toggle="popover" data-trigger="focus" title="Un título!"
data-content="Algún contenido del popover">Mi enlace</a>
</div>
26.3. Acivar Popover al posar el puntero:
Clase Descripción
.data-trigger="hover" Esta clase activa y oculta el popover posando el cursor sobre el elemento.
Si desea que el popover se active al mover el puntero del ratón sobre un elemento y ocultarlo al
retirarlo, use el atributo .data-trigger con el valor "hover". Ejemplo:
<h3>Ejemplo de Popover que cierra fuera</h3>
<a href="#" data-toggle="popover" data-trigger="hover" title="Un título!"
data-content="Algún contenido del popover">Mi enlace</a>
</div>
-------- o --------
27. Colapsables (Collapse plugin):
Clase Descripción
.data-toggle="collapse" Esta clase se coloca en el disparador (trigger): botón o enlace.
.data-target="#id" Esta clase va en el disparador y conecta con el elemento colapsable.
.collapse Esta clase define el elemento colapsable (que se muestra y oculta).
Elementos colapsables son útiles cuando se desea ocultar y mostrar gran cantidad de contenido.
El siguiente ejemplo define un enlace que funciona como disparador para mostrar/ocultar un
contenido colapsable (debajo):
<a href="#demo1" data-toggle="collapse">Enlace</a>
<div id="demo1" class="collapse">

<p>Este es un contenido colapsable...</p>
</div>
</div>
<p> Este contenido está fuera del colapsable.</p>
59
El siguiente ejemplo define un botón que funciona como disparador para mostrar/ocultar un
contenido colapsable (debajo):
<button data-toggle="collapse" data-target="#demo2">Botón</button>
<div id="demo2" class="collapse">

</div>
</div>
<p> Este contenido está fuera del colapsable.</p>
De manera predeterminada, el contenido colapsable se inicia oculto. Sin embargo, puede

agregar la clase .in para mostrar el contenido por defecto. Ejemplo:
<a href="#demo3" data-toggle="collapse">Enlace</a>

<div id="demo3" class="collapse in">
</div>
27.1. Panel Colapsable:
Clase Descripción
.panel-collapse .collapse Use estas dos clases juntas para definir un panel colapsable.
En el siguiente ejemplo se define colapsable tanto al cuerpo y como al pie de un panel:
<h2>Ejemplo de Panel colapsable</h2>
<div class="panel-group">
<h4 class="panel-title">
<a data-toggle="collapse" href="#demo4">Enlace</a>
</h4>
</div>
<div id="demo4" class="panel-collapse collapse">
<div class="panel-body">Cuerpo del panel</div>
<div class="panel-footer">Pie del panel</div>
</div>
</div>
</div>
</div>
60
27.2. Acordeón (Accordion):
El siguiente ejemplo muestra un sencillo acordeón mediante la ampliación del componente panel:
<h2>Ejemplo de Acordeón</h2>
<p><b>Note:</b> The <b>data-parent</b> attribute makes sure that all
collapsible elements under the specified parent will be closed when one of the
collapsible item is shown.</p>
<div class="panel-group" id="acordeon">
<a data-toggle="collapse" data-parent="#acordeon" href="#colapsa1">
Grupo Colapsable 1</a>
</h4>
</div>
<div id="colapsa1" class="panel-collapse collapse in">
<div class="panel-body">"Clama a mí, y yo te responderé, y te enseñaré
cosas grandes
y ocultas que tú no conoces". Jeremías 33:3</div>
</div>
</div>
</h4>
</div>
<div id="colapsa2" class="panel-collapse collapse">
<div class="panel-body">"Antes de que me llamen, yo les responderé;
antes de que terminen
de hablar, ya los habré escuchado". Isaías 65:24</div>
</div>
</div>
</h4>
</div>
<div id="colapsa3" class="panel-collapse collapse">
<div class="panel-body">"Si a alguno de ustedes le falta sabiduría,
que la pida a Dios,
y la recibirá, porque él la da a todos generosamente, sin exigir nada
en cambio." Santiago 1:5</div>
</div>
</div>
</div>
</div>
-------- o --------
Instructor: Vladimir Gude

Email: [email protected]
Barquisimeto - Estado Lara - Venezuela
Mayo - 2016
61

Guia Bootstrap Inces

Cargado por

Información del documentohacer clic para expandir la información del documento

Copyright:

Formatos disponibles

Guia Bootstrap Inces

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Bootstrap Inces

Cargado por

Copyright:

Formatos disponibles

INCES MILITAR

Barquisimeto – Estado Lara

Fase: Desarrollo Web

1.1. Origen de Bootstrap:

1.2. Características de Bootstrap:

Las características principales de Bootstrap se explican a continuación:

1.3. Descarga de Bootstrap:

1.4. ¿Cómo utilizar Bootstrap?:

1.5. Ejemplo de documento HTML usando Bootstrap:

2.1. Preparando la página:

2.1.1. El doctype de HTML5:

2.1.2. El móvil es lo más importante:

2.1.3. Imágenes responsive:

<img src="../img/foto.jpg" class="img-responsive" alt="Imagen responsive">

2.1.4. El contenedor (Containers):

Así funciona la rejilla de Bootstrap:

Al visualizar el ejemplo anterior en un dispositivo pequeño, las columnas se disponen

2.2.1. Prefijos de la clase (col-x-n):

Prefijo de la clase Descripción Tamaño

2.2.2. Definir ancho de una columna según el dispositivo:

2.2.3. Mover columnas a la derecha:

Prefijo de la clase Descripción Tamaño

2.2.3. Columnas anidadas:

3.1. Encabezado (Heading):

3.1.1. Subtítulos en línea (Inline Subheading):

<p>Este es un ejemplo de párrafo ...</p>

3.2.1. Párrafo destacado:

3.3. Formato (énfasis) a un texto:

<strong>Texto en negrita para destacarlo o enfatizarlo</strong> <br />

3.4. Alinear un texto:

3.5. Texto en color:

3.7. Mayúscula y minúscula:

3.8. Abreviaturas (Abbreviations):

<abbr title="Señora">Sra.</abbr> Josefina Pérez

3.8.1. Abreviaturas iniciales:

El <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

3.9. Direcciones (Addresses):

3.10. Citas (Blockquotes):

3.10.1. Cita nombrando la fuente:

3.10.2. Cita alineada a la derecha:

4.1. Tabla básica:

4.2. Tabla tipo cebra:

<table class="table table-striped">

4.3. Tabla con bordes:

<table class="table table-bordered">

<table class="table table-hover">

4.5. Tabla condensada:

<table class="table table-condensed">

4.6. Tabla con colores:

Nota: Disminuya el ancho del navegador para apreciar el “scroll horizontal”.

4.8. Tabla con varios estilos:

4.9. Fusionando filas y columnas:

5.1. Lista no ordenada (con viñetas):

<h4>Ejemplo de Lista no ordenada</h4>

5.2. Lista ordenada (con números):

<h4>Ejemplo de Lista ordenada</h4>