Bootstrap 3

Bootstrap Empieza
Anterior
Siguiente captulo "
Cul es Bootstrap?
Bootstrap es un marco frontal de extremo libre para el desarrollo web ms rpido y ms fcil
Bootstrap incluye plantillas de diseo basadas en HTML y CSS para tipografa, formas, botones, tablas de
navegacin, modales, carruseles de imgenes y muchas otras, as como complementos opcionales de
JavaScript
Bootstrap tambin le da la posibilidad de crear fcilmente diseos que responden
Cul es al diseo web?

diseo web sensible es sobre la creacin de sitios web que se ajustan automticamente para quedar bien en
todos los dispositivos, desde telfonos pequeos y grandes escritorios.
Historia de arranque
Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter, y lanzado como un producto de cdigo
abierto en agosto de 2011 en GitHub.
En junio de 2014 fue el proyecto Bootstrap No.1 en GitHub!
Por qu utilizar Bootstrap?

Ventajas de Bootstrap:
Fcil de usar: Cualquier persona con conocimientos simplemente bsicos de HTML y CSS puede
comenzar a usar Bootstrap
Caractersticas de respuesta: CSS sensible de Bootstrap ajusta a los telfonos, tabletas y ordenadores
de sobremesa
Mobile-primer acercamiento: En Bootstrap 3, estilos mviles primer forman parte del marco bsico
Compatibilidad del navegador: Bootstrap es compatible con todos los navegadores modernos
(Chrome, Firefox, Internet Explorer, Safari y Opera)
Dnde 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 anfitrin 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. Tambin debe incluir jQuery:
MaxCDN:

<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/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 ms rpida. Adems, la
mayora de CDN se asegurar de que una vez que un usuario solicita un archivo de ella, se sirve desde el
servidor ms cercano a ellos, que tambin conduce a la descarga ms rpida.
Crear la primera pgina 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 pgina, 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 mvil por primera
Bootstrap 3 est diseado para ser sensible a los dispositivos mviles. -Mobile primeros estilos son parte del
marco bsico.
Para garantizar la prestacin adecuada y una funcin de zoom tctil, agregue la siguiente <meta>etiqueta en
el interior del <head>elemento:
<meta name="viewport" content="width=device-width, initial-scale=1">

La width=device-width parte establece el ancho de la pgina para seguir la pantalla-anchura del dispositivo
(que variar dependiendo del dispositivo).
La initial-scale=1 parte fija el nivel de zoom inicial cuando la pgina se carga por primera vez por el
navegador.
3. Envases
Bootstrap requiere tambin 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 grfica
Nota: Los recipientes no son encajables (no se puede poner un recipiente dentro de otro contenedor).
Dos bsico Bootstrap Pginas
El siguiente ejemplo muestra el cdigo de una pgina bsica 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>
Intntalo t mismo "
El siguiente ejemplo muestra el cdigo de una pgina bsica Bootstrap (con un recipiente ancho total):
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
</div>
</body>
</html>
Intntalo t mismo "
bootstrap Grids
Anterior
Siguiente captulo "
Sistema de Red de arranque

sistema de red de arranque permite un mximo de 12 columnas en toda la pgina.
Si no desea utilizar las 12 columnas individualmente, puede agrupar las columnas juntos para crear columnas
ms anchas:
lapso de
1
lapso de
1
lapso de
1
lapso de
1
lapso de
1
lapso de 4
lapso de
1
lapso de
1
lapso de
1
lapso de
1
lapso de
1
lapso de 4
lapso de 4
lapso de
1
lapso de
1
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 automtica en funcin
del tamao de la pantalla.
Las clases de cuadrcula
El sistema de red Bootstrap tiene cuatro clases:
xs (para mviles)
SM (para comprimidos)
md (para equipos de sobremesa)
lg (para equipos de sobremesa ms grandes)
Las clases anteriores se pueden combinar para crear diseos ms dinmica y flexible.
Estructura bsica de una cuadrcula Bootstrap

La siguiente es una estructura bsica 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 continuacin, aadir el nmero deseado de columnas
(etiquetas apropiadas con .col-*-*clases). Tenga en cuenta que los nmeros de .col-*-*siempre deben agregar
hasta 12 para cada fila.
A continuacin hemos recopilado algunos ejemplos de diseos bsicos de la red Bootstrap.
Tres columnas iguales

.col-sm-4
.col-sm-4
.col-sm-4
El siguiente ejemplo muestra cmo obtener unas tres columnas de igual anchura a partir de tabletas y escalada
a las grandes computadoras de escritorio. En los telfonos mviles, las columnas se apilan automticamente:
Ejemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
</div>
Intntalo t mismo "
Dos columnas desiguales

.col-sm-4
.col-sm-8
El siguiente ejemplo muestra cmo obtener dos columnas diferentes de ancho a partir de las tabletas y escalar
a grandes equipos de sobremesa:
Ejemplo
<div class="row">
</div>
Intntalo t mismo "
Consejo: Usted aprender ms sobre las redes de archivos de inicio ms adelante en este tutorial.
Bootstrap Texto / Tipografa

Anterior
Siguiente captulo "
Ajustes por defecto de Bootstrap

predeterminado de tamao de fuente mundial de arranque es 14px, con una lnea de altura de 1.428.
Esto se aplica a los <body>y todos los prrafos.
Adems, 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 captulo, 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 ttulos HTML ( <h1>a <h6>) de la siguiente manera:
Ejemplo
h1 Bootstrap heading (36px)

Intntalo t mismo "
<Small>
En el cdigo HTML Bootstrap <small>elemento se utiliza para crear un texto secundario del cigarrillo en
cualquier partida:
Ejemplo
h1 heading
secondary text
h2 heading
secondary text
h3 heading secondary text

h4 heading
secondary text
h5 heading secondary text

h6 heading
secondary text
Intntalo t mismo "
<Marca>
Bootstrap estilo al HTML <mark>elemento de la siguiente manera:
Ejemplo
Use the mark element to highlight text.
Intntalo t mismo "
<Abbr>
Bootstrap estilo al HTML <abbr>elemento de la siguiente manera:
Ejemplo
The WHO was founded in 1948.
Intntalo t mismo "
<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
Intntalo t mismo "
Para mostrar la cotizacin a la derecha, utilice la .blockquote-reverseclase:
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
Intntalo t mismo "
<Dl>
Bootstrap estilo al HTML <dl>elemento de la siguiente manera:
Ejemplo
Coffee
- black hot drink
Milk
- white cold drink
Intntalo t mismo "
<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.
Intntalo t mismo "
<Kbd>
Bootstrap estilo al HTML <kbd>elemento de la siguiente manera:
Ejemplo
Use ctrl + p to open the Print dialog box.
Intntalo t mismo "
<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.
Intntalo t mismo "
Colores contextuales y Fondos

Bootstrap tambin tiene algunas clases contextuales que pueden ser utilizados para proporcionar ", es decir a
travs de colores".
Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .textwarning, 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.
Intntalo t mismo "
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.
Intntalo t mismo "
Ms clases de tipografa
Las clases Bootstrap siguientes se pueden aadir 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-justify
Indicates justified text
Try it
.text-nowrap
Indicates no wrap text
Try it
.text-lowercase
Indicates lowercased text
Try it
.text-uppercase
Indicates uppercased text
Try it
.text-capitalize
Indicates capitalized text
Try it
.initialism
Displays the text inside an <abbr> element in a slightly smaller font size
Try it
.list-unstyled
Removes the default list-style and left margin on list items (works on
both<ul> and <ol>). This class only applies to immediate children list items (to
Try it
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-horizontal
Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-byside. Starts off like default <dl>s, but when the browser window expands, it will
Try it
line up side-by-side
.pre-scrollable
Makes a <pre> element scrollable
Try it
Bootstrap completar la tipografa de referencia

Para una referencia completa de todos los elementos / tipografa clases, ir a nuestra completa Bootstrap de la
tipografa de referencia .
Busque tambin en nuestra clases de referencia Bootstrap ayudante para obtener ms informacin acerca de
las clases de contexto.
bootstrap Tablas
Anterior
Siguiente captulo "
Bootstrap tabla bsico

Una tabla Bootstrap bsica tiene un acolchado ligero y slo divisores horizontales.
La .tableclase aade un estilo bsico a una tabla:
Ejemplo
Firstname
Lastname
Email
John
Doe
john@example.com
Firstname
Lastname
Email
Mary
Moe
mary@example.com
July
Dooley
july@example.com
Intntalo t mismo "
Las filas de rayas

La .table-stripedclase aade cebra-raya a una tabla:
Ejemplo
Firstname
Lastname
Email
John
Doe
john@example.com
Mary
Moe
mary@example.com
Firstname
Lastname
Email
July
Dooley
july@example.com
Intntalo t mismo "
Tabla bordeado
La .table-borderedclase aade fronteras en todos los lados de la mesa y las clulas:
Ejemplo
Firstname
Lastname
Email
John
Doe
john@example.com
Mary
Moe
mary@example.com
July
Dooley
july@example.com
Intntalo t mismo "
Las filas de la libracin

La .table-hoverclase permite a un estado estacionario en filas de la tabla:
Ejemplo
Firstname
Lastname
Email
John
Doe
john@example.com
Mary
Moe
mary@example.com
July
Dooley
july@example.com
Intntalo t mismo "
Tabla condensada
La .table-condensedclase hace una tabla ms compacta cortando el relleno de celda a la mitad:
Ejemplo
Firstname
Lastname
Email
John
Doe
john@example.com
Mary
Moe
mary@example.com
July
Dooley
july@example.com
Intntalo t mismo "
Las clases contextuales

Clases contextuales pueden ser usados para colorear filas de la tabla ( <tr>) o celdas de la tabla ( <td>):
Ejemplo
Firstname
Lastname
Email
John
Doe
john@example.com
Firstname
Lastname
Email
Mary
Moe
mary@example.com
July
Dooley
july@example.com
Intntalo t mismo "

Las clases contextuales que se pueden utilizar son:
Clase
Descripcin
.active
Aplica el color de la libracin de la fila de tabla o celda de tabla
.success
Indica una accin exitosa o positivo
.info
Indica un cambio informativo neutral o accin
.warning
Indica una advertencia de que podran necesitar atencin
.danger
Indica una accin peligrosa o potencialmente negativo
Tablas de respuesta
La .table-responsiveclase crea una tabla de respuesta. La tabla a continuacin, desplazarse horizontalmente
en dispositivos pequeos (menos de 768px). Al ver en algo ms grande que 768px de ancho, no hay
diferencia:
Ejemplo
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Intntalo t mismo "
Ponte a prueba con los ejercicios!

Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5 Ejercicio 6
Bootstrap completar la tabla de referencia

Para una referencia completa de todas las clases de mesa, ir a nuestra completa Referencia Bootstrap Tablas .
bootstrap Imgenes
Anterior
Siguiente captulo "
Formas de imagen de archivos de inicio

Esquinas redondeadas:
Circulo:
Miniatura:
Esquinas redondeadas
La .img-roundedclase aade 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">
Intntalo t mismo "
Circulo
La .img-circleclase da forma a la imagen de un crculo (IE8 no es compatible con las esquinas redondeadas):
Ejemplo
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
Intntalo t mismo "
Miniatura
La .img-thumbnailclase da forma a la imagen para una versin en miniatura:
Ejemplo
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
Intntalo t mismo "
Imgenes de respuesta
Imgenes vienen en todos los tamaos. Lo mismo ocurre con las pantallas. Responsive imgenes se ajustan
automticamente para adaptarse al tamao de la pantalla.
Crear imgenes que responden mediante la adicin de una .img-responsiveclase a la <img>etiqueta. La
imagen ser entonces escalar muy bien al elemento padre.
La .img-responsiveclase 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">
Intntalo t mismo "
galera de imgenes
Tambin puede utilizar el sistema de rejilla de Bootstrap en conjunto con la .thumbnailclase para crear una
galera de imgenes:
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>
Intntalo t mismo "
Incrusta Responsive
Tambin permiten vdeos 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 adicin de una .embed-responsive-itemclase a
una<iframe>etiqueta (el video a continuacin, se escala muy bien al elemento padre). El
conteniendo <div>define la relacin de aspecto del vdeo:
Ejemplo
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Intntalo t mismo "

Cul es la relacin de aspecto?
La relacin de aspecto de una imagen se describe la relacin proporcional entre su anchura y su altura. Dos
relaciones de aspecto de vdeo comunes son de 4: 3 (el formato de vdeo universal del siglo 20), y de 16: 9
(universal para la televisin de alta definicin y la televisin digital europea).
Se puede elegir entre dos clases de relacin de aspecto:

</div>


</div>

Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4
Manos a la Obra completa Imagen Referencia

Para una referencia completa de todas las clases de imgenes, vaya a nuestra completa Bootstrap imagen de
referencia .
Bootstrap pantalla gigante y el encabezado de

pgina
Anterior
Siguiente captulo "
Creacin de una pantalla gigante

Una pantalla gigante indica una caja grande para llamar la atencin adicional a algn contenido o informacin
especial.
Una pantalla gigante se muestra como un cuadro gris con esquinas redondeadas. Tambin aumenta el tamao
de fuente del texto en su interior.
Consejo: Dentro de una pantalla gigante se puede poner casi cualquier HTML vlido, incluyendo otros
elementos Bootstrap / classes.
Use un <div>elemento con la clase .jumbotronpara crear una pantalla gigante:
bootstrap Tutorial
Bootstrap es el ms popular de HTML, CSS, JS y un marco para el desarrollo,
mvil primeros proyectos de respuesta en la web.
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>
Intntalo t mismo "
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
<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>
Intntalo t mismo "
Creacin de un encabezado
Un encabezado de la pgina es como un separador de seccin.
La .page-headerclase aade una lnea horizontal en el epgrafe (+ aade algo ms de espacio alrededor del
elemento):
Ejemplo Encabezado de pgina

Use un <div>elemento con la clase .page-headerpara crear un encabezado de pgina:
Ejemplo
<div class="page-header">
<h1>Example Page Header</h1>
</div>
Intntalo t mismo "
bootstrap Wells
Anterior
Siguiente captulo "
Wells
La .wellclase aade un borde redondeado alrededor de un elemento con un color de fondo gris y algo de
relleno:
Bueno bsica
Ejemplo
<div class="well">Basic Well</div>
Intntalo t mismo "
Bueno Tamao
Pequeo Bueno
Bueno normales
Bien grande
Cambiar el tamao del pozo mediante la adicin de la .well-sm clase para pozos pequeos o .well-lgclase para
grandes pozos:
Ejemplo
<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>
Intntalo t mismo "

Por defecto, los pozos son de tamao medio.
bootstrap alertas
Anterior
Siguiente captulo "
alertas
Bootstrap proporciona una manera fcil de crear mensajes de alerta predefinidos:
xito! Este cuadro de alerta indica una accin exitosa o positivo.
Info! Este cuadro de alerta indica un cambio informativo neutral o accin.
Advertencia! Este cuadro de alerta indica una advertencia de que puede ser que necesite atencin.
Peligro! Este cuadro de alerta indica una accin peligrosa o potencialmente negativo.
Las alertas se crean con la .alertclase, seguida de una de las cuatro clases contextuales .alert-success, .alertinfo, .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>
Intntalo t mismo "
alertas de cierre
Para cerrar el mensaje de alerta, aadir class="close"y data-dismiss="alert"a un enlace o un elemento de
botn:
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>
Intntalo t mismo "

El atributo aria- * y y tiempos; explicacin
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 botn 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 .fadey .inclases aade un efecto de atenuacin cuando se cierra el mensaje de alerta:
Ejemplo
<div class="alert alert-success fade in">
Intntalo t mismo "

Ejercicio 1 Ejercicio 2 Ejercicio 3
Alerta de referencia completar Bootstrap

Para una referencia completa de todas las opciones de alerta, mtodos y eventos, visite nuestro Bootstrap JS
Alerta de referencia .
bootstrap Botones
Anterior
Siguiente captulo "
estilos de botn
Bootstrap ofrece siete estilos de botones:
Defecto Primario xito informacin Advertencia Peligro Enlazar
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 cdigo para los diferentes estilos de botones:
Ejemplo
<button
<button
<button
<button
<button
<button
<button
type="button"
type="button"
type="button"
type="button"
type="button"
type="button"
type="button"
class="btn
class="btn
class="btn
class="btn
class="btn
class="btn
class="btn
btn-default">Default</button>
btn-primary">Primary</button>
btn-success">Success</button>
btn-info">Info</button>
btn-warning">Warning</button>
btn-danger">Danger</button>
btn-link">Link</button>
Intntalo t mismo "

Las clases botn 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">
Intntalo t mismo "

Por qu nosotros poner un # en el atributo href del enlace?
Ya que no tienen pgina de vincularlo a, y no queremos hacer llegar un mensaje "404", ponemos # que el
enlace. En la vida real se debe por supuesto sido un verdadero URL para la pgina de "Bsqueda".
Tamaos de botn
Bootstrap ofrece cuatro tamaos de botn:
Grande Medio Pequea XSmall
Las clases que definen los diferentes tamaos son:
.btn-lg
.btn-md
.btn-sm
.btn-xs
El siguiente ejemplo muestra el cdigo para diferentes tamaos de botn:
Ejemplo
<button
<button
<button
<button
type="button"
type="button"
type="button"
type="button"
class="btn
class="btn
class="btn
class="btn
btn-primary
btn-primary
btn-primary
btn-primary
btn-lg">Large</button>
btn-md">Medium</button>
btn-sm">Small</button>
btn-xs">XSmall</button>
Intntalo t mismo "
Bloquear Nivel Botones

Un botn de nivel de bloque se extiende por todo el ancho del elemento padre.
Botn 1botn 2
Agregar clase .btn-blockpara crear un botn de nivel de bloque:
Ejemplo
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Intntalo t mismo "
Activo / Botones de movilidad

Un botn puede estar configurado para un activo (aparecer presionado) o un estado inhabilitado (unclickable):
activo primaria discapacitados primaria
La clase .activehace un botn aparecer presionado, y la clase .disabled hace un botn unclickable:
Ejemplo
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Intntalo t mismo "

Referencia completa del botn Bootstrap

Para una referencia completa de todas las clases de botones, ir a nuestra completa Bootstrap Botn de
referencia .
Bootstrap grupos de botones

Anterior
Siguiente captulo "
grupos de botones
Bootstrap le permite agrupar una serie de botones a la vez (en una sola lnea) en un grupo de botones:
manzanaSamsungSony
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>
Intntalo t mismo "

Consejo: En lugar de aplicar tamaos de botones para cada botn en un grupo, utilice la clase .btn-group-*de
tamao de todos los botones en el grupo:
Ejemplo
<div class="btn-group btn-group-lg">

</div>
Intntalo t mismo "
Verticales grupos de botones

Bootstrap tambin soporta grupos de botones verticales:
manzanaSamsungSony
Utilice la clase .btn-group-verticalpara crear un grupo de botones verticales:
Ejemplo
<div class="btn-group-vertical">
</div>
Intntalo t mismo "
Justificadas grupos de botones

Para abarcar todo el ancho de la pantalla, utilice la .btn-group-justified clase:
manzana
Samsung
Sony
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>
Intntalo t mismo "

Nota: Para <button>los elementos, debe envolver cada botn en una .btn-groupclase:
Ejemplo
<div class="btn-group btn-group-justified">

</div>
</div>
</div>
</div>
Intntalo t mismo "
Botn de anidacin Grupos y mens desplegables

manzanaSamsung
Sony
grupos de botones nido para crear mens 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>
Intntalo t mismo "
Mens desplegables botn de divisin

Sony
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>
Intntalo t mismo "

Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5
bootstrap Glyphicons
Anterior
Siguiente captulo "
Glyphicons
Bootstrap ofrece 260 glyphicons de la Glyphicons conjunto medianos.
Glyphicons se pueden utilizar en el texto, botones, barras de herramientas, navegacin, formas, etc.
Estos son algunos ejemplos de glyphicons:

glyphicon sobre:
Imprimir glyphicon:
Buscar glyphicon:
Descargar glyphicon:
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>
Intntalo t mismo "

Ejercicio 1 Ejercicio 2 Ejercicio 3
Bootstrap completar Glyphicon Referencia

Para una referencia completa de todos los glyphicons, vaya a nuestra completa Bootstrap Glyphicon de
referencia .
Bootstrap Placas y etiquetas

Anterior
Siguiente captulo "
insignias
Insignias son indicadores numricos de cuntos elementos estn asociados con un enlace:
Noticias
Comentarios
10
Actualizaciones
Los nmeros (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>
Intntalo t mismo "

Placas tambin se pueden usar dentro de otros elementos, tales como botones:
Primary 7
El siguiente ejemplo muestra cmo agregar insignias a los botones:
Ejemplo
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Intntalo t mismo "
Etiquetas
Las etiquetas se utilizan para proporcionar informacin adicional acerca de algo:
ejemplo
ejemplo
Nuevo
Nuevo
ejemplo Nuevo
ejemplo
Nuevo
ejemplo Nuevo
ejemplo
Nuevo
Utilice la .labelclase, seguida de una de las seis clases contextuales .label-default, .label-primary, .labelsuccess, .label-info, .label-warningo .label-danger, dentro de un <span>elemento para crear una etiqueta:
Ejemplo
<h1>Example
<h2>Example
<h3>Example
<h4>Example
<h5>Example
<h6>Example
<span
<span
<span
<span
<span
<span
class="label
class="label
class="label
class="label
class="label
class="label
label-default">New</span></h1>
Intntalo t mismo "

El siguiente ejemplo muestra todas las clases de etiquetas contextuales:
Por defecto Etiqueta Etiqueta Primaria xito Label Label Etiqueta de advertencia Peligro Etiqueta
Ejemplo
<span
<span
<span
<span
<span
<span
class="label
class="label
class="label
class="label
class="label
class="label
label-default">Default Label</span>
label-primary">Primary Label</span>
label-success">Success Label</span>
label-info">Info Label</span>
label-warning">Warning Label</span>
label-danger">Danger Label</span>
Intntalo t mismo "

Bootstrap barras de progreso

Anterior
Siguiente captulo "
Barra de progreso bsicos

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:
70% Completo
Para crear una barra de progreso por defecto, aadir 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>
Intntalo t mismo "
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:
70%
Retire la .sr-onlyclase de la barra de progreso para mostrar un porcentaje visible:
Ejemplo
<div class="progress-bar" role="progressbar" aria-valuenow="70"

70%
</div>
</div>
Intntalo t mismo "
Barras de color de progreso

clases contextuales se utilizan para proporcionar ", es decir a travs 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
40% Completo (xito)
50% de avance (info)
60% Completo (advertencia)
70% Completo (peligro)
El siguiente ejemplo muestra cmo 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>
Intntalo t mismo "
Barras de progreso rayado

Las barras de progreso tambin puede ser rayado:
40% Completo (xito)
50% de avance (info)
60% Completo (advertencia)
70% Completo (peligro)
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>
Intntalo t mismo "
Animada barra de progreso

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

Las barras de progreso tambin se pueden apilar:
Espacio libre
Advertencia
Peligro
Crear una barra de progreso apilados mediante la colocacin 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>
Intntalo t mismo "

bootstrap paginacin
Anterior
Siguiente captulo "
bsica paginacin
Si usted tiene un sitio web con un montn de pginas, es posible que desee agregar algn tipo de paginacin
para cada pgina.
Un bsico en la paginacin Bootstrap se ve as:
5
Para crear una paginacin 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>
Intntalo t mismo "
Estado activo
El estado activo muestra lo que es la pgina actual:
5
Agregar la clase .activea que el usuario sepa qu pgina 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>
Intntalo t mismo "
Estado discapacitados
Un enlace desactivado, no se puede hacer clic:
5
Aadir clase .disabledsi un enlace por alguna razn 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>
Intntalo t mismo "
Dimensionamiento de paginacin
bloques de paginacin tambin pueden ser de un tamao a un tamao ms grande o un tamao ms pequeo:
Agregar clase .pagination-lgpara los bloques ms grandes o .pagination-smpara los bloques ms pequeos:
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>
Intntalo t mismo "
Migas de pan
Otra forma de paginacin, es el pan rallado:
1. Casa
2. Privado
3. Imgenes
4. Vacaciones
La .breadcrumbclase indica la ubicacin de la pgina actual dentro de una jerarqua de navegacin:
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>
Intntalo t mismo "

Completar Bootstrap de navegacin de referencia

Para una referencia completa de todas las clases de navegacin, vaya a nuestra completa Bootstrap de
navegacin de referencia .
bootstrap Pager
Anterior
Siguiente captulo "
Cul es Pager?
Pager es tambin una forma de paginacin (como se describe en el captulo 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:
Intntalo t mismo "
alinear Botones
Usa los .previousy las .nextclases para alinear cada botn para las caras de la pgina:
Ejemplo
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
Resultado:
Intntalo t mismo "

Grupos lista bsica

El grupo de la lista ms bsica es una lista desordenada con elementos de la lista:
En primer elemento
segundo punto
tercer punto
Para crear un grupo de la lista bsica, 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>
Intntalo t mismo "
Grupo lista con las insignias

Tambin se pueden aadir emblemas a un grupo de la lista. Las insignias sern automticamente colocados a
la derecha:
12Nueva
5Suprimido
3Advertencias
Para crear una tarjeta de identificacin, crear un <span>elemento con la clase .badge en el interior del
elemento de la lista:
Ejemplo
<li class="list-group-item"><span class="badge">12</span> New</li>
<li class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul>
Intntalo t mismo "
Lista de grupos vinculados con los Artculos

Los elementos de un grupo lista tambin pueden ser hipervnculos. Esto aade un color de fondo gris en vuelo
estacionario:
Primer elementoSegundo elementoTercer punto
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>
Intntalo t mismo "
Estado activo
Primer elemento
Segundo elementoTercer punto
Utilice la .activeclase para resaltar el elemento actual:
Ejemplo
<a href="#" class="list-group-item active">First item</a>
</div>
Intntalo t mismo "
artculo discapacitados
El grupo siguiente lista tiene un elemento deshabilitado:
Primer elementoSegundo elementoTercer punto

Para desactivar un elemento, agregue la .disabledclase:
Ejemplo
<a href="#" class="list-group-item disabled">First item</a>
</div>
Intntalo t mismo "
Las clases contextuales

clases contextuales se pueden utilizar para elementos de la lista de los colores:
En primer elemento
segundo punto
tercer punto
cuarto punto
Las clases para colorear list-elementos son: .list-group-item-success, list-group-item-info, list-group-itemwarning, y .list-group-item-danger:
Ejemplo
<li class="list-group-item
</ul>
list-group-item-success">First item</li>
list-group-item-info">Second item</li>
list-group-item-warning">Third item</li>
list-group-item-danger">Fourth item</li>
Intntalo t mismo "
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>
Intntalo t mismo "

bootstrap Paneles
Anterior
Siguiente captulo "
paneles
Un panel de arranque es una caja con borde con un poco de relleno alrededor de su contenido:
Un panel bsico
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>
Intntalo t mismo "

La .panel-defaultclase se utiliza para estilizar el color del panel. Ver el ltimo ejemplo en esta pgina para las
clases ms contextuales.
La partida del panel

La partida del panel
Panel de contenido
La .panel-headingclase aade un encabezado para el panel:
Ejemplo
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Intntalo t mismo "
Panel de pie de pgina

Panel de contenido
Panel de pie de pgina
La .panel-footerclase aade un pie de pgina en el panel:
Ejemplo
<div class="panel-footer">Panel Footer</div>
</div>
Intntalo t mismo "
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>
Intntalo t mismo "
Los paneles con las clases contextuales

Para colorear el panel, utilice clases contextuales ( .panel-default, .panel-primary, .panel-success, .panelinfo, .panel-warning, o .panel-danger):
Ejemplo
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
Intntalo t mismo "

bootstrap Dropdowns
Anterior
Siguiente captulo "
desplegable bsico
Un men desplegable es un men conmutable que permite al usuario elegir un valor de una lista predefinida:
Ejemplo desplegable
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>
Intntalo t mismo "
ejemplo Explicacin
La .dropdownclase consiste en un men desplegable.
Para abrir el men desplegable, utilice un botn o un enlace con una clase de .dropdown-toggley el datatoggle="dropdown"atributo.
La .caretclase crea un icono de cursor de flecha (), Que indica que el botn es un men desplegable.
Aadir 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>
Intntalo t mismo "
Cabecera desplegable
Desplegable Ejemplo de Cabecera
La .dropdown-headerclase se utiliza para agregar encabezados dentro del men desplegable:
Ejemplo
<li class="dropdown-header">Dropdown header 1</li>
Intntalo t mismo "
Desactivar un elemento
Ejemplo discapacitados desplegable
Para desactivar un elemento en el men desplegable, utilice la .disabledclase:
Ejemplo
<li class="disabled"><a href="#">CSS</a></li>
Intntalo t mismo "
Posicin desplegable
Ejemplo desplegable Derecho
Para alinear el botn derecho del desplegable, agregue la .dropdown-menu-rightclase de elemento con
.dropdown-men:
Ejemplo
<ul class="dropdown-menu dropdown-menu-right">
Intntalo t mismo "
Caer hasta
Ejemplo Dropup
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">
Intntalo t mismo "
Accesibilidad desplegable
Para ayudar a mejorar la accesibilidad para las personas que utilizan lectores de pantalla, que debe incluir los
siguientesroley 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>
Intntalo t mismo "

Bootstrap completar desplegable Referencia

Para una referencia completa de todas las opciones desplegables, mtodos y eventos, visite nuestro Bootstrap
JS desplegable de referencia .
bootstrap Cerrar
Anterior
Siguiente captulo "
bsica plegable
Botes hinchables son tiles cuando se desea ocultar y mostrar gran cantidad de contenido:
Haz click en mi
Ejemplo
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Intntalo t mismo "
ejemplo Explicacin
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 botn.
Para el control (mostrar / ocultar) el contenido plegable, aadir el data-toggle="collapse"atributo a un <a> o
un <button>. A continuacin, aadir el data-target="#id"atributo para conectar el botn 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>
Intntalo t mismo "

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>
Intntalo t mismo "
panel que puede contraerse
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>
Intntalo t mismo "
Colapsable Grupo Lista
grupo de la lista plegable
A continuacin 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>
Intntalo t mismo "
Acorden
Grupo 1 plegable
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
Grupo 2 plegable
Grupo 3 colapsable
El siguiente ejemplo muestra un acorden sencilla mediante la ampliacin del componente de panel.
Nota: Utilice el data-parentatributo para asegurarse de que todos los elementos plegables bajo la matriz
especificada se cerrarn 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>
Intntalo t mismo "
Reducir Referencia completa Bootstrap

Para una referencia completa de todas las opciones de colapso, mtodos y eventos, ir a nuestra Reducir
Referencia Bootstrap JS .
Bootstrap aqu y pldoras

Anterior
Siguiente captulo "
mens
La mayora de las pginas web tienen algn tipo de un men.
En HTML, un men se define a menudo en una lista desordenada <ul>(y peinado despus), 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-inlineclase a <ul>:
<ul class="list-inline">
Intntalo t mismo "
O bien, puede mostrar el men anterior con pestaas y pastillas (vase ms adelante) Bootstraps '.
Nota: Vase el ltimo ejemplo de esta pgina para encontrar la manera de hacer las pestaas y las pldoras
conmutable / dinmico.
Pestaas
Casa
men 1
men 2
men 3
Las fichas se crean con <ul class="nav nav-tabs">:
Consejo: Tambin marque la pgina actual con <li class="active">.

El siguiente ejemplo crea pestaas de navegacin:
Ejemplo
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
</ul>
Intntalo t mismo "
Las fichas con men desplegable
Casa
men 1
men 2
men 3
Pestaas tambin pueden contener mens desplegables.
El siguiente ejemplo aade 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>
Intntalo t mismo "
pldoras
Casa
men 1
men 2
men 3
Las pldoras se crean con <ul class="nav nav-pills">. Tambin marque la pgina actual con <li
class="active">:
Ejemplo
<ul class="nav nav-pills">
</ul>
Intntalo t mismo "
Pastillas verticales
Casa
men 1
men 2
men 3
Pldoras tambin se pueden visualizar verticalmente. Slo tiene que aadir la .nav-stackedclase:
Ejemplo
<ul class="nav nav-pills nav-stacked">

</ul>
Intntalo t mismo "
Pastillas verticales en una fila

Texto...
Texto...
Texto...
Casa
men 1
men 2
men 3
En el siguiente ejemplo, se coloca el men pldora verticales dentro de la ltima columna. As, en una gran
pantalla el men se mostrar a la derecha. Pero en una pequea pantalla, el contenido se ajustar
automticamente en un diseo de una sola columna:
Ejemplo

</ul>
</div>
Intntalo t mismo "
Pldoras Con men desplegable
Casa
men 1
men 2
men 3
Pldoras tambin pueden contener mens desplegables.
El siguiente ejemplo aade un men desplegable a "Men 1":
Ejemplo
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1

</ul>
</li>
</ul>
Intntalo t mismo "
Aqu y pldoras centradas
Casa
men 1
men 2
men 3
Para el centro / justificar las pestaas y las pldoras, utilice la .nav-justifiedclase.
Tenga en cuenta que en las pantallas ms pequeas 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>
Intntalo t mismo "
Conmutable / Dynamic aqu
Casa
men 1
men 2
men 3
CASA
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt
magna aliqua.
Para hacer el conmutable pestaas, aadir el data-toggle="tab"atributo para cada enlace. A continuacin,
agregue una.tab-paneclase con un identificador nico para cada pestaa y se envuelven dentro de
un <div>elemento con la clase.tab-content.
Si desea que las pestaas para aparecen y desaparecen al hacer clic sobre ellos, agregar la .fadeclase a .tabpane:
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>
Intntalo t mismo "
Pastillas conmutable / dinmicos

El mismo cdigo se aplica a las pastillas; Slo cambiar el atributo de conmutacin de datos para datatoggle="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>
Intntalo t mismo "

Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5 Ejercicio 6

Para una referencia completa de todas las opciones de la ficha, mtodos y eventos, visite nuestro Bootstrap JS
Tab Referencia .
Bootstrap barra de navegacin

Anterior
Siguiente captulo "
Barras de navegacin
Una barra de navegacin es una cabecera de navegacin que se coloca en la parte superior de la pgina:
Nombre del Sitio Web
Casa
Pgina 1
Pgina 2
Pgina 3
Con Bootstrap, una barra de navegacin se puede extender o contraer, dependiendo del tamao de la pantalla.
Una barra de navegacin estndar se crea con <nav class="navbar navbar-default">.
El siguiente ejemplo muestra cmo agregar una barra de navegacin en la parte superior de la pgina:
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>
...
Intntalo t mismo "
Todos los ejemplos en esta pgina se mostrar una barra de navegacin que ocupa demasiado espacio en
pantallas pequeas (sin embargo, la barra de navegacin estar en una sola lnea en las pantallas grandes porque es sensible Bootstrap). Este problema (con las pequeas pantallas) ser resuelto en el ltimo ejemplo
de esta pgina.
Invertida barra de navegacin

Si no te gusta el estilo de la barra de navegacin por defecto, Bootstrap ofrece una alternativa, negro barra de
navegacin:
Casa
Pgina 1
Pgina 2
Pgina 3
Slo cambia la .navbar-defaultclase en .navbar-inverse:
Ejemplo
<nav class="navbar navbar-inverse">
</div>
</ul>
</div>
</nav>
Intntalo t mismo "
Fijo barra de navegacin

La barra de navegacin tambin puede ser fijado en la parte superior o en la parte inferior de la pgina.
Una barra de navegacin fijo permanece visible en una posicin fija (superior o inferior) independiente de la
pgina de desplazamiento.
La .navbar-fixed-topclase hace que la barra de navegacin fijo en la parte superior:
Ejemplo
<nav class="navbar navbar-inverse navbar-fixed-top">
</div>
</ul>
</div>
</nav>
Intntalo t mismo "
La .navbar-fixed-bottomclase hace que la estancia barra de navegacin en la parte inferior:
Ejemplo
<nav class="navbar navbar-inverse navbar-fixed-bottom">
</div>

</ul>
</div>
</nav>
Intntalo t mismo "
Con la barra de navegacin desplegable

Casa
Pgina 1
Pgina 2
Pgina 3
Las barras de navegacin tambin pueden contener mens desplegables.
El siguiente ejemplo aade un men desplegable para el botn de "Pgina 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>
Intntalo t mismo "
Alineado a la derecha Barra de navegacin

Casa
Pgina 1
Pgina 2
Regstrate
Iniciar sesin
La .navbar-rightclase se utiliza para alineacin derecha botones de la barra de navegacin.

En el siguiente ejemplo insertamos un botn "Registrarse" y un botn de "Inicio de sesin" a la derecha en la
barra de navegacin. Tambin aadimos 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>
Intntalo t mismo "
El colapso de la barra de navegacin

La barra de navegacin ocupa demasiado espacio en una pequea pantalla.
Debemos ocultar la barra de navegacin; y mostrar slo cuando se necesita.
En el siguiente ejemplo la barra de navegacin se sustituye por un botn en la esquina superior derecha. Slo
cuando se hace clic en el botn, se mostrar la barra de navegacin:
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>
<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>
</div>
</nav>
Intntalo t mismo "

bootstrap Formas
Anterior
Siguiente captulo "
Ajustes por defecto de Bootstrap
Los controles de formulario automticamente reciben algo ms de estilo global con Bootstrap:
Todos los textos de <input>, <textarea>y <select>los elementos con class .form-controltiene una anchura
de 100%.
Diseo del formulario Bootstrap

Bootstrap ofrece tres tipos de diseo del formulario:
forma vertical (esto es por defecto)
forma horizontal
formulario en lnea
Disposiciones de referencia para los tres diseos de formulario:
Siempre use <form role="form">(ayuda a mejorar la accesibilidad para las personas que utilizan
lectores de pantalla)
Envolver las etiquetas y los controles de formulario en <div class="form-group"> (necesaria para la
separacin ptima)
Agregar la clase .form-controla todos textual <input>, <textarea>y <select>los elementos
Bootstrap Forma Vertical (predeterminado)

Email:
Contrasea:
Recurdame
Enviar
En el siguiente ejemplo se crea una forma vertical con dos campos de entrada, una casilla de verificacin, y un
botn de envo:
Ejemplo
<form role="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>
Intntalo t mismo "
Formulario en lnea de arranque

Email:
Contrasea:
Recurdame
Enviar
En una forma en lnea, todos los elementos estn en lnea, alineado a la izquierda, y las etiquetas son al lado.
Nota: Esto slo se aplica a las formas en las ventanas grficas que son al menos 768px de ancho!
regla adicional para un formulario en lnea:
Agregar la clase .form-inlinea la <form>elemento
El siguiente ejemplo crea un formulario en lnea con dos campos de entrada, una casilla de verificacin, y un
botn de confirmacin:
Ejemplo
<form class="form-inline" role="form">

<label for="email">Email address:</label>
</div>
</div>
</div>
</form>
Intntalo t mismo "
Consejo: Si no se incluye una etiqueta para cada entrada, los lectores de pantalla tendrn 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>
Intntalo t mismo "
Bootstrap Forma Horizontal

Email:
Contrasea:
Recurdame
Enviar
Una forma horizontal se distingue de las otras formas tanto en la cantidad de margen de beneficio, y en la
presentacin 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 cuadrcula predefinidos de uso de archivos de inicio para alinear las etiquetas y los grupos
de controles de formulario en una disposicin horizontal.
En el siguiente ejemplo se crea una forma horizontal con dos campos de entrada, una casilla de verificacin, y
un botn de confirmacin:
Ejemplo
<form class="form-horizontal" role="form">
<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>
Intntalo t mismo "
Bootstrap entradas de formulario

Anterior
Siguiente captulo "
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, contrasea, fecha y hora, fecha y hora
local, fecha, mes, hora, semana, nmero, correo electrnico, URL, bsqueda, tel, y color.
Nota: Las entradas no ser totalmente decoradas si el tipo no se declara correctamente!
Nombre:
Contrasea:
El siguiente ejemplo contiene dos elementos de entrada; uno de tipo texto y uno de contrasea:
Ejemplo
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div>
Intntalo t mismo "
rea de texto bootstrap

Comentario:
El siguiente ejemplo contiene un rea de texto:
Ejemplo
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Intntalo t mismo "
Las casillas de verificacin de arranque

Opcin 1
opcion 2
Opcin 3
Las casillas de verificacin se utilizan si desea que el usuario seleccionar cualquier nmero de opciones de una
lista de opciones predefinidas.
El siguiente ejemplo contiene tres casillas de verificacin. La ltima opcin 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>
Intntalo t mismo "
Utilice la .checkbox-inlineclase si desea que las casillas de verificacin para que aparezca en la misma lnea:
Opcin 1
opcion 2
Opcin 3
Ejemplo
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
Intntalo t mismo "
Los botones de opcin de arranque

Opcin 1
opcion 2
Opcin 3
Los botones de radio se utilizan si desea limitar al usuario slo una seleccin de una lista de opciones
predefinidas.
El siguiente ejemplo contiene tres botones de radio. La ltima opcin 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>
Intntalo t mismo "
Utilice la .radio-inlineclase si desea que los botones de seleccin para aparecer en la misma lnea:
Opcin 1
opcion 2
Opcin 3
Ejemplo
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
Intntalo t mismo "
Seleccione Lista de arranque
lista (seleccione uno) seleccione:

Lista de seleccin mltiple (ctrl espera o desplazamiento (o arrastrar con el ratn) para seleccionar ms de
una):
1
Listas de seleccin se utilizan si desea permitir al usuario elegir entre varias opciones.
El ejemplo siguiente contiene una lista desplegable (lista de seleccin):
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>
Intntalo t mismo "
Bootstrap Forma Entradas (ms)

Anterior
Siguiente captulo "
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>
Intntalo t mismo "
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 - Aadir un disabledatributo para desactivar un campo de entrada
Fieldsets DISCAPACIDAD - Aadir un disabledatributo a un conjunto de campos para desactivar todos

los controles al
ENTRADAS READONLY - Aadir un readonlyatributo a una entrada para impedir la entrada del usuario
VALIDACIN UNIDOS - Bootstrap incluye estilos de validacin para los mensajes de error, de
advertencia y de xito. Para utilizar, aadir .has-warning, .has-erroro .has-successal elemento padre
ICONOS - Usted puede agregar conos de respuesta con la .has-feedbackclase y un icono
ETIQUETAS OCULTOS - Aadir 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>
Intntalo t mismo "
Y aqu es un ejemplo de algunos de los estados de control de formulario en un formulario en lnea :
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 carrusel Plugin

Anterior
Siguiente captulo "
El carrusel Plugin
El plug-in del carrusel es un componente para el ciclismo a travs 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
1.
2.
3.
4.
La Canea
El ambiente en Chania tiene un toque de Florencia y Venecia.
AnteriorSiguiente
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).
Cmo crear un carrusel

El siguiente ejemplo muestra cmo crear un carrusel bsica:
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>
Intntalo t mismo "
ejemplo Explicacin
La ms 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 aade un efecto de transicin CSS y animacin, 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 animacin del carrusel inmediatamente
cuando se carga la pgina.
El "Indicadores" parte:
Los indicadores son los pequeos puntos en la parte inferior de cada diapositiva (que indica el nmero 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 identificacin del carrusel.
El data-slide-toatributo especifica que se deslizan para ir a, al hacer clic sobre el punto especfico.
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 imgenes.
La .activeclase tiene que ser aadido a una de las diapositivas. De lo contrario, el carrusel no ser visible.
La parte "controles izquierdo y derecho":
Este cdigo 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 posicin de la corredera en
relacin a su posicin actual.
Aadir ttulos a las diapositivas

Aadir <div class="carousel-caption">dentro de cada uno <div class="item">para crear un ttulo para
cada diapositiva:
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>
</ol>

<div class="carousel-inner" role="listbox">
<div class="item active">
<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 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>
Intntalo t mismo "
Bootstrap completar carrusel de referencia

Para una referencia completa de todas las opciones de carrusel, mtodos y eventos, visite nuestro Bootstrap JS
carrusel de referencia .
Bootstrap modal Plugin

Anterior
Siguiente captulo "
El modal Plugin
El plug-in Modal es una ventana de cuadro de dilogo / emergente que aparece en la parte superior de la
pgina actual:
Clic para abrir el modal

Tip: Los complementos pueden ser incluidos de forma individual (usando "modal.js" de rutina de carga de
Cmo crear un modal

El siguiente ejemplo muestra cmo crear un referente bsico:
Ejemplo

<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>
Intntalo t mismo "
ejemplo Explicacin
El "Trigger" parte:
Para activar la ventana modal, es necesario utilizar un botn o un enlace.
A continuacin, incluir los dos atributos Data- *:
data-toggle="modal" se abre la ventana modal
data-target="#myModal" apunta a la identificacin 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 aade un efecto de transicin 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>, aadir
el modal de encabezado, cuerpo y pie de pgina.
La .modal-headerclase 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 botn de cierre, y los .modal-titleestilos de clase de la cabecera con una lnea de altura adecuada.
La .modal-bodyclase se utiliza para definir el estilo para el cuerpo de la modal. Aadir cualquier tipo de cdigo
HTML aqu; prrafos, imgenes, vdeos, etc.
La .modal-footerclase se utiliza para definir el estilo del pie de pgina de la modal. Tenga en cuenta que esta
zona est alineado a la derecha de forma predeterminada.
Tamao modal
Cambiar el tamao de la modal mediante la adicin de la .modal-sm clase de los pequeos modales
o .modal-lgla clase de grandes modales.
Agregue la clase de tamao al <div>elemento con la clase .modal-dialog:
Pequeo modal
<div class="modal-dialog modal-sm">
Intntalo t mismo "
modal grande
<div class="modal-dialog modal-lg">
Intntalo t mismo "
Por defecto, los modales son de tamao medio.
Bootstrap completar modal de referencia

Para una referencia completa de todas las opciones modales, mtodos y eventos, visite nuestro Bootstrap JS
modal de referencia .
Bootstrap Tooltip Plugin

Anterior
Siguiente captulo "
La descripcin Plugin
El plug-in Tooltip es pequeo cuadro emergente que aparece cuando el usuario mueve el puntero del ratn
sobre un elemento:
Pase el ratn sobre m Pase el ratn sobre m
Tip: Los complementos pueden ser incluidos de forma individual (usando "tooltip.js" de rutina de carga de
Cmo crear un mensaje de ayuda

Para crear un texto de ayuda, aadir el data-toggle="tooltip" atributo a un elemento.
Utilice el titleatributo para especificar el texto que se debe mostrar el interior de la descripcin:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Nota: La informacin sobre herramientas se debe inicializar con jQuery: seleccionar el elemento especificado y
llamar altooltip()mtodo.
El siguiente cdigo permitir a todas las sugerencias en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Intntalo t mismo "
La informacin sobre herramientas de posicionamiento

Por defecto, la descripcin aparecer en la parte superior del elemento.
Utilice el data-placementatributo para establecer la posicin de la informacin de herramientas en la parte
superior, inferior, izquierdo o el lado derecho del elemento:
Ejemplo
<a
<a
<a
<a
href="#"
href="#"
href="#"
href="#"
data-toggle="tooltip"
Intntalo t mismo "
data-placement="top" title="Hooray!">Hover</a>
data-placement="bottom" title="Hooray!">Hover</a>
data-placement="left" title="Hooray!">Hover</a>
data-placement="right" title="Hooray!">Hover</a>
Consejo: Tambin puede utilizar el data-placementatributo con un valor de "auto", que le permitir al
navegador decidir la posicin de la informacin de herramientas. Por ejemplo, si el valor es "auto izquierda", la
descripcin se mostrar en el lado izquierdo, cuando sea posible, de otro modo a la derecha.
Informacin sobre la herramienta de referencia

completar Bootstrap
Para una referencia completa de todas las opciones de informacin sobre herramientas, mtodos y eventos,
visite nuestro Bootstrap JS Informacin sobre la herramienta de referencia .
Bootstrap Popover Plugin

Anterior
Siguiente captulo "
El Popover Plugin
El plug-in Popover es similar a la informacin 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 ms
contenido.
Haga clic para activar Popover Haga clic para activar Popover
Tip: Los complementos pueden ser incluidos de forma individual (usando "popover.js" de rutina de carga de
Cmo crear un Popover

Para crear un popover, aadir el data-toggle="popover" atributo a un elemento.
Utilice el titleatributo para especificar el texto de la cabecera de la popover, y utilizar el data-contentatributo
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 mtodo
popover ().
El siguiente cdigo permitir a todos los panecillos en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Intntalo t mismo "
Popovers de posicionamiento
Por defecto, el popover aparecer en el lado derecho del elemento.
Utilice el data-placementatributo para establecer la posicin de la popover en la parte superior, inferior,
izquierdo o el lado derecho del elemento:
Ejemplo
<a
<a
<a
<a
href="#"
href="#"
href="#"
href="#"
title="Header"
title="Header"
title="Header"
title="Header"
Intntalo t mismo "
data-toggle="popover"
data-placement="top" data-content="Content">Click</a>
data-placement="bottom" data-content="Content">Click</a>
data-placement="left" data-content="Content">Click</a>
data-placement="right" data-content="Content">Click</a>
Consejo: Tambin puede utilizar el atributo de ubicacin de los datos con un valor de "auto", que le permitir
al navegador decidir la posicin 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>
Intntalo t mismo "

Consejo: Si desea que el popover que se mostrar cuando se mueve el puntero del ratn sobre el elemento,
utiliza eldata-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>
Intntalo t mismo "
Bootstrap completar Popover Referencia

Para una referencia completa de todas las opciones popover, mtodos y eventos, visite nuestro Bootstrap JS
Popover de referencia .
Bootstrap Scrollspy Plugin (Avanzado)

Anterior
Siguiente captulo "
El Scrollspy Plugin
El plug-in Scrollspy se utiliza para actualizar automticamente los enlaces en una lista de navegacin basada en
la posicin de desplazamiento.
Cmo crear un Scrollspy
El siguiente ejemplo muestra cmo 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>
Intntalo t mismo "
ejemplo Explicacin
Aadir data-spy="scroll"al elemento que se debe utilizar como el rea de desplazamiento (a menudo este es
el<body>elemento).
A continuacin, aadir el data-targetatributo con un valor de la identificacin o el nombre de clase de la barra
de navegacin ( .navbar). Esto es para asegurarse de que la barra de navegacin 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 navegacin ( <div id="section1">los partidos <a href="#section1">).
El opcional data-offsetatributo especifica el nmero de pxeles para desplazar de arriba en el clculo de la
posicin de desplazamiento. Esto es til cuando se siente que los enlaces dentro de la barra de navegacin
cambia el estado activo demasiado pronto o demasiado pronto cuando se dirija a los elementos
desplazables. Por defecto es de 10 pxeles.
Requiere posicionamiento relativo: El elemento con datos de espionaje = "scroll" requiere que el
CSS posicin de propiedad, con un valor de "relativo" para que funcione correctamente.
Men Scrollspy Vertical

En este ejemplo, se utiliza pldoras de navegacin 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>
Intntalo t mismo "
Bootstrap completar Scrollspy Referencia
Para una referencia completa de todos los mtodos y eventos scrollspy, vaya a nuestro Bootstrap JS Scrollspy
de referencia .
Bootstrap Affix Plugin (Avanzado)

Anterior
Siguiente captulo "
El afijo Plugin
El plug-in permite Affix un elemento para convertirse en pegada (bloqueado) a un rea en la pgina. Esto se
utiliza a menudo con los mens de navegacin o botones de icono sociales, para que sean "pegan" en un rea
especfica mientras se desplaza arriba y abajo de la pgina.
El plug-in cambia este comportamiento dentro y fuera (cambia el valor de CSS positionpartir statica fixed),
dependiendo de la posicin de desplazamiento.
Ejemplo 1) Una barra de navegacin fijada:
Ejemplo 2) Una barra lateral fijada:
Con Affix, cuando nos desplazamos hacia arriba y abajo de la pgina, el men es siempre visible y bloqueada
en su posicin.
Cmo crear un men de navegacin Colocada

El siguiente ejemplo muestra cmo crear un men de navegacin horizontal fijada:
Ejemplo
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Intntalo t mismo "
El siguiente ejemplo muestra cmo crear un men de navegacin vertical, fijada:
Ejemplo
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Intntalo t mismo "
ejemplo Explicacin
Aadir data-spy="affix"al elemento que desea colocar.
Opcionalmente, aadir el data-offset-top|bottomatributo para calcular la posicin del desplazamiento.
Cmo funciona
El plug-in afijo alterna entre tres clases: .affix, .affix-top, y .affix-bottom. Cada clase representa un estado en
particular. Debe aadir propiedades CSS para manejar las posiciones reales, con la excepcin
de position:fixed la.affixclase.
El plugin aade el .affix-topo .affix-bottomclase para indicar el elemento se encuentra en su parte

superior la mayor parte o ltima posicin. Posicionamiento con CSS no es necesaria en este momento.
Desplazndose ms all del elemento fijada desencadena la colocacin real - esto es donde el plugin
reemplaza el.affix-topo .affix-bottomclase con las .affixclases (conjuntos position:fixed). En este
punto, se debe aadir el CSS top o bottompropiedad para posicionar el elemento situar en la pgina.
Si se define un desplazamiento inferior, desplazndose ms 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, aadir position:absolutecuando sea necesario.
En el primer ejemplo anterior, el plugin Affix agrega la .affixclase (position: fixed) al elemento <nav> cuando
hemos desplazado 197 pxeles desde la parte superior. Si abre el ejemplo, tambin ver que hemos aadido la
CSStoppropiedad con un valor de 0 a la .affixclase. Esto es para asegurarse de que la barra de navegacin se
mantiene en la parte superior de la pgina en todo momento, cuando nos hemos desplazado 197 pxeles desde
la parte superior.
Scrollspy y Affix
Utilizando el plugin de Affix junto con el Scrollspy plugin:
Men horizontal (barra de navegacin)

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Intntalo t mismo "
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>
Intntalo t mismo "
Bootstrap completar Affix Referencia
Para una referencia completa de todos afijo mtodos y eventos, visite nuestro Bootstrap JS Affix de referencia .

Bootstrap 3

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Bootstrap 3

Caricato da

Copyright:

Formati disponibili

Bootstrap Empieza

Bootstrap tambin le da la posibilidad de crear fcilmente diseos que responden

Cul es al diseo web?

Por qu utilizar Bootstrap?

Dnde obtener Bootstrap?

Bootstrap descarga de getbootstrap.com

Incluir Bootstrap de un CDN

Crear la primera pgina web con Bootstrap

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

Dos bsico Bootstrap Pginas

Sistema de Red de arranque

Las clases de cuadrcula

El sistema de red Bootstrap tiene cuatro clases:

md (para equipos de sobremesa)

lg (para equipos de sobremesa ms grandes)

Estructura bsica de una cuadrcula Bootstrap

Tres columnas iguales

Dos columnas desiguales

Bootstrap Texto / Tipografa

Ajustes por defecto de Bootstrap

Bootstrap valores predeterminados del navegador vs.

h1 Bootstrap heading (36px)

h3 heading secondary text

h5 heading secondary text

Intntalo t mismo "

Para mostrar la cotizacin a la derecha, utilice la .blockquote-reverseclase:

Intntalo t mismo "

Colores contextuales y Fondos

This text represents a warning.

Makes a paragraph stand out

Indicates smaller text (set to 85% of the size of the parent)

Indicates left-aligned text

Indicates center-aligned text

Indicates right-aligned text

Indicates justified text

Indicates no wrap text

Indicates lowercased text

Indicates uppercased text

Indicates capitalized text

Places all list items on a single line

Makes a <pre> element scrollable

Bootstrap completar la tipografa de referencia

Bootstrap tabla bsico

Intntalo t mismo "

Las filas de rayas

Intntalo t mismo "

Intntalo t mismo "

Las filas de la libracin

Intntalo t mismo "

Intntalo t mismo "

Las clases contextuales

Intntalo t mismo "

Aplica el color de la libracin de la fila de tabla o celda de tabla

Indica una accin exitosa o positivo

Indica un cambio informativo neutral o accin

Indica una advertencia de que podran necesitar atencin

Indica una accin peligrosa o potencialmente negativo

Intntalo t mismo "

Ponte a prueba con los ejercicios!

Bootstrap completar la tabla de referencia

Formas de imagen de archivos de inicio

Intntalo t mismo "