Bootstrap PDF

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO
Bootstrap 3 Tutorial
Bootstrap es el más popular de HTML, CSS y JavaScript marco para el desarrollo, móvil primeros sitios web sensibles.
Bootstrap es para descargar y utilizar completamente gratis.
¿Cuál es Bootstrap?
 Bootstrap es un marco frontal de extremo libre para el desarrollo web más rápido y más fácil
 Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formas, botones, tablas de
navegación, modales, carruseles de imágenes y muchas otras, así como complementos opcionales de JavaScript
 Bootstrap también le da la posibilidad de crear fácilmente diseños que responden
¿Cuál es al diseño web?
Diseño web adaptable es sobre la creación de sitios web que se ajustan automáticamente para quedar bien en todos los
dispositivos, desde teléfonos pequeños y grandes escritorios.
Historia de arranque
Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter, y lanzado como un producto de código abierto en
agosto de 2011 en GitHub.
En junio de 2014 fue el proyecto Bootstrap No.1 en GitHub!
ALDO OMAR MORALES CARLOS

¿Por qué utilizar Bootstrap?

Ventajas de Bootstrap:
 Fácil de usar: Cualquier persona con conocimientos simplemente básicos de HTML y CSS puede comenzar a usar
Bootstrap
 Características de respuesta: CSS sensible de Bootstrap ajusta a los teléfonos, tabletas y ordenadores de
sobremesa
 Mobile-primer acercamiento: En Bootstrap 3, estilos móviles primer forman parte del marco básico
 Compatibilidad del navegador: Bootstrap es compatible con todos los navegadores modernos (Chrome,
Firefox, Internet Explorer, Safari y Opera)
Dónde obtener Bootstrap?

Hay dos formas de iniciar el uso de rutina de carga en su propio sitio web.
Usted puede:
 Bootstrap descarga de getbootstrap.com

 Incluir Bootstrap de un CDN
descarga de Bootstrap
Si quiere descargar y anfitrión Bootstrap mismo, vaya a getbootstrap.com , y siga las instrucciones allí.

bootstrap CDN
Si no desea descargar y albergar Bootstrap a sí mismo, puede incluir desde un CDN (Content Delivery Network).
MaxCDN proporciona soporte para el CDN CSS y JavaScript de Bootstrap. También debe incluir jQuery:
MaxCDN:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Una de las ventajas de utilizar el Bootstrap CDN:

Muchos usuarios ya han descargado Bootstrap de MaxCDN se encuentra en otro sitio. Como resultado, se cargará desde
la memoria caché cuando visitan su sitio, lo que conduce a la descarga más rápida. Además, la mayoría de CDN se
asegurará de que una vez que un usuario solicita un archivo de ella, se sirve desde el servidor más cercano a ellos, que
también conduce a la descarga más rápida.
Crear la primera página web con Bootstrap

1. Agregar el tipo de documento HTML 5
Bootstrap utiliza elementos HTML y propiedades CSS que requieren el tipo de documento HTML 5.

Siempre incluya el tipo de documento HTML 5 al comienzo de la página, junto con el atributo lang y el juego de
caracteres correcto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 es móvil por primera
Bootstrap 3 está diseñado para ser sensible a los dispositivos móviles. -Mobile primeros estilos son parte del marco
básico.
Para garantizar la prestación adecuada y una función de zoom táctil, agregue la siguiente <meta>etiqueta en el interior
del<head>elemento:
<meta name="viewport" content="width=device-width, initial-scale=1">
La width=device-widthparte establece el ancho de la página para seguir la pantalla-anchura del dispositivo (que
variará dependiendo del dispositivo).
La initial-scale=1parte fija el nivel de zoom inicial cuando la página se carga por primera vez por el navegador.
3. Envases
Bootstrap requiere también un elemento contenedor para envolver los contenidos del sitio.
Hay dos clases de contenedores para elegir:

1. La .containerclase proporciona una sensible recipiente ancho fijo
2. La .container-fluidclase proporciona un contenedor de ancho total , que abarca toda la anchura de la
ventana gráfica
Nota: Los recipientes no son encajables (no se puede poner un recipiente dentro de otro contenedor).
Dos básico Bootstrap Páginas

El siguiente ejemplo muestra el código de una página básica Bootstrap (con un recipiente ancho fijo de respuesta):
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>
El siguiente ejemplo muestra el código de una página básica Bootstrap (con un recipiente ancho total):
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
</div>
</body>
</html>

Sistema de Red de arranque

sistema de red de arranque permite un máximo de 12 columnas en toda la página.
Si no desea utilizar las 12 columnas individualmente, puede agrupar las columnas juntos para crear columnas más
anchas:
lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1 lapso de 1
lapso de 4 lapso de 4 lapso de 4
lapso de 4 lapso de 8
lapso de 6 lapso de 6
lapso de 12
sistema de red de arranque es sensible, y las columnas se volverá a organizar de forma automática en función del
tamaño de la pantalla.
Las clases de cuadrícula

El sistema de red Bootstrap tiene cuatro clases:

 xs (para móviles)
 SM (para comprimidos)
 md (para equipos de sobremesa)
 lg (para equipos de sobremesa más grandes)
Las clases anteriores se pueden combinar para crear diseños más dinámica y flexible.
Estructura básica de una cuadrícula Bootstrap

La siguiente es una estructura básica de una red de Bootstrap:
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
Primero; crear una fila ( <div class="row">). A continuación, añadir el número deseado de columnas (etiquetas
apropiadas con.col-*-*clases). Tenga en cuenta que los números de .col-*-*siempre deben agregar hasta 12 para
cada fila.

A continuación hemos recopilado algunos ejemplos de diseños básicos de la red Bootstrap.
Tres columnas iguales
El siguiente ejemplo muestra cómo obtener unas tres columnas de igual anchura a partir de tabletas y escalada a las
grandes computadoras de escritorio. En los teléfonos móviles, las columnas se apilan automáticamente:
Ejemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
</div>
Dos columnas desiguales
El siguiente ejemplo muestra cómo obtener dos columnas diferentes de ancho a partir de las tabletas y escalar a
grandes equipos de sobremesa:

Ejemplo
<div class="row">
</div>
Bootstrap Texto / Tipografía

Ajustes por defecto de Bootstrap
predeterminado de tamaño de fuente mundial de arranque es 14px, con una línea de altura de 1.428.
Esto se aplica a los <body>y todos los párrafos.
Además, todos los <p>elementos tienen un margen inferior que es igual a la mitad de su line-height computarizada
(10px por defecto).
Bootstrap valores predeterminados del navegador vs.

En este capítulo, vamos a ver algunos elementos HTML que ser de estilo un poco diferente por Bootstrap que por
defecto del navegador.
<H1> - <h6>
De forma predeterminada, Bootstrap estilo de los títulos HTML ( <h1>a <h6>) de la siguiente manera:

Ejemplo
h1 Bootstrap heading (36px)

<Small>
En el código HTML Bootstrap <small>elemento se utiliza para crear un texto secundario del cigarrillo en cualquier
partida:

Ejemplo
h1 heading secondary text

<Marca>
Bootstrap estilo al HTML <mark>elemento de la siguiente manera:
Bootstrap estilo al HTML <mark>elemento de la siguiente manera:
Ejemplo
Use the mark element to highlight text.

<Abbr>
Bootstrap estilo al HTML <abbr>elemento de la siguiente manera:
Ejemplo
The WHO was founded in 1948.
<Blockquote>
Bootstrap estilo al HTML <blockquote>elemento de la siguiente manera:
Ejemplo
For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United
States and close to 5 million globally.
From WWF's website
Para mostrar la cotización a la derecha, utilice la .blockquote-reverseclase:
jemplo
For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United
States and close to 5 million globally.
From WWF's website

<Dl>
Bootstrap estilo al HTML <dl>elemento de la siguiente manera:
Ejemplo
Coffee
- black hot drink
Milk
- white cold drink
<Code>
Bootstrap estilo al HTML <code>elemento de la siguiente manera:
Ejemplo
The following HTML elements: span, section, and div defines a section in a document.
<Kbd>
Bootstrap estilo al HTML <kbd> elemento de la siguiente manera:
Ejemplo
Use ctrl + p to open the Print dialog box.

<Pre>
Bootstrap estilo al HTML <pre> elemento de la siguiente manera:
Ejemplo
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Colores contextuales y Fondos

Bootstrap también tiene algunas clases contextuales que pueden ser utilizados para proporcionar ", es decir a través de
colores".
Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .text-warning,
y .text-danger:
Ejemplo
This text is muted.
This text is important.

This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Las clases para los colores de fondo son: .bg-primary, .bg-success, bg-info, bg-warning, y .bg-danger:
Ejemplo
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Más clases de tipografía

Las clases Bootstrap a continuación se pueden añadir a los elementos HTML estilo adicionales:
Class Description Example
.lead Makes a paragraph stand out Try it

.small Indicates smaller text (set to 85% of the size of the parent) Try it
.text-left Indicates left-aligned text Try it
.text-center Indicates center-aligned text Try it
.text-right Indicates right-aligned text Try it
.text- Indicates justified text Try it

justify
.text-nowrap Indicates no wrap text Try it
.text- Indicates lowercased text Try it

lowercase

.text- Indicates uppercased text Try it

uppercase
.text- Indicates capitalized text Try it

capitalize
.initialism Displays the text inside an <abbr> element in a slightly smaller font size Try it
.list- Removes the default list-style and left margin on list items (works on both <ul>and <ol>). This Try it
unstyled class only applies to immediate children list items (to remove the default list-style from any nested
lists, apply this class to any nested lists as well)
.list-inline Places all list items on a single line Try it
.dl- Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like Try it
horizontal default <dl>s, but when the browser window expands, it will line up side-by-side

.pre- Makes a <pre> element scrollable

scrollable
bootstrap Tablas
Bootstrap tabla básico
Una tabla Bootstrap básica tiene un acolchado ligero y sólo divisores horizontales.
La .tableclase añade un estilo básico a una tabla:
Ejemplo

Las filas de rayas

La .table-striped clase añade cebra-raya a una tabla:
Ejemplo
Tabla bordeado
La .table-borderedclase añade fronteras en todos los lados de la mesa y las células:
Ejemplo

Las filas de la libración

La .table-hoverclase permite a un estado estacionario en filas de la tabla:
Ejemplo
Tabla condensada
La .table-condensedclase hace una tabla más compacta cortando el relleno de celda a la mitad:
Ejemplo

Las clases contextuales

Clases contextuales pueden ser usados para colorear filas de la tabla ( <tr>) o celdas de la tabla ( <td>):
Ejemplo
Las clases contextuales que se pueden utilizar son:

Tablas de respuesta
La .table-responsiveclase crea una tabla de respuesta. La tabla a continuación, desplazarse horizontalmente en
dispositivos pequeños (menos de 768px). Al ver en algo más grande que 768px de ancho, no hay diferencia:
Ejemplo
<div class="table-responsive">
<table class="table">
...
</table>
</div>
bootstrap Imágenes
Esquinas redondeadas
La .img-rounded clase añade esquinas redondeadas para una imagen (IE8 no es compatible con esquinas
redondeadas):

Ejemplo
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
Circulo
La .img-circle clase da forma a la imagen de un círculo (IE8 no es compatible con las esquinas redondeadas):
Ejemplo
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
Miniatura
La .img-thumbnailclase da forma a la imagen para una versión en miniatura:
Ejemplo
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

Imágenes de respuesta
Imágenes vienen en todos los tamaños. Lo mismo ocurre con las pantallas. Responsive imágenes se ajustan
automáticamente para adaptarse al tamaño de la pantalla.
Crear imágenes que responden mediante la adición de una .img-responsive clase a la <img> etiqueta. La imagen será
entonces escalar muy bien al elemento padre.
La .img-responsive clase se aplica display: block; y max-width: 100%; y height: auto; de la imagen:
Ejemplo
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Galería de imágenes
También puede utilizar el sistema de rejilla de Bootstrap en conjunto con la .thumbnailclase para crear una galería de
imágenes:
Ejemplo
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
</a>
</div>

<a href="moustiers-sainte-marie.jpg" class="thumbnail">
<p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" style="width:150px;height:150px">
</a>
</div>
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
<img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div>
Incrusta Responsive
También permiten vídeos o presentaciones de diapositivas escala correctamente en cualquier dispositivo.
Las clases pueden ser aplicados directamente a <iframe>, <embed>, <video> y <object> elementos.
El siguiente ejemplo crea un video de respuesta mediante la adición de una .embed-responsive-item clase a
una <iframe> etiqueta (el video a continuación, se escala muy bien al elemento padre). El conteniendo <div> define la
relación de aspecto del vídeo:
Ejemplo
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

¿Cuál es la relación de aspecto?
La relación de aspecto de una imagen se describe la relación proporcional entre su anchura y su altura. Dos relaciones
de aspecto de vídeo comunes son de 4: 3 (el formato de vídeo universal del siglo 20), y de 16: 9 (universal para la
televisión de alta definición y la televisión digital europea).
Se puede elegir entre dos clases de relación de aspecto:


</div>


</div>
Bootstrap pantalla gigante y el encabezado de página

Creación de una pantalla gigante
Una pantalla gigante indica una caja grande para llamar la atención adicional a algún contenido o información especial.
Una pantalla gigante se muestra como un cuadro gris con esquinas redondeadas. También aumenta el tamaño de
fuente del texto en su interior.

Consejo: Dentro de una pantalla gigante se puede poner casi cualquier HTML válido, incluyendo otros elementos
Bootstrap / classes.
Use un <div> elemento con la clase .jumbotron para crear una pantalla gigante:
Jumbotron el interior del envase

Coloque la pantalla gigante dentro del <div class="container">si desea que la pantalla gigante que se extiende al
borde de la pantalla:
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 another text.</p>
</div>
Jumbotron el exterior del envase

Coloque la pantalla gigante fuera del <div class="container">si desea que la pantalla gigante que se extiende a los
bordes de la pantalla:

Ejemplo
<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 another text.</p>
</div>
Creación de un encabezado
Un encabezado de la página es como un separador de sección.
La .page-headerclase añade una línea horizontal en el epígrafe (+ añade algo más de espacio alrededor del elemento):
Ejemplo Encabezado de página

Use un <div> elemento con la clase .page-header para crear un encabezado de página:
Ejemplo
<div class="page-header">
<h1>Example Page Header</h1>
</div>

bootstrap Wells
Wells
La .well clase añade un borde redondeado alrededor de un elemento con un color de fondo gris y algo de relleno:
Ejemplo
<div class="well">Basic Well</div>
Bueno Tamaño

Cambiar el tamaño del pozo mediante la adición de la .well-sm clase para pozos pequeños o .well-lgclase para
grandes pozos:
Ejemplo
<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>
bootstrap alertas
Alertas
Bootstrap proporciona una manera fácil de crear mensajes de alerta predefinidos:

Las alertas se crean con la .alert clase, seguida de una de las cuatro clases contextuales .alert-success, .alert-
info, .alert-warningo .alert-danger:
Ejemplo
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">

<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">

<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">

<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
Alertas de cierre
Para cerrar el mensaje de alerta, añadir class="close" y data-dismiss="alert" a un enlace o un elemento de
botón:

Ejemplo
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
El atributo aria- * y y tiempos; explicación
Para ayudar a mejorar la accesibilidad para las personas que utilizan lectores de pantalla, que debe incluir el aria-label
= "cierre" de atributos, al crear un botón de cierre.
& veces; (X) es una entidad HTML que es el icono preferido para los botones de cerrar, en lugar de la letra "x".
Alertas animados
El .fade y .in clases añade un efecto de atenuación cuando se cierra el mensaje de alerta:
Ejemplo
<div class="alert alert-success fade in">

bootstrap Botones
Estilos de botón
Bootstrap ofrece siete estilos de botones:
Para lograr los estilos de botones de arriba, Bootstrap tiene las siguientes clases:
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link
El siguiente ejemplo muestra el código para los diferentes estilos de botones:
Ejemplo
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Las clases botón se puede utilizar en una <a>, <button> o <input> elemento:
Ejemplo
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Tamaños de botón
Bootstrap ofrece cuatro tamaños de botón:
Las clases que definen los diferentes tamaños son:
 .btn-lg
 .btn-md
 .btn-sm
 .btn-xs
El siguiente ejemplo muestra el código para diferentes tamaños de botón:

Ejemplo
<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>
Bloquear Nivel Botones

Un botón de nivel de bloque se extiende por todo el ancho del elemento padre.
Botón 1botón 2
Agregar clase .btn-block para crear un botón de nivel de bloque:
Ejemplo
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Activo / Botones de movilidad

Un botón puede estar configurado para un activo (aparecerá presionado) o un estado inhabilitado (unclickable):

La clase .activehace un botón aparecerá presionado, y la clase .disabled hace un botón unclickable:
Ejemplo
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Bootstrap grupos de botones

grupos de botones
Bootstrap le permite agrupar una serie de botones a la vez (en una sola línea) en un grupo de botones:
Use un <div>elemento con la clase .btn-grouppara crear un grupo de botones:
Ejemplo
<div class="btn-group">
<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>
Consejo: En lugar de aplicar tamaños de botones para cada botón en un grupo, utilice la clase .btn-group-*de tamaño
de todos los botones en el grupo:

Ejemplo
<div class="btn-group btn-group-lg">
</div>
Verticales grupos de botones

Bootstrap también soporta grupos de botones verticales:
Utilice la clase .btn-group-verticalpara crear un grupo de botones verticales:
Ejemplo
<div class="btn-group-vertical">
</div>

Justificadas grupos de botones

Para abarcar todo el ancho de la pantalla, utilice la .btn-group-justified clase:
Ejemplo con <a>elementos:
Ejemplo
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Nota: Para <button> los elementos, debe envolver cada botón en una .btn-group clase:
Ejemplo
<div class="btn-group btn-group-justified">
</div>
</div>

</div>
</div>
Botón de anidación Grupos y menús desplegables
grupos de botones nido para crear menús desplegables:
Ejemplo
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>

Menús desplegables botón de división
Ejemplo
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
bootstrap Glyphicons
Glyphicons
Bootstrap ofrece 260 glyphicons de la Glyphicons conjunto medianos.
Glyphicons se pueden utilizar en el texto, botones, barras de herramientas, navegación, formas, etc.

Estos son algunos ejemplos de glyphicons:
sintaxis Glyphicon
Un glyphicon se introdujeron con la siguiente sintaxis:
<span class="glyphicon glyphicon-name"></span>
El nombre de participar en la sintaxis anterior debe ser reemplazado por el nombre propio de la glyphicon.
Ejemplo Glyphicon
El siguiente ejemplo muestra diferentes maneras de utilizar glyphicons:
Ejemplo
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">

<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
Bootstrap Placas y etiquetas

insignias
Insignias son indicadores numéricos de cuántos elementos están asociados con un enlace:
Los números (5, 10, y 2) son las insignias.
Utilice la .badgeclase dentro de <span>los elementos para crear insignias:

Ejemplo
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
Placas también se pueden usar dentro de otros elementos, tales como botones:
El siguiente ejemplo muestra cómo agregar insignias a los botones:
Ejemplo
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Etiquetas
Las etiquetas se utilizan para proporcionar información adicional acerca de algo:

Utilice la .labelclase, seguida de una de las seis clases contextuales .label-default, .label-primary, .label-
success,.label-info, .label-warningo .label-danger, dentro de un <span>elemento para crear una etiqueta:
Ejemplo
<h1>Example <span class="label label-default">New</span></h1>
El siguiente ejemplo muestra todas las clases de etiquetas contextuales:

Ejemplo
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
Bootstrap barras de progreso

Barra de progreso básicos
Una barra de progreso se puede utilizar para mostrar un usuario qué tan avanzado que él / ella está en un proceso.
Bootstrap ofrece varios tipos de barras de progreso.
Una barra de progreso defecto en Bootstrap se ve así:
Para crear una barra de progreso por defecto, añadir una .progressclase a un <div>elemento:
Ejemplo
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">

<span class="sr-only">70% Complete</span>
</div>
</div>
Nota: Las barras de progreso no son compatibles con Internet Explorer 9 y versiones anteriores (ya que utilizan las
transiciones y animaciones CSS3 para alcanzar algunos de sus efectos). Nota: Para ayudar a mejorar la accesibilidad
para las personas que utilizan lectores de pantalla, se deben incluir los atributos aria- *.
Barra de progreso con etiqueta

Una barra de progreso con una etiqueta que tiene el siguiente aspecto:
Retire la .sr-only clase de la barra de progreso para mostrar un porcentaje visible:
Ejemplo
<div class="progress-bar" role="progressbar" aria-valuenow="70"
70%
</div>
</div>
Barras de color de progreso

clases contextuales se utilizan para proporcionar ", es decir a través de colores".

Las clases contextuales que pueden utilizarse con barras de progreso son:
 .progress-bar-success
 .progress-bar-info
 .progress-bar-warning
 .progress-bar-danger
El siguiente ejemplo muestra cómo crear barras de progreso con las diferentes clases de contexto:
Ejemplo
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
40% Complete (success)
</div>
</div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"

50% Complete (info)
</div>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
60% Complete (warning)
</div>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
70% Complete (danger)
</div>
</div>
Barras de progreso rayado

Las barras de progreso también puede ser rayado:

Agregar clase .progress-bar-stripedpara agregar rayas de las barras de progreso:
Ejemplo
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
50% Complete (info)
</div>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
60% Complete (warning)
</div>
</div>
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
70% Complete (danger)

</div>
</div>
Animada barra de progreso

Aquí es una "animada" barra de progreso:
Agregar clase .activepara animar la barra de progreso:
Ejemplo
<div class="progress-bar progress-bar-striped active" role="progressbar"
40%
</div>
</div>
Barras de progreso apiladas

Las barras de progreso también se pueden apilar:
Crear una barra de progreso apilados mediante la colocación de varios bares en la misma <div class="progress">:

Ejemplo
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
bootstrap paginación
básica paginación
Si usted tiene un sitio web con un montón de páginas, es posible que desee agregar algún tipo de paginación para cada
página.
Un básico en la paginación Bootstrap se ve así:
Para crear una paginación de base, agregar la .paginationclase a un <ul>elemento:

Ejemplo
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Estado activo
El estado activo muestra lo que es la página actual:
Agregar la clase .activea que el usuario sepa qué página que él / ella está en:
Ejemplo
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

Estado discapacitados
Un enlace desactivado, no se puede hacer clic:
Añadir clase .disabledsi un enlace por alguna razón no está habilitado:
Ejemplo
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Dimensionamiento de paginación
bloques de paginación también pueden ser de un tamaño a un tamaño más grande o un tamaño más pequeño:
Agregar clase .pagination-lgpara los bloques más grandes o .pagination-smpara los bloques más pequeños:

Ejemplo
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul class="pagination pagination-sm">

<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Migas de pan
Otra forma de paginación, es el pan rallado:
La .breadcrumbclase indica la ubicación de la página actual dentro de una jerarquía de navegación:

Ejemplo
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
bootstrap Pager
¿Cuál es Pager?
Pager es también una forma de paginación (como se describe en el capítulo anterior).
Localizador proporciona botones anterior y siguiente (links).
Para crear botones anterior / siguiente, agregar la .pagerclase a un <ul>elemento:
Ejemplo
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>

Resultado:
alinear Botones
Usa los .previousy las .nextclases para alinear cada botón para las caras de la página:
Ejemplo
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
Resultado:
Bootstrap Grupos Lista

Grupos lista básica
El grupo de la lista más básica es una lista desordenada con elementos de la lista:

Para crear un grupo de la lista básica, utilizar un <ul> elemento con la clase .list-group, y <li>los elementos con la
clase .list-group-item:
Ejemplo
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Grupo lista con las insignias

También se pueden añadir emblemas a un grupo de la lista. Las insignias serán automáticamente colocados a la
derecha:

Para crear una tarjeta de identificación, crear un <span>elemento con la clase .badge en el interior del elemento de la
lista:
Ejemplo
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Lista de grupos vinculados con los Artículos

Los elementos de un grupo lista también pueden ser hipervínculos. Esto añade un color de fondo gris en vuelo
estacionario:

Para crear un grupo de la lista con los elementos vinculados, utilice <div>en lugar de <ul> y <a>en lugar de <li>:
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Estado activo
Utilice la .activeclase para resaltar el elemento actual:

Ejemplo
<a href="#" class="list-group-item active">First item</a>
</div>
artículo discapacitados
El grupo siguiente lista tiene un elemento deshabilitado:
Para desactivar un elemento, agregue la .disabledclase:
Ejemplo
<a href="#" class="list-group-item disabled">First item</a>
</div>

Las clases contextuales

clases contextuales se pueden utilizar para elementos de la lista de los colores:
Las clases para colorear list-elementos son: .list-group-item-success, list-group-item-info, list-group-item-

warning, y.list-group-item-danger:
Ejemplo
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Contenido personalizado
Usted puede agregar casi cualquier elemento HTML dentro de una lista de grupos.

Bootstrap proporciona las clases .list-group-item-headingy .list-group-item-textque se puede utilizar como
sigue:
Ejemplo
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
</a>
</div>
bootstrap Paneles
paneles
Un panel de arranque es una caja con borde con un poco de relleno alrededor de su contenido:

Los paneles se crean con la .panelclase, y el contenido dentro del panel tiene una .panel-bodyclase:
Ejemplo
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
La .panel-defaultclase se utiliza para estilizar el color del panel. Ver el último ejemplo en esta página para las clases
más contextuales.
La partida del panel
La .panel-headingclase añade un encabezado para el panel:
Ejemplo
<div class="panel-heading">Panel Heading</div>

<div class="panel-body">Panel Content</div>
</div>
Panel de pie de página
La .panel-footerclase añade un pie de página en el panel:
Ejemplo
<div class="panel-footer">Panel Footer</div>
</div>
grupo de paneles
Para agrupar muchos paneles entre sí, envuelven una <div>con la clase .panel-groupque les rodea.
La .panel-groupclase despeja la parte inferior del margen de cada panel:

Ejemplo
<div class="panel-group">
</div>
</div>
</div>
Los paneles con las clases contextuales

Para colorear el panel, utilice clases contextuales ( .panel-default, .panel-primary, .panel-success, .panel-
info, .panel-warning, o .panel-danger):
Ejemplo


bootstrap Dropdowns
desplegable básico
Un menú desplegable es un menú conmutable que permite al usuario elegir un valor de una lista predefinida:
Ejemplo
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
ejemplo Explicación
La .dropdownclase consiste en un menú desplegable.
Para abrir el menú desplegable, utilice un botón o un enlace con una clase de .dropdown-toggley el data-
toggle="dropdown"atributo.

La .caretclase crea un icono de cursor de flecha (), Que indica que el botón es un menú desplegable.
Añadir la .dropdown-menuclase a un <ul>elemento para realmente crear el menú desplegable.
Divisor desplegable
La .dividerclase se utiliza para enlaces separados dentro del menú desplegable con un borde horizontal delgada:
Ejemplo
<li class="divider"></li>
Cabecera desplegable
La .dropdown-headerclase se utiliza para agregar encabezados dentro del menú desplegable:
Ejemplo
<li class="dropdown-header">Dropdown header 1</li>
Desactivar un elemento
Para desactivar un elemento en el menú desplegable, utilice la .disabledclase:

Ejemplo
<li class="disabled"><a href="#">CSS</a></li>
Posición desplegable
Para alinear el botón derecho del desplegable, agregue la .dropdown-menu-rightclase de elemento con .dropdown-
menú:
Ejemplo
<ul class="dropdown-menu dropdown-menu-right">
Caer hasta
Si desea que el menú desplegable para expandir hacia arriba en vez de hacia abajo, cambie el elemento <div> con
class = "desplegable" a "dropup":
Ejemplo
<div class="dropup">

Accesibilidad desplegable
Para ayudar a mejorar la accesibilidad para las personas que utilizan lectores de pantalla, que debe incluir los
siguientes roley aria-*atributos, al crear un menú desplegable:
Ejemplo
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
bootstrap Cerrar
básica plegable
Botes hinchables son útiles cuando se desea ocultar y mostrar gran cantidad de contenido:

Ejemplo
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">

Lorem ipsum dolor text....
</div>
La .collapseclase indica un elemento plegable (un <div> en nuestro ejemplo); este es el contenido que se muestra o
se oculta con un clic de un botón.
Para el control (mostrar / ocultar) el contenido plegable, añadir el data-toggle="collapse"atributo a un <a> o un

<button>. A continuación, añadir el data-target="#id"atributo para conectar el botón con el contenido plegable (<div
id = "demo">).
Nota: Para los elementos <a>, se puede utilizar el hrefatributo en lugar del data-target atributo:
Ejemplo
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">

</div>
De manera predeterminada, el contenido es plegable oculto. Sin embargo, se puede agregar la .inclase para mostrar el
contenido de forma predeterminada:

Ejemplo
<div id="demo" class="collapse in">
</div>
panel que puede contraerse
El siguiente ejemplo muestra un panel desplegable:
Ejemplo
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>

<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Colapsable Grupo Lista
A continuación se muestra un panel plegable con un grupo dentro de la lista:
Ejemplo
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>

</div>
</div>
Acordeón
El siguiente ejemplo muestra un acordeón sencilla mediante la ampliación del componente de panel.
Nota: Utilice el data-parentatributo para asegurarse de que todos los elementos plegables bajo la matriz especificada
se cerrarán cuando se muestra uno de los elementos plegables.
Ejemplo
<div class="panel-group" id="accordion">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>

</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</h4>
</div>
</div>
</div>
</h4>
</div>

</div>
</div>
</div>
Bootstrap aquí y píldoras

menús
La mayoría de las páginas web tienen algún tipo de un menú.
En HTML, un menú se define a menudo en una lista desordenada <ul>(y peinado después), así:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
</ul>
Si desea crear un menú horizontal de la lista anterior, agregue la .list-inline clase a <ul>:
O bien, puede mostrar el menú anterior con pestañas y pastillas (véase más adelante) Bootstraps '.

Nota: Véase el último ejemplo de esta página para encontrar la manera de hacer las pestañas y las píldoras
conmutable / dinámico.
Pestañas
Las fichas se crean con <ul class="nav nav-tabs">:
Consejo: También marque la página actual con <li class="active">.
El siguiente ejemplo crea pestañas de navegación:
Ejemplo
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
</ul>
Las fichas con menú desplegable
Pestañas también pueden contener menús desplegables.

El siguiente ejemplo añade un menú desplegable a "Menú 1":
Ejemplo
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<li><a href="#">Submenu 1-1</a></li>
</ul>
</li>
</ul>
píldoras
Las píldoras se crean con <ul class="nav nav-pills">. También marque la página actual con <li class="active">:

Ejemplo
<ul class="nav nav-pills">
</ul>
Pastillas verticales
Píldoras también se pueden visualizar verticalmente. Sólo tiene que añadir la .nav-stackedclase:
Ejemplo
<ul class="nav nav-pills nav-stacked">
</ul>

Pastillas verticales en una fila
En el siguiente ejemplo, se coloca el menú píldora verticales dentro de la última columna. Así, en una gran pantalla el
menú se mostrará a la derecha. Pero en una pequeña pantalla, el contenido se ajustará automáticamente en un diseño
de una sola columna:
Ejemplo
</ul>
</div>

Píldoras Con menú desplegable
Píldoras también pueden contener menús desplegables.
El siguiente ejemplo añade un menú desplegable a "Menú 1":
Ejemplo
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
</ul>
</li>

</ul>
Aquí y píldoras centradas
Para el centro / justificar las pestañas y las píldoras, utilice la .nav-justifiedclase.
Tenga en cuenta que en las pantallas más pequeñas que 768px, los elementos de la lista se apilan (contenido
permanecerá centrado):
Ejemplo

<ul class="nav nav-tabs nav-justified">
</ul>


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

Conmutable / Dynamic aquí
Para hacer el conmutable pestañas, añadir el data-toggle="tab"atributo para cada enlace. A continuación, agregue
una .tab-paneclase con un identificador único para cada pestaña y se envuelven dentro de un <div>elemento con la
clase .tab-content.
Si desea que las pestañas para aparecen y desaparecen al hacer clic sobre ellos, agregar la .fadeclase a .tab-pane:
Ejemplo
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>

<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<h3>Menu 2</h3>
</div>
</div>
Pastillas conmutable / dinámicos

El mismo código se aplica a las pastillas; Sólo cambiar el atributo de conmutación de datos para data-toggle="pill":
Ejemplo
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<h3>Menu 1</h3>

</div>
<h3>Menu 2</h3>
</div>
</div>
Bootstrap barra de navegación

Barras de navegación
Una barra de navegación es una cabecera de navegación que se coloca en la parte superior de la página:
Con Bootstrap, una barra de navegación se puede extender o contraer, dependiendo del tamaño de la pantalla.
Una barra de navegación estándar se crea con <nav class="navbar navbar-default">.
El siguiente ejemplo muestra cómo agregar una barra de navegación en la parte superior de la página:
Ejemplo
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">

<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Page 1</a></li>
</ul>
</div>
</nav>
...
Todos los ejemplos en esta página se mostrará una barra de navegación que ocupa demasiado espacio en pantallas
pequeñas (sin embargo, la barra de navegación estará en una sola línea en las pantallas grandes - porque es sensible
Bootstrap). Este problema (con las pequeñas pantallas) será resuelto en el último ejemplo de esta página.
Invertida barra de navegación

Si no te gusta el estilo de la barra de navegación por defecto, Bootstrap ofrece una alternativa, negro barra de
navegación:
Sólo cambia la .navbar-defaultclase en .navbar-inverse:
Ejemplo
<nav class="navbar navbar-inverse">

</div>
</ul>
</div>
</nav>
Fijo barra de navegación

La barra de navegación también puede ser fijado en la parte superior o en la parte inferior de la página.
Una barra de navegación fijo permanece visible en una posición fija (superior o inferior) independiente de la página de
desplazamiento.
La .navbar-fixed-topclase hace que la barra de navegación fijo en la parte superior:
Ejemplo
<nav class="navbar navbar-inverse navbar-fixed-top">
</div>

</ul>
</div>
</nav>
La .navbar-fixed-bottomclase hace que la estancia barra de navegación en la parte inferior:
Ejemplo
<nav class="navbar navbar-inverse navbar-fixed-bottom">
</div>
</ul>
</div>
</nav>
Con la barra de navegación desplegable

Las barras de navegación también pueden contener menús desplegables.
El siguiente ejemplo añade un menú desplegable para el botón de "Página 1":
Ejemplo
</div>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<li><a href="#">Page 1-1</a></li>
</ul>
</li>
</ul>
</div>
</nav>

Alineado a la derecha Barra de navegación
La .navbar-rightclase se utiliza para alineación derecha botones de la barra de navegación.
En el siguiente ejemplo insertamos un botón "Registrarse" y un botón de "Inicio de sesión" a la derecha en la barra de
navegación.También añadimos un glyphicon en cada uno de los dos nuevos botones:
Ejemplo
</div>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>

El colapso de la barra de navegación

La barra de navegación ocupa demasiado espacio en una pequeña pantalla.
Debemos ocultar la barra de navegación; y mostrar sólo cuando se necesita.
En el siguiente ejemplo la barra de navegación se sustituye por un botón en la esquina superior derecha. Sólo cuando
se hace clic en el botón, se mostrará la barra de navegación:
Ejemplo
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</ul>

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
</ul>
</div>
</div>
</nav>
bootstrap Formas
Ajustes por defecto de Bootstrap
Los controles de formulario automáticamente reciben algo más de estilo global con Bootstrap:
Todos los textos de <input>, <textarea>y <select>los elementos con class .form-controltiene una anchura de
100%.
Diseño del formulario Bootstrap

Bootstrap ofrece tres tipos de diseño del formulario:
 forma vertical (esto es por defecto)

 forma horizontal
 formulario en línea
Disposiciones de referencia para los tres diseños de formulario:

 Envolver las etiquetas y los controles de formulario en <div class="form-group"> (necesaria para la separación
óptima)
 Agregar la clase .form-controla todos textual <input>, <textarea>y <select>los elementos
Bootstrap Forma Vertical (predeterminado)
En el siguiente ejemplo se crea una forma vertical con dos campos de entrada, una casilla de verificación, y un botón de
envío:
Ejemplo
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>

<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Formulario en línea de arranque
En una forma en línea, todos los elementos están en línea, alineado a la izquierda, y las etiquetas son al lado.
Nota: Esto sólo se aplica a las formas en las ventanas gráficas que son al menos 768px de ancho!
regla adicional para un formulario en línea:
 Agregar la clase .form-inlinea la <form>elemento
El siguiente ejemplo crea un formulario en línea con dos campos de entrada, una casilla de verificación, y un botón de
confirmación:
Ejemplo
<form class="form-inline">
<label for="email">Email address:</label>

</div>
</div>
</div>
</form>
Consejo: Si no se incluye una etiqueta para cada entrada, los lectores de pantalla tendrán problemas con sus
formas. Puede ocultar las etiquetas de todos los dispositivos, excepto los lectores de pantalla, mediante el uso de
la .sr-onlyclase:
Ejemplo
<label class="sr-only" for="email">Email address:</label>
</div>
<label class="sr-only" for="pwd">Password:</label>
</div>
</div>

</form>
Bootstrap Forma Horizontal
Una forma horizontal se distingue de las otras formas tanto en la cantidad de margen de beneficio, y en la presentación
del formulario.
Normas adicionales para una forma horizontal:
 Agregar la clase .form-horizontala la <form>elemento

 Agregar la clase .control-labela todos los <label> elementos
Consejo: clases de cuadrícula predefinidos de uso de archivos de inicio para alinear las etiquetas y los grupos de
controles de formulario en una disposición horizontal.
En el siguiente ejemplo se crea una forma horizontal con dos campos de entrada, una casilla de verificación, y un botón
de confirmación:

Ejemplo
<form class="form-horizontal">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</form>

Bootstrap entradas de formulario

Controles de formulario compatibles
Bootstrap es compatible con los controles de formulario:
 entrada
 área de texto
 caja
 radio
 seleccionar
entrada bootstrap
Bootstrap es compatible con todos los tipos de HTML5 de entrada: texto, contraseña, fecha y hora, fecha y hora local,
fecha, mes, hora, semana, número, correo electrónico, URL, búsqueda, tel, y color.
Nota: Las entradas no será totalmente decoradas si el tipo no se declara correctamente!

El siguiente ejemplo contiene dos elementos de entrada; uno de tipo texto y uno de contraseña:
Ejemplo
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div>
Área de texto bootstrap
El siguiente ejemplo contiene un área de texto:
Ejemplo
<label for="comment">Comment:</label>

<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Las casillas de verificación de arranque
Las casillas de verificación se utilizan si desea que el usuario seleccionar cualquier número de opciones de una lista de
opciones predefinidas.
El siguiente ejemplo contiene tres casillas de verificación. La última opción está desactivada:
Ejemplo
<label><input type="checkbox" value="">Option 1</label>
</div>
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Utilice la .checkbox-inlineclase si desea que las casillas de verificación para que aparezca en la misma línea:

Ejemplo
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
Los botones de opción de arranque
Los botones de radio se utilizan si desea limitar al usuario sólo una selección de una lista de opciones predefinidas.
El siguiente ejemplo contiene tres botones de radio. La última opción está desactivada:
Ejemplo
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Utilice la .radio-inlineclase si desea que los botones de selección para aparecer en la misma línea:

Ejemplo
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
Seleccione Lista de arranque
Listas de selección se utilizan si desea permitir al usuario elegir entre varias opciones.
El ejemplo siguiente contiene una lista desplegable (lista de selección):
Ejemplo
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">

<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Bootstrap Forma Entradas (más)

static control
Si es necesario insertar texto plano al lado de una etiqueta de formulario dentro de una forma horizontal, utilice
la .form-control-staticclase en un <p>elemento:
Ejemplo
<label class="control-label col-sm-2" for="email">Email:</label>
<p class="form-control-static">someone@example.com</p>
</div>
</div>
</form>

Formulario de Control de arrancar Unidos

 ENTRADA FOCUS - El contorno de la entrada se elimina y una caja de sombra se aplica en el enfoque
 ENTRADAS CON DISCAPACIDAD - Añadir un disabledatributo para desactivar un campo de entrada
 Fieldsets DISCAPACIDAD - Añadir un disabledatributo a un conjunto de campos para desactivar todos los
controles al
 ENTRADAS READONLY - Añadir un readonlyatributo a una entrada para impedir la entrada del usuario
 VALIDACIÓN UNIDOS - Bootstrap incluye estilos de validación para los mensajes de error, de advertencia y de
éxito. Para utilizar, añadir .has-warning, .has-erroro .has-successal elemento padre
 ICONOS - Usted puede agregar íconos de respuesta con la .has-feedbackclase y un icono
 ETIQUETAS OCULTOS - Añadir una .sr-onlyclase en las etiquetas no visibles
El siguiente ejemplo demuestra algunos de los estados de control de formulario anterior en una forma horizontal :
Ejemplo
<label class="col-sm-2 control-label">Focused</label>
<input class="form-control" id="focusedInput" type="text" value="Click to focus">
</div>
</div>
<label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
<input class="form-control" id="disabledInput" type="text" disabled>

</div>
</div>
<fieldset disabled>
<label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">
Input with success and icon</label>
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-2 control-label" for="inputWarning">
Input with warning and icon</label>

<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">
Input with error and icon</label>
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
Y aquí es un ejemplo de algunos de los estados de control de formulario en un formulario en línea:
Ejemplo
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<label for="inputPassword">Disabled</label>
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">

<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
Bootstrap entrada Dimensionamiento

Dimensionamiento de entrada en las formas
Establecer las alturas de los elementos de entrada utilizando como clases .input-lgy .input-sm.
Establecer las anchuras de los elementos que utilizan clases de columna de cuadrícula como .col-lg-*y .col-sm-*.

Altura Dimensionamiento
Los siguientes ejemplos muestran los elementos de entrada con diferentes alturas:
Ejemplo
<form>
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
<label for="inputsm">input-sm</label>
<input class="form-control input-sm" id="inputsm" type="text">

</div>
</form>
Usted puede rápidamente etiquetas de tamaño y controles de formulario dentro de una forma horizontal mediante la
adición .form-group-*al <div class="form-group">elemento:
Ejemplo
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="lg">form-group-lg</label>
<input class="form-control" type="text" id="lg">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="sm">form-group-sm</label>
<input class="form-control" type="text" id="sm">
</div>
</div>
</form>
columna de exclusión molecular

Los siguientes ejemplos muestran los elementos de entrada con diferentes anchuras utilizando diferentes .col-xs-*
clases:
Ejemplo
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
</div>
texto de ayuda
Utilice la .help-block clase para agregar un nivel de texto de ayuda en el bloque formas:
Ejemplo
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
<span class="help-block">This is some help text...</span>
</div>

Bootstrap carrusel Plugin

El carrusel Plugin
El plug-in del carrusel es un componente para el ciclismo a través de elementos, como un carrusel (diapositivas).
Tip: Los complementos pueden ser incluidos de forma individual (usando "carousel.js" de rutina de carga de archivos
individuales), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js").

Ejemplo carrusel

Nota: Los carruseles no son compatibles correctamente en Internet Explorer 9 y versiones anteriores (ya que utilizan
las transiciones y animaciones CSS3 para lograr el efecto de diapositivas).
Cómo crear un carrusel

El siguiente ejemplo muestra cómo crear un carrusel básica:
Ejemplo
<div id="myCarousel" class="carousel slide" data-ride="carousel">

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


<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">

<img src="img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>


<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
La más externa <div>:
Carruseles requieren el uso de un ID (en este caso id="myCarousel") para los controles de carrusel para funcionar
correctamente.
El class="carousel" especifica que este <div>contiene un carrusel.
La .slide clase añade un efecto de transición CSS y animación, lo que hace que los objetos se deslicen al mostrar un
nuevo elemento. Omite esta clase si no desea este efecto.

El data-ride="carousel" atributo dice Bootstrap para comenzar la animación del carrusel inmediatamente cuando se
carga la página.
El "Indicadores" parte:
Los indicadores son los pequeños puntos en la parte inferior de cada diapositiva (que indica el número de diapositivas
que hay en el carrusel, y que se deslizan el usuario está viendo actualmente).
Los indicadores se especifican en una lista ordenada con la clase .carousel-indicators.
El data-targetatributo apunta a la identificación del carrusel.
El data-slide-toatributo especifica que se deslizan para ir a, al hacer clic sobre el punto específico.
El "Envoltura para las diapositivas" parte:
Los portaobjetos se especifican en una <div>con la clase .carousel-inner.
El contenido de cada diapositiva se define en una <div>con la clase .item. Esto puede ser texto o imágenes.
La .activeclase tiene que ser añadido a una de las diapositivas. De lo contrario, el carrusel no será visible.
La parte "controles izquierdo y derecho":
Este código agrega botones "correctas" que permite al usuario ir y venir entre las diapositivas de forma manual
"izquierda" y.
El data-slideatributo acepta las palabras clave "prev"o "next", lo que altera la posición de la corredera en relación a
su posición actual.

Añadir títulos a las diapositivas

Añadir <div class="carousel-caption">dentro de cada uno <div class="item">para crear un título para cada
diapositiva:
Ejemplo

</ol>

<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">

<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>

</a>

</a>
</div>
Bootstrap modal Plugin

El modal Plugin
El plug-in Modal es una ventana de cuadro de diálogo / emergente que aparece en la parte superior de la página actual:
Tip: Los complementos pueden ser incluidos de forma individual (usando "modal.js" de rutina de carga de archivos
Cómo crear un modal

El siguiente ejemplo muestra cómo crear un referente básico:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
El "Trigger" parte:
Para activar la ventana modal, es necesario utilizar un botón o un enlace.
A continuación, incluir los dos atributos Data- *:
 data-toggle="modal" se abre la ventana modal

 data-target="#myModal" apunta a la identificación de la modal
El "modal" parte:

El padre <div>de la modal debe tener un ID que es el mismo que el valor del atributo de destino de los datos utilizados
para activar la modal ( "myModal").
La .modalclase identifica el contenido de <div>como modal y trae enfoque a la misma.
La .fadeclase añade un efecto de transición que se desvanece el referente dentro y fuera. Eliminar a esta clase si no
desea este efecto.
El atributo role="dialog"mejora la accesibilidad para las personas que utilizan lectores de pantalla.
La .modal-dialogclase define la anchura apropiada y el margen de la modal.
El "contenido modal" parte:
El <div>con class="modal-content" estilos modal (borde, color de fondo, etc.). Dentro de esta <div>, añadir el modal
de encabezado, cuerpo y pie de página.
La .modal-header clase se utiliza para definir el estilo de la cabecera de la modal. El <button> interior de la cabecera
tiene un data-dismiss="modal" atributo que cierra el modal si hace clic en él. La .closeclase estilos El botón de
cierre, y los .modal-title estilos de clase de la cabecera con una línea de altura adecuada.
La .modal-body clase se utiliza para definir el estilo para el cuerpo de la modal. Añadir cualquier tipo de código HTML
aquí; párrafos, imágenes, vídeos, etc.
La .modal-footer clase se utiliza para definir el estilo del pie de página de la modal. Tenga en cuenta que esta zona
está alineado a la derecha de forma predeterminada.

Tamaño modal
Cambiar el tamaño de la modal mediante la adición de la .modal-sm clase de los pequeños modales o .modal-lg la
clase de grandes modales.
Agregue la clase de tamaño al <div> elemento con la clase .modal-dialog:
Pequeño modal
<div class="modal-dialog modal-sm">
modal grande
<div class="modal-dialog modal-lg">
Por defecto, los modales son de tamaño medio.
Bootstrap Tooltip Plugin

La descripción Plugin
El plug-in Tooltip es pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del ratón sobre un
elemento:

Tip: Los complementos pueden ser incluidos de forma individual (usando "tooltip.js" de rutina de carga de archivos
Cómo crear un mensaje de ayuda

Para crear un texto de ayuda, añadir el data-toggle="tooltip" atributo a un elemento.
Utilice el title atributo para especificar el texto que se debe mostrar el interior de la descripción:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Nota: La información sobre herramientas se debe inicializar con jQuery: seleccionar el elemento especificado y llamar al
tooltip() método.
El siguiente código permitirá a todas las sugerencias en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
La información sobre herramientas de posicionamiento

Por defecto, la descripción aparecerá en la parte superior del elemento.
Utilice el data-placement atributo para establecer la posición de la información de herramientas en la parte superior,
inferior, izquierdo o el lado derecho del elemento:

Ejemplo
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Consejo: También puede utilizar el data-placement atributo con un valor de "auto", que le permitirá al navegador
decidir la posición de la información de herramientas. Por ejemplo, si el valor es "auto izquierda", la descripción se
mostrará en el lado izquierdo, cuando sea posible, de otro modo a la derecha.
Bootstrap Popover Plugin

El Popover Plugin
El plug-in Popover es similar a la información de herramientas; se trata de un cuadro emergente que aparece cuando el
usuario hace clic en un elemento. La diferencia es que el popover puede contener mucho más contenido.
Tip: Los complementos pueden ser incluidos de forma individual (usando "popover.js" de rutina de carga de archivos
Cómo crear un Popover

Para crear un popover, añadir el data-toggle="popover" atributo a un elemento.

Utilice el title atributo para especificar el texto de la cabecera de la popover, y utilizar el data-content atributo para
especificar el texto que se debe mostrar dentro del cuerpo del popover:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the

popover">Toggle popover</a>
Nota: Popovers deben inicializarse con jQuery: seleccionar el elemento especificado y llaman al método popover ().
El siguiente código permitirá a todos los panecillos en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Popovers de posicionamiento
Por defecto, el popover aparecerá en el lado derecho del elemento.
Utilice el data-placementatributo para establecer la posición de la popover en la parte superior, inferior, izquierdo o el
lado derecho del elemento:
Ejemplo
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>

<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Consejo: También puede utilizar el atributo de ubicación de los datos con un valor de "auto", que le permitirá al
navegador decidir la posición del popover. Por ejemplo, si el valor es "auto dejó", el popover mostrará en el lado
izquierdo, cuando sea posible, de otro modo a la derecha.
cerrando Popovers
Por defecto, el popover se cierra cuando se hace clic en el elemento de nuevo. Sin embargo, se puede utilizar el data-
trigger="focus"atributo que cerrará la popover al hacer clic fuera del elemento:
Ejemplo
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in
the document to close this popover">Click me</a>
Consejo: Si desea que el popover que se mostrará cuando se mueve el puntero del ratón sobre el elemento, utiliza
el data-triggeratributo con un valor de "flotar":
Ejemplo
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

Bootstrap Scrollspy Plugin (Avanzado)

El Scrollspy Plugin
El plug-in Scrollspy se utiliza para actualizar automáticamente los enlaces en una lista de navegación basada en la
posición de desplazamiento.
Cómo crear un Scrollspy

El siguiente ejemplo muestra cómo crear un scrollspy:

Ejemplo

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
...
<li><a href="#section1">Section 1</a></li>
...
</nav>


<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
Añadir data-spy="scroll"al elemento que se debe utilizar como el área de desplazamiento (a menudo este es
el <body>elemento).

A continuación, añadir el data-targetatributo con un valor de la identificación o el nombre de clase de la barra de
navegación (.navbar). Esto es para asegurarse de que la barra de navegación está conectado con el área de
desplazamiento.
Tenga en cuenta que los elementos desplazables deben coincidir con el ID de los enlaces dentro de los elementos de
lista de la barra de navegación ( <div id="section1">los partidos <a href="#section1">).
El opcional data-offsetatributo especifica el número de píxeles para desplazar de arriba en el cálculo de la posición de
desplazamiento. Esto es útil cuando se siente que los enlaces dentro de la barra de navegación cambia el estado activo
demasiado pronto o demasiado pronto cuando se dirija a los elementos desplazables. Por defecto es de 10 píxeles.
Requiere posicionamiento relativo: El elemento con datos de espionaje = "scroll" requiere que el CSS posición
de propiedad, con un valor de "relativo" para que funcione correctamente.

En este ejemplo, se utiliza píldoras de navegación vertical de rutina de carga que en el menú:
Ejemplo
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>

Bootstrap Affix Plugin (Avanzado)

El afijo Plugin
El plug-in permite Affix un elemento para convertirse en pegada (bloqueado) a un área en la página. Esto se utiliza a
menudo con los menús de navegación o botones de icono sociales, para que sean "pegan" en un área específica
mientras se desplaza arriba y abajo de la página.
El plug-in cambia este comportamiento dentro y fuera (cambia el valor de CSS position partir static a fixed),
dependiendo de la posición de desplazamiento.
Ejemplo 1) Una barra de navegación fijada:

Cómo crear un menú de navegación Colocada

El siguiente ejemplo muestra cómo crear un menú de navegación horizontal fijada:
Ejemplo
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
El siguiente ejemplo muestra cómo crear un menú de navegación vertical, fijada:
Ejemplo
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Añadir data-spy="affix"al elemento que desea colocar.
Opcionalmente, añadir el data-offset-top|bottomatributo para calcular la posición del desplazamiento.
Cómo funciona
El plug-in afijo alterna entre tres clases: .affix, .affix-top, y .affix-bottom. Cada clase representa un estado en
particular.Debe añadir propiedades CSS para manejar las posiciones reales, con la excepción
de position:fixed la .affixclase.
 El plugin añade el .affix-topo .affix-bottomclase para indicar el elemento se encuentra en su parte superior la
mayor parte o última posición. Posicionamiento con CSS no es necesaria en este momento.

 Desplazándose más allá del elemento fijada desencadena la colocación real - esto es donde el plugin reemplaza
el .affix-top o .affix-bottom clase con las .affix clases (conjuntos position:fixed). En este punto, se
debe añadir el CSS top o bottom propiedad para posicionar el elemento situará en la página.
 Si se define un desplazamiento inferior, desplazándose más allá que sustituye a la .affix clase con .affix-
bottom. Dado que las compensaciones son opcionales, estableciendo uno requiere que establezca el CSS
correspondiente. En este caso, añadir position:absolute cuando sea necesario.
En el primer ejemplo anterior, el plugin Affix agrega la .affix clase (position: fixed) al elemento <nav> cuando hemos
desplazado 197 píxeles desde la parte superior. Si abre el ejemplo, también verá que hemos añadido la
CSS toppropiedad con un valor de 0 a la.affixclase. Esto es para asegurarse de que la barra de navegación se
mantiene en la parte superior de la página en todo momento, cuando nos hemos desplazado 197 píxeles desde la parte
superior.
Scrollspy y Affix
Utilizando el plugin de Affix junto con el Scrollspy plugin:
Menú horizontal (barra de navegación)

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

...

</nav>
</body>
Menú vertical (Sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>

bootstrap plantillas
Las plantillas de archivos de inicio w3schools '
Hemos utilizado sistema de red de Bootstrap para crear algunas plantillas HTML de respuesta. Son completamente libre
- Haga clic en "Pruebe usted mismo" para ver el código y hacer lo que quiera con él:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */

.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */

footer {
background-color: #555;

color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */

@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
</style>
</head>
<body>
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>John's Blog</h4>
<li class="active"><a href="#section1">Home</a></li>
<li><a href="#section2">Friends</a></li>
<li><a href="#section3">Family</a></li>
<li><a href="#section3">Photos</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>

</button>
</span>
</div>
</div>
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>I Love Food</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5>
<h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br>
<p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br><br>
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>Officially Blogging</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5>
<h5><span class="label label-success">Lorem</span></h5><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h4>Leave a Comment:</h4>
<form role="form">

<textarea class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<br><br>
<p><span class="badge">2</span> Comments:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4>
<p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<br>
</div>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
<p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<p><span class="badge">1</span> Comment:</p><br>
<div class="row">
</div>

<h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
<p>Me too! WOW!</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */

footer {
padding: 25px;
}
</style>
</head>
<body>


</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<h1>My Portfolio</h1>
<p>Some text that represents "Me"...</p>
</div>
</div>
<div class="container-fluid bg-3 text-center">

<h3>Some of my Work</h3><br>
<div class="row">
<p>Some text..</p>
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">

</div>
<p>Some text..</p>
</div>
<p>Some text..</p>
</div>
<p>Some text..</p>
</div>
</div>
</div><br>
<div class="container-fluid bg-3 text-center">

<div class="row">
<p>Some text..</p>
</div>
<p>Some text..</p>
</div>
<p>Some text..</p>
</div>

<p>Some text..</p>
</div>
</div>
</div><br><br>
<footer class="container-fluid text-center">

<p>Footer Text</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */


.sidenav {
padding-top: 20px;
height: 100%;
}

footer {
color: white;
padding: 15px;

}
/* On small screens, set height to 'auto' for sidenav and grid */

.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>

</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<li><a href="#">Projects</a></li>
</ul>

</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">

<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>

</div>
</div>
</div>

<p>Footer Text</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
footer {
color: white;
padding: 15px;
}
</style>
</head>
<body>
</button>
</div>

<li><a href="#">Messages</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">My Profile</a></p>
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>

<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
</div>
<div class="row">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="well">

<p>John</p>
</div>
</div>
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or
wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="well">
<p>Bo</p>
</div>
</div>
<div class="well">
</div>
</div>
</div>
<div class="row">
<div class="well">
<p>Jane</p>
</div>

</div>
<div class="well">
</div>
</div>
</div>
<div class="row">
<div class="well">
<p>Anja</p>
</div>
</div>
<div class="well">
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>

<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<p>Footer Text</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.navbar {
margin-bottom: 0;
border-radius: 0;
}

footer {
padding: 25px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {

display: none;
}
}
</style>
</head>
<body>

</button>
</div>
</ul>
</ul>
</div>
</div>
</nav>


</ol>

<img src="http://placehold.it/1200x400?text=IMAGE" alt="Image">
<h3>Sell $</h3>
<p>Money Money.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x400?text=Another Image Maybe" alt="Image">
<h3>More Sell $</h3>
</div>
</div>
</div>

</a>

</a>
</div>

<h3>What We Do</h3><br>
<div class="row">
<p>Current Project</p>
</div>
<p>Project 2</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
</div>
</div>
</div><br>

<p>Footer Text</p>
</footer>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style>

footer {
padding: 25px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
min-height: 200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>

</button>
</div>

</ul>
</ul>
</div>
</div>
</nav>
<div class="row">

</ol>

<img src="http://placehold.it/800x400?text=IMAGE" alt="Image">
<h3>Sell $</h3>
<p>Money Money.</p>

</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400?text=Another Image Maybe" alt="Image">
<h3>More Sell $</h3>
</div>
</div>
</div>

</a>
</a>
</div>
</div>
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Upcoming Events..</p>
</div>
<div class="well">

<p>Visit Our Blog</p>
</div>
</div>
</div>
<hr>
</div>

<h3>What We Do</h3>
<br>
<div class="row">
<p>Current Project</p>
</div>
<p>Project 2</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
</div>
<div class="well">
<p>Some text..</p>
</div>

<div class="well">
<p>Some text..</p>
</div>
</div>
</div>
<hr>
</div>

<h3>Our Partners</h3>
<br>
<div class="row">
<p>Partner 1</p>
</div>
<p>Partner 2</p>
</div>
<p>Partner 3</p>
</div>
<p>Partner 4</p>
</div>
<p>Partner 5</p>

</div>
<p>Partner 6</p>
</div>
</div>
</div><br>

<p>Footer Text</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */

.sidenav {
height: 100%;
}
/* On small screens, set height to 'auto' for the grid */

.row.content {height: auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse visible-xs">


</button>
</div>
<li class="active"><a href="#">Dashboard</a></li>
<li><a href="#">Age</a></li>
<li><a href="#">Gender</a></li>
<li><a href="#">Geo</a></li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-3 sidenav hidden-xs">
<h2>Logo</h2>
<li class="active"><a href="#section1">Dashboard</a></li>
<li><a href="#section2">Age</a></li>
<li><a href="#section3">Gender</a></li>
<li><a href="#section3">Geo</a></li>
</ul><br>
</div>
<br>

<div class="well">
<h4>Dashboard</h4>
<p>Some text..</p>
</div>
<div class="row">
<div class="well">
<h4>Users</h4>
<p>1 Million</p>
</div>
</div>
<div class="well">
<h4>Pages</h4>
<p>100 Million</p>
</div>
</div>
<div class="well">
<h4>Sessions</h4>
<p>10 Million</p>
</div>
</div>
<div class="well">
<h4>Bounce</h4>
<p>30%</p>
</div>
</div>
</div>
<div class="row">

<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
</div>
<div class="row">
<div class="well">
<p>Text</p>
</div>
</div>
<div class="well">
<p>Text</p>

</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */

.jumbotron {
margin-bottom: 0;
}
footer {
padding: 25px;
}
</style>
</head>
<body>
<h1>Online Store</h1>

<p>Mission, Vission & Values</p>
</div>
</div>
</button>
</div>
<li><a href="#">Products</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Stores</a></li>
</ul>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Your Account</a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">

<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="panel panel-danger">
</div>
</div>
<div class="panel panel-success">
</div>
</div>
</div>
</div><br>
<div class="row">
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div><br><br>

<p>Online Store Copyright</p>
<form class="form-inline">Get deals:
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Sign Up</button>
</form>
</footer>
</body>
</html>

Bootstrap PDF

Cargado por

Información del documento

Título 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

Bootstrap PDF

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO

¿Cuál es al diseño web?

En junio de 2014 fue el proyecto Bootstrap No.1 en GitHub!

ALDO OMAR MORALES CARLOS

¿Por qué utilizar Bootstrap?

Dónde obtener Bootstrap?

 Bootstrap descarga de getbootstrap.com

ALDO OMAR MORALES CARLOS

Una de las ventajas de utilizar el Bootstrap CDN:

Crear la primera página web con Bootstrap

ALDO OMAR MORALES CARLOS

2. Bootstrap 3 es móvil por primera

<meta name="viewport" content="width=device-width, initial-scale=1">

Hay dos clases de contenedores para elegir:

ALDO OMAR MORALES CARLOS

Dos básico Bootstrap Páginas

ALDO OMAR MORALES CARLOS

ALDO OMAR MORALES CARLOS

Sistema de Red de arranque

lapso de 4 lapso de 4 lapso de 4

Las clases de cuadrícula

ALDO OMAR MORALES CARLOS

Estructura básica de una cuadrícula Bootstrap

ALDO OMAR MORALES CARLOS

Tres columnas iguales

Dos columnas desiguales

ALDO OMAR MORALES CARLOS

Bootstrap Texto / Tipografía

Esto se aplica a los <body>y todos los párrafos.

Bootstrap valores predeterminados del navegador vs.

ALDO OMAR MORALES CARLOS

h1 Bootstrap heading (36px)

ALDO OMAR MORALES CARLOS

h1 heading secondary text

Bootstrap estilo al HTML <mark>elemento de la siguiente manera:

ALDO OMAR MORALES CARLOS

Para mostrar la cotización a la derecha, utilice la .blockquote-reverseclase:

ALDO OMAR MORALES CARLOS

ALDO OMAR MORALES CARLOS

Colores contextuales y Fondos

ALDO OMAR MORALES CARLOS

Más clases de tipografía

Class Description Example

.lead Makes a paragraph stand out Try it

ALDO OMAR MORALES CARLOS

.text-left Indicates left-aligned text Try it

.text-center Indicates center-aligned text Try it

.text-right Indicates right-aligned text Try it

.text- Indicates justified text Try it

.text-nowrap Indicates no wrap text Try it

.text- Indicates lowercased text Try it

ALDO OMAR MORALES CARLOS

.text- Indicates uppercased text Try it

.text- Indicates capitalized text Try it

.list-inline Places all list items on a single line Try it

ALDO OMAR MORALES CARLOS

.pre- Makes a <pre> element scrollable

La .tableclase añade un estilo básico a una tabla:

ALDO OMAR MORALES CARLOS

Las filas de rayas

ALDO OMAR MORALES CARLOS