Está en la página 1de 167

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:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->


<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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.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>
</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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.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>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</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 class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</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 class="col-sm-4">.col-sm-4</div>
<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 class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</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)


h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
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>
<div class="col-md-4">
<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>
<div class="col-md-4">
<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:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->

<div class="embed-responsive embed-responsive-4by3">


<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Ponte a prueba con los ejercicios!


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="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>

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>
<div class="container">
<p>This is some text.</p>
<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">&times;</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 "

Ponte a prueba con los ejercicios!


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 "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4

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">
<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 "

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">
<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 "

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 class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>


</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>

Intntalo t mismo "

Botn de anidacin Grupos y mens desplegables


manzanaSamsung
Sony
grupos de botones nido para crear mens desplegables:

Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">

<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
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<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 "

Ponte a prueba con los ejercicios!


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 "

Ponte a prueba con los ejercicios!


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>
label-default">New</span></h2>
label-default">New</span></h3>
label-default">New</span></h4>
label-default">New</span></h5>
label-default">New</span></h6>

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 "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4

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">
<div class="progress-bar" role="progressbar" aria-valuenow="70"

aria-valuemin="0" aria-valuemax="100" style="width: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">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width: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">
<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">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>

</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
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">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
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">
<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 "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4

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
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

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
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>

<li class="disabled"><a href="#">4</a></li>


<li><a href="#">5</a></li>
</ul>
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 "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5

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 "

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 .

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
<ul class="list-group">
<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
<div class="list-group">
<a href="#" class="list-group-item active">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 "

artculo discapacitados
El grupo siguiente lista tiene un elemento deshabilitado:

Primer elementoSegundo elementoTercer punto


Para desactivar un elemento, agregue la .disabledclase:

Ejemplo
<div class="list-group">
<a href="#" class="list-group-item disabled">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 "

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
<ul class="list-group">
<li class="list-group-item
<li class="list-group-item
<li class="list-group-item
<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
<div class="list-group">
<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>


<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
Intntalo t mismo "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5

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 panel-default">
<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 panel-default">
<div class="panel-body">Panel Content</div>
<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 class="panel panel-default">
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel Content</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 "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5

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 "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5

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">
Lorem ipsum dolor text....
</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">
Lorem ipsum dolor text....
</div>

Intntalo t mismo "

panel que puede contraerse

panel que puede contraerse

El siguiente ejemplo muestra un panel desplegable:

Ejemplo
<div class="panel-group">
<div class="panel panel-default">
<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
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<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">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<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>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<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>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<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>
</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>


<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</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>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</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

<ul class="nav nav-tabs">


<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
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">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
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">
<li class="active"><a href="#">Home</a></li>

<li><a href="#">Menu 1</a></li>


<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
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
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#">Home</a></li>


<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
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
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">

<li><a href="#">Submenu 1-1</a></li>


<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
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

<!-- Centered Tabs -->


<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
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
<ul class="nav nav-tabs">
<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>

<div id="menu2" class="tab-pane fade">


<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</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>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>

</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Intntalo t mismo "

Ponte a prueba con los ejercicios!


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

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 .
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="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>

</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</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:

Nombre del Sitio Web

Casa

Pgina 1

Pgina 2

Pgina 3
Slo cambia la .navbar-defaultclase en .navbar-inverse:

Ejemplo
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</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 class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</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 class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>

<ul class="nav navbar-nav">


<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Intntalo t mismo "

Con la barra de navegacin desplegable


Nombre del Sitio Web

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

<nav class="navbar navbar-inverse">


<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Intntalo t mismo "

Alineado a la derecha Barra de navegacin


Nombre del Sitio Web

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
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</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
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>

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


<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</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 "

Ponte a prueba con los ejercicios!


Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4

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>
<div class="form-group">
<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">


<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<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 "
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
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" 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 "

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">
<div class="form-group">
<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>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">


<button type="submit" class="btn btn-default">Submit</button>
</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
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Intntalo t mismo "

rea de texto bootstrap


Comentario:

El siguiente ejemplo contiene un rea de texto:

Ejemplo
<div class="form-group">
<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
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<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>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</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>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</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
<div class="form-group">
<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
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<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
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Focused</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Click to focus">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
</div>

<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<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>
<div class="col-sm-10">
<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>
<div class="col-sm-10">
<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>
<div class="col-sm-10">
<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
<form class="form-inline" role="form">
<div class="form-group">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<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">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<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>
<!-- Left and right controls -->
<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">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<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">
<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_flower.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<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
archivos individuales), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js").

Cmo crear un modal


El siguiente ejemplo muestra cmo crear un referente bsico:

Ejemplo
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</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
archivos individuales), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js").

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"
data-toggle="tooltip"
data-toggle="tooltip"
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
archivos individuales), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js").

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-toggle="popover"
data-toggle="popover"
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
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<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="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<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 .