Bootstrap - Guía rápida

¿Qué es Twitter Bootstrap?

Bootstrap es un marco de primer front-end móvil elegante, intuitivo y potente para un desarrollo web más rápido y sencillo. Utiliza HTML, CSS y Javascript.

Historia

Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter . Fue lanzado como un producto de código abierto en agosto de 2011 en GitHub.

¿Por qué utilizar Bootstrap?

• Mobile first approach - Bootstrap 3, el marco consiste en los primeros estilos móviles en toda la biblioteca en lugar de en archivos separados.

• Browser Support - Es compatible con todos los navegadores populares.

• Easy to get started- Con solo el conocimiento de HTML y CSS, cualquiera puede comenzar con Bootstrap. Además, el sitio oficial de Bootstrap tiene una buena documentación.

• Responsive design- El CSS sensible de Bootstrap se ajusta a computadoras de escritorio, tabletas y móviles. Más sobre el diseño receptivo se encuentra en el capítulo Bootstrap Responsive Design.

• Proporciona una solución limpia y uniforme para crear una interfaz para desarrolladores.

• Contiene componentes incorporados hermosos y funcionales que son fáciles de personalizar.

• También proporciona personalización basada en web.

• Y lo mejor de todo es que es de código abierto.

¿Qué incluye el paquete Bootstrap?

• ScaffoldingBootstrap proporciona una estructura básica con sistema de cuadrícula, estilos de enlace y antecedentes. Esto se trata en detalle en la secciónBootstrap Basic Structure

• CSSBootstrap viene con la función de configuración CSS global, elementos HTML fundamentales con estilo y mejorados con clases extensibles y un sistema de cuadrícula avanzado. Esto se cubre en detalle en la secciónBootstrap with CSS.

• ComponentsBootstrap contiene más de una docena de componentes reutilizables creados para proporcionar iconografía, menús desplegables, navegación, alertas, ventanas emergentes y mucho más. Esto se cubre en detalle en la secciónLayout Components.

• JavaScript Plugins- Bootstrap contiene más de una docena de complementos personalizados de jQuery. Puede incluirlos todos fácilmente, o uno por uno. Esto se cubre en detalles en la secciónBootstrap Plugins.

• Customize - Puede personalizar los componentes de Bootstrap, MENOS variables y complementos de jQuery para obtener su propia versión.

Es muy fácil de configurar y comenzar a usar Bootstrap. Este capítulo explicará cómo descargar y configurar Bootstrap. También discutiremos la estructura de archivos Bootstrap y demostraremos su uso con un ejemplo.

Descarga Bootstrap

Puede descargar la última versión de Bootstrap desde https://getbootstrap.com/. Cuando haga clic en este enlace, verá una pantalla como la siguiente:

Aquí puede ver dos botones:

• Download Bootstrap- Al hacer clic aquí, puede descargar las versiones precompiladas y minimizadas de Bootstrap CSS, JavaScript y fuentes. No se incluye documentación ni archivos de código fuente original.

• Download Source - Al hacer clic aquí, puede obtener el último Bootstrap LESS y el código fuente de JavaScript directamente desde GitHub.

Si trabaja con el código fuente sin compilar de Bootstrap, debe compilar los archivos LESS para producir archivos CSS utilizables. Para la compilación de archivos MENOS en CSS, Bootstrap admite oficialmente sólo Receso , que es hinter CSS de Twitter basado en less.js .

Para una mejor comprensión y facilidad de uso, usaremos la versión precompilada de Bootstrap a lo largo del tutorial. A medida que los archivos se compilan y minimizan, no tiene que preocuparse cada vez de incluir archivos separados para la funcionalidad individual. En el momento de escribir este tutorial, se descargó la última versión (Bootstrap 3).

Estructura de archivo

Bootstrap precompilado

Una vez que se descargue la versión compilada de Bootstrap, extraiga el archivo ZIP y verá la siguiente estructura de archivo / directorio:

Como puede ver, hay CSS y JS compilados (bootstrap. *), Así como CSS y JS compilados y minificados (bootstrap.min. *). Se incluyen fuentes de Glyphicons, ya que es el tema Bootstrap opcional.

Código fuente de Bootstrap

Si ha descargado el código fuente de Bootstrap, la estructura del archivo sería la siguiente:

• Los archivos en less / , js / y fonts / son el código fuente de Bootstrap CSS, JS y las fuentes de iconos (respectivamente).

• La carpeta dist / incluye todo lo que se enumera en la sección de descarga precompilada anterior.

• docs-assets / , examples / y todos los archivos * .html son documentación de Bootstrap.

Plantilla HTML

Una plantilla HTML básica que usa Bootstrap se vería así:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Aquí puedes ver el jquery.js, bootstrap.min.js y bootstrap.min.cssarchivos que se incluyen para crear un archivo HTM normal en la plantilla Bootstrapped. Solo asegúrese de incluir la biblioteca jQuery antes de incluir la biblioteca Bootstrap.

Más detalles sobre cada uno de los elementos de este código anterior se discutirán en el capítulo Descripción general de Bootstrap CSS .

Ejemplo

Ahora probemos un ejemplo usando la plantilla anterior. Pruebe el siguiente ejemplo usando la opción de demostración en vivo disponible en la esquina superior derecha del cuadro de código de muestra a continuación en nuestro sitio web:

<h1>Hello, world!</h1>

En todos los capítulos siguientes hemos utilizado texto ficticio del sitio https://www.lipsum.com/.

En este capítulo discutiremos el sistema Bootstrap Grid.

¿Qué es una cuadrícula?

Según lo expresado por wikepedia:

En diseño gráfico, una cuadrícula es una estructura (generalmente bidimensional) formada por una serie de líneas rectas (verticales, horizontales) que se cruzan y que se utilizan para estructurar el contenido. Se utiliza ampliamente para diseñar el diseño y la estructura de contenido en el diseño de impresión. En diseño web, es un método muy eficaz para crear un diseño coherente de forma rápida y eficaz utilizando HTML y CSS.

En pocas palabras, las cuadrículas en el diseño web organizan y estructuran el contenido, hacen que los sitios web sean fáciles de escanear y reducen la carga cognitiva de los usuarios.

¿Qué es Bootstrap Grid System?

Como lo indica la documentación oficial de Bootstrap para el sistema de cuadrícula:

Bootstrap incluye un primer sistema de cuadrícula de fluidos móvil y receptivo que escala adecuadamente hasta 12 columnas a medida que aumenta el tamaño del dispositivo o la ventana gráfica. Incluye clases predefinidas para opciones de diseño fáciles, así como potentes mixins para generar diseños más semánticos.

Entendamos la declaración anterior. Bootstrap 3 es móvil primero en el sentido de que el código para Bootstrap ahora comienza apuntando a pantallas más pequeñas como dispositivos móviles, tabletas, y luego "expande" componentes y cuadrículas para pantallas más grandes como computadoras portátiles, computadoras de escritorio.

Estrategia móvil primero

• Content

  • Determina qué es lo más importante.

• Layout

  • Diseñe primero a anchos más pequeños.
  • El dispositivo móvil de la dirección CSS base primero; Dirección de consultas de medios para tabletas, computadoras de escritorio.

• Progressive Enhancement

  • Agregue elementos a medida que aumenta el tamaño de la pantalla.

Funcionamiento del sistema Bootstrap Grid

Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido. Así es como funciona el sistema de cuadrícula Bootstrap:

• Las filas deben colocarse dentro de un .container class para una alineación y un relleno adecuados.

• Utilice filas para crear grupos horizontales de columnas.

• El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser los hijos inmediatos de las filas.

• Clases de cuadrícula predefinidas como .row and .col-xs-4están disponibles para realizar rápidamente diseños de cuadrícula. LESS mixins también se pueden utilizar para diseños más semánticos.

• Las columnas crean medianiles (espacios entre el contenido de la columna) mediante el relleno. Ese relleno se compensa en filas para la primera y la última columna mediante un margen negativo en.rows.

• Las columnas de la cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres.col-xs-4.

Preguntas de los medios

La consulta de medios es un término muy elegante para "regla CSS condicional". Simplemente aplica algo de CSS, basado en ciertas condiciones establecidas. Si se cumplen esas condiciones, se aplica el estilo.

Las consultas de medios en Bootstrap le permiten mover, mostrar y ocultar contenido según el tamaño de la ventana gráfica. Las siguientes consultas de medios se utilizan en archivos LESS para crear los puntos de interrupción clave en el sistema de cuadrícula Bootstrap.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Ocasionalmente, estos se amplían para incluir un max-width para limitar CSS a un conjunto más reducido de dispositivos.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Las consultas de medios tienen dos partes, una especificación de dispositivo y luego una regla de tamaño. En el caso anterior, se establece la siguiente regla:

Consideremos esta línea:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Para todos los dispositivos, sin importar el tipo con ancho mínimo: @ screen-sm-min si el ancho de la pantalla es menor que @ screen-sm-max , entonces haga algo .

Opciones de cuadrícula

La siguiente tabla resume aspectos de cómo funciona el sistema de cuadrícula Bootstrap en múltiples dispositivos:

Estructura de cuadrícula básica

A continuación se muestra la estructura básica de la cuadrícula Bootstrap:

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

<div class = "container">
   ....
</div>

Veamos algunos ejemplos de cuadrículas simples:

• Ejemplo: apilado en horizontal

• Ejemplo: dispositivo mediano y grande

• Ejemplo: dispositivos móviles, tabletas, computadoras de escritorio

Se restablece la columna receptiva

Con los cuatro niveles de cuadrículas disponibles, es probable que se encuentre con problemas en los que, en ciertos puntos de interrupción, las columnas no se borran del todo bien ya que una es más alta que la otra. Para arreglar eso, use una combinación de una clase.clearfixy las clases de utilidad receptivas como se muestra en el siguiente ejemplo:

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>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.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Esto producirá el siguiente resultado:

Cambie el tamaño de su ventana gráfica o compruébelo en su teléfono para obtener el resultado deseado de este ejemplo.

Columnas compensadas

Las compensaciones son una característica útil para diseños más especializados. Se pueden usar para empujar las columnas para obtener más espacio (por ejemplo). los.col-xs = * las clases no admiten compensaciones, pero se replican fácilmente utilizando una celda vacía.

Para usar compensaciones en pantallas grandes, use el .col-md-offset-*clases. Estas clases aumentan el margen izquierdo de una columna en* columnas donde * intervalo de 1 a 11.

En el siguiente ejemplo, tenemos <div class = "col-md-6"> .. </div>, centraremos esto usando class .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

Esto producirá el siguiente resultado:

Columnas anidadas

Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .row y conjunto de .col-md-* columnas dentro de un existente .col-md-*columna. Las filas anidadas deben incluir un conjunto de columnas que sumen 12.

En el siguiente ejemplo, el diseño tiene dos columnas, y la segunda se divide en cuatro cuadros en dos filas.

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

Esto producirá el siguiente resultado:

Orden de columnas

Otra buena característica del sistema de cuadrícula Bootstrap es que puede escribir fácilmente las columnas en un orden y mostrarlas en otro. Puede cambiar fácilmente el orden de las columnas de la cuadrícula incorporadas con.col-md-push-* y .col-md-pull-* clases modificadoras donde * intervalo de 1 a 11.

En el siguiente ejemplo, tenemos un diseño de dos columnas, siendo la columna de la izquierda la más estrecha y actuando como barra lateral. Intercambiaremos el orden de estas columnas usando.col-md-push-* y .col-md-pull-* clases.

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

Esto producirá el siguiente resultado:

Este capítulo proporciona una descripción general de las piezas clave de la infraestructura de Bootstrap, incluido el enfoque de Bootstrap para un desarrollo web mejor, más rápido y más sólido.

Tipo de documento HTML5

Bootstrap hace uso de ciertos elementos HTML y propiedades CSS que requieren el uso del tipo de documento HTML5. Por lo tanto, incluya el siguiente fragmento de código para el tipo de documento HTML5 al comienzo de todos sus proyectos con Bootstrap.

<!DOCTYPE html>
<html>
   ....
</html>

Móvil primero

Desde que se lanzó Bootstrap 3, Bootstrap se ha convertido en móvil primero. Significa que los estilos 'móviles primero' se pueden encontrar en toda la biblioteca en lugar de ellos en archivos separados. Necesitas agregar elviewport meta tag al <head> elemento, para garantizar una representación adecuada y el zoom táctil en dispositivos móviles.

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

• La propiedad width controla el ancho del dispositivo. Establecerlo en el ancho del dispositivo asegurará que se procese en varios dispositivos (móviles, computadoras de escritorio, tabletas ...) correctamente.

• initial-scale = 1.0 asegura que cuando se cargue, su página web se renderizará a una escala de 1: 1 y no se aplicará ningún zoom de forma inmediata.

Añadir user-scalable = no al contentatributo para deshabilitar las capacidades de zoom en dispositivos móviles como se muestra a continuación. Los usuarios solo pueden desplazarse y no hacer zoom con este cambio, y hace que su sitio se sienta un poco más como una aplicación nativa.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalmente se usa la escala máxima = 1.0 junto con escalable por el usuario = no . Como se ha mencionado más arribauser-scalable = no puede brindar a los usuarios una experiencia más parecida a una aplicación nativa, por lo que Bootstrap no recomienda usar este atributo.

Imágenes receptivas

Bootstrap 3 le permite hacer que las imágenes respondan agregando una clase .img-responsive al <img>etiqueta. Esta clase se aplicamax-width: 100%; y height: auto; a la imagen para que se adapte bien al elemento principal.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Tipografía y enlaces

Bootstrap establece una visualización global básica (fondo), tipografía y estilos de enlace:

• Basic Global display- Establece el color de fondo: #fff; en el elemento <body> .

• Typography- Utiliza los atributos @ font-family-base , @ font-size-base y @ line-height-base como base tipográfica.

• Link styles- Establece el color del enlace global a través del atributo @ link-color y aplica el subrayado del enlace solo en : hover .

Si tiene la intención de utilizar LESS código, puede encontrar todos estos dentro de scaffolding.less .

Normalizar

Bootstrap usa Normalize para establecer la coherencia entre navegadores.

Normalize.css es una alternativa moderna y lista para HTML5 a los restablecimientos de CSS. Es un pequeño archivo CSS que proporciona una mejor coherencia entre navegadores en el estilo predeterminado de los elementos HTML.

Contenedores

Clase de uso .container para envolver el contenido de una página y centrar fácilmente el contenido como se muestra a continuación.

<div class = "container">
   ...
</div>

Eche un vistazo al .containerclase en el archivo bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Tenga en cuenta que, debido al relleno y los anchos fijos, los contenedores no se pueden encajar de forma predeterminada.

Eche un vistazo al archivo bootstrap.css :

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Aquí puede ver que CSS tiene consultas de medios para contenedores con width. Esto ayuda a aplicar la capacidad de respuesta y dentro de ellos, la clase de contenedor se modifica en consecuencia para representar el sistema de cuadrícula correctamente.

Bootstrap usa Helvetica Neue, Helvetica, Arial y sans-serif en su pila de fuentes predeterminada. Con la función de tipografía de Bootstrap, puede crear títulos, párrafos, listas y otros elementos en línea. Veamos aprender cada uno de estos en las siguientes secciones.

Encabezados

Todos los encabezados HTML (h1 a h6) tienen estilo en Bootstrap. A continuación se muestra un ejemplo:

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

El segmento de código anterior con Bootstrap producirá el siguiente resultado:

Subtítulos en línea

Para agregar un subtítulo en línea a cualquiera de los encabezados, simplemente agregue <pequeño> alrededor de cualquiera de los elementos o agregue .small class y obtendrá un texto más pequeño en un color más claro como se muestra en el siguiente ejemplo:

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

El segmento de código anterior con Bootstrap producirá el siguiente resultado:

Copia del cuerpo principal

Para agregar algo de énfasis a un párrafo, agregue class = "lead". Esto le dará un tamaño de fuente más grande, un peso más ligero y una altura de línea más alta como en el siguiente ejemplo:

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

Énfasis

Las etiquetas de énfasis predeterminadas de HTML, como <pequeño>, establecen el texto en un 85% del tamaño del padre, <strong> enfatiza un texto con un peso de fuente más pesado y <em> enfatiza un texto en cursiva.

Bootstrap ofrece algunas clases que pueden usarse para enfatizar los textos, como se ve en el siguiente ejemplo:

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Abreviaturas

El elemento HTML <abbr> proporciona marcado para abreviaturas o acrónimos, como WWW o HTTP. Bootstrap estiliza los elementos <abbr> con un borde punteado claro en la parte inferior y revela el texto completo al pasar el mouse (siempre que agregue ese texto al atributo de título <abbr>). Para obtener un tamaño de fuente un poco más pequeño, agregue .initialism a <abbr>.

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Direcciones

Con la etiqueta <dirección> puede mostrar la información de contacto en su página web. Dado que la <dirección> muestra por defecto: bloque; necesitarás usar

Etiquetas para agregar saltos de línea al texto de la dirección adjunta.

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

Blockquotes

Puede utilizar el <blockquote> predeterminado alrededor de cualquier texto HTML. Otras opciones incluyen, agregar una etiqueta <small> para identificar la fuente de la cita y alinear a la derecha el blockquote usando class .pull-right . El siguiente ejemplo demuestra todas estas características:

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Liza

Bootstrap admite listas ordenadas, listas desordenadas y listas de definición.

• Ordered lists - Una lista ordenada es una lista que se encuentra en algún tipo de orden secuencial y está precedida por números.

• Unordered lists- Una lista desordenada es una lista que no tiene ningún orden en particular y que tradicionalmente tiene un estilo con viñetas. Si no desea que aparezcan las viñetas, puede eliminar el estilo utilizando la clase .list-unstyled . También puede colocar todos los elementos de la lista en una sola línea usando la clase .list-inline .

• Definition lists- En este tipo de lista, cada elemento de la lista puede constar de los elementos <dt> y <dd>. <dt> significa término de definición y, como un diccionario, este es el término (o frase) que se está definiendo. Posteriormente, <dd> es la definición de <dt>. Puede hacer que los términos y descripciones en <dl> se alineen uno al lado del otro usando la clase dl-horizontal .

El siguiente ejemplo demuestra cada uno de estos tipos:

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

Bootstrap le permite mostrar código con dos formas clave diferentes:

• La primera es la etiqueta <code>. Si va a mostrar código en línea, debe usar la etiqueta <code>.

• El segundo es la etiqueta <pre>. Si el código debe mostrarse como un elemento de bloque independiente o si tiene varias líneas, entonces debe usar la etiqueta <pre>.

Asegúrese de que cuando use las etiquetas <pre> y <code>, use las variantes Unicode para las etiquetas de apertura y cierre: &lt; y &gt;.

Veamos un ejemplo a continuación:

<p><code>&lt;header&gt;</code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use &lt;pre&gt; tag as:</p>

<pre>
   &lt;article&gt;
      &lt;h1&gt;Article Heading&lt;/h1&gt;
   &lt;/article&gt;
</pre>

Bootstrap proporciona un diseño limpio para crear tablas. Algunos de los elementos de la tabla compatibles con Bootstrap son:

Mesa básica

Si desea un estilo de tabla agradable y básico con solo un poco de relleno ligero y divisores horizontales, agregue la clase base de .table a cualquier tabla como se muestra en el siguiente ejemplo:

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

Clases de mesa opcionales

Junto con el marcado de la tabla base y la clase .table, hay algunas clases adicionales que puede usar para diseñar el marcado. Las siguientes secciones le darán una idea de todas estas clases.

Mesa de rayas

Al agregar la clase .table-striped , obtendrá rayas en las filas dentro de <tbody> como se ve en el siguiente ejemplo:

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Mesa bordeada

Al agregar la clase .table-bordered , obtendrá bordes que rodean cada elemento y esquinas redondeadas alrededor de toda la tabla como se ve en el siguiente ejemplo:

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Tabla flotante

Al agregar la clase .table-hover , se agregará un fondo gris claro a las filas mientras el cursor se desplaza sobre ellas, como se ve en el siguiente ejemplo:

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Mesa condensada

Al agregar la clase .table-condensada , el relleno de filas se corta a la mitad para condensar la mesa. como se ve en el siguiente ejemplo. Esto es útil si desea información más densa.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Clases contextuales

Las clases contextuales que se muestran en la siguiente tabla le permitirán cambiar el color de fondo de las filas de su tabla o celdas individuales.

Estas clases se pueden aplicar a <tr>, <td> o <th>.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Tablas receptivas

Al envolver cualquier .table en la clase .table-responsive , hará que la tabla se desplace horizontalmente hasta dispositivos pequeños (menos de 768px). Cuando visualice en algo más grande que 768px de ancho, no verá ninguna diferencia en estas tablas.

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>

En este capítulo, estudiaremos cómo crear formularios con facilidad utilizando Bootstrap. Bootstrap lo hace fácil con el marcado HTML simple y las clases extendidas para diferentes estilos de formularios. En este capítulo estudiaremos cómo crear formularios fácilmente usando Bootstrap.

Diseño de formulario

Bootstrap le proporciona los siguientes tipos de diseños de formularios:

• Forma vertical (predeterminada)
• Formulario en línea
• Forma horizontal

Forma vertical o básica

La estructura de formulario básica viene con Bootstrap; los controles de formulario individuales reciben automáticamente un estilo global. Para crear un formulario básico, haga lo siguiente:

• Agregue un formulario de rol al elemento primario <form>.

• Envuelva las etiquetas y los controles en un <div> con la clase .form-group . Esto es necesario para un espaciado óptimo.

• Agregue una clase de .form-control a todos los elementos textuales <input>, <textarea> y <select>.

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Formulario en línea

Para crear un formulario donde todos los elementos están alineados, alineados a la izquierda y las etiquetas están al lado, agregue la clase .form-inline a la etiqueta <form>.

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

• Por defecto, las entradas, selecciones y áreas de texto tienen un ancho del 100% en Bootstrap. Debe establecer un ancho en los controles del formulario cuando utilice un formulario en línea.

• Usando la clase .sr-only , puede ocultar las etiquetas de los formularios en línea.

Forma horizontal

Las formas horizontales se distinguen de las demás no solo en la cantidad de marcado, sino también en la presentación del formulario. Para crear un formulario que utilice el diseño horizontal, haga lo siguiente:

• Agregue una clase de .form-horizontal al elemento padre <form>.

• Envuelva las etiquetas y los controles en un <div> con la clase .form-group .

• Agregue una clase de .control-label a las etiquetas.

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </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">Sign in</button>
      </div>
   </div>
	
</form>

Controles de formulario admitidos

Bootstrap admite de forma nativa los controles de formulario más comunes, principalmente entrada, área de texto, casilla de verificación, radio y selección.

Entradas

El campo de texto de formulario más común es el campo de entrada. Aquí es donde los usuarios ingresarán la mayoría de los datos esenciales del formulario. Bootstrap ofrece soporte para todos los tipos de entrada HTML5 nativos: texto, contraseña, fecha y hora, fecha y hora local, fecha, mes, hora, semana, número, correo electrónico, url, búsqueda, teléfono y color . Se requiere una declaración de tipo adecuada para que las entradas tengan un estilo completo.

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Textarea

El área de texto se usa cuando necesita varias líneas de entrada. Cambie el atributo de filas según sea necesario (menos filas = cuadro más pequeño, más filas = cuadro más grande).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Casillas de verificación y botones de opción

Las casillas de verificación y los botones de opción son excelentes cuando desea que los usuarios elijan de una lista de opciones predeterminadas.

• Al crear un formulario, use la casilla de verificación si desea que el usuario seleccione cualquier número de opciones de una lista. Utilice la radio si desea limitar al usuario a una sola selección.

• Utilice la clase .checkbox-inline o .radio-inline para que aparezcan una serie de casillas de verificación o radios para los controles en la misma línea.

El siguiente ejemplo muestra ambos tipos (predeterminado e integrado):

<label for = "name">Example of Default Checkbox and radio button </label>

<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 = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Selecciona

Se utiliza una selección cuando desea permitir que el usuario elija entre varias opciones, pero de forma predeterminada solo permite una.

• Utilice <seleccionar> para las opciones de lista con las que el usuario está familiarizado, como estados o números.

• Utilice multiple = "multiple" para permitir que los usuarios seleccionen más de una opción.

El siguiente ejemplo muestra ambos tipos (selectos y múltiples):

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Control estático

Utilice la clase .form-control-static en un <p>, cuando necesite colocar texto sin formato junto a una etiqueta de formulario dentro de un formulario horizontal.

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

Estados de control de formulario

Además del estado : focus (es decir, un usuario hace clic en la entrada o pestañas en ella), Bootstrap ofrece estilo para entradas y clases deshabilitadas para la validación de formularios.

Enfoque de entrada

Cuando una entrada recibe : foco , el contorno de la entrada se elimina y se aplica una sombra de cuadro .

Entradas deshabilitadas

Si necesita deshabilitar una entrada, simplemente agregar el atributo deshabilitado no solo lo deshabilitará; también cambiará el estilo y el cursor del mouse cuando el cursor se sitúe sobre el elemento.

Fieldsets deshabilitados

Agregue el atributo deshabilitado a un <fieldset> para deshabilitar todos los controles dentro del <fieldset> a la vez.

Estados de validación

Bootstrap incluye estilos de validación para errores, advertencias y mensajes de éxito. Para usarlo, simplemente agregue la clase apropiada ( .has-warning, .has-error o .has-success ) al elemento padre.

El siguiente ejemplo demuestra todos los estados de control de formulario:

<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 = "This is focused...">
      </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" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div> 
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label"> 
            Disabled select menu (Fieldset disabled)
         </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">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

Tamaño de control de formulario

Puede establecer alturas y anchos de formularios utilizando clases como .input-lg y .col-lg- * respectivamente. El siguiente ejemplo demuestra esto:

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

texto de ayuda

Los controles de formulario de Bootstrap pueden tener un texto de ayuda a nivel de bloque que fluye con las entradas. Para agregar un bloque de contenido de ancho completo, use el .help-block después de <input>. El siguiente ejemplo demuestra esto:

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>

Este capítulo cubre la edad de uso del botón Bootstrap con ejemplos. Cualquier cosa que tenga una clase de.btnheredará el aspecto predeterminado de un botón gris con esquinas redondeadas. Sin embargo, Bootstrap proporciona algunas opciones para diseñar botones, que se resumen en la siguiente tabla:

El siguiente ejemplo demuestra todas las clases de botones anteriores:

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Tamaño del botón

La siguiente tabla resume las clases utilizadas para obtener botones de varios tamaños:

El siguiente ejemplo demuestra esto:

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Estado del botón

Bootstrap proporciona clases que le permiten cambiar el estado de los botones como activo, deshabilitado, etc., cada uno de los cuales se describe en las siguientes secciones.

Estado activo

Los botones aparecerán presionados (con un fondo más oscuro, un borde más oscuro y una sombra insertada) cuando estén activos. La siguiente tabla resume las clases utilizadas para activar elementos de botón y elementos de anclaje:

El siguiente ejemplo demuestra esto:

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Estado discapacitado

Cuando deshabilita un botón, su color se desvanecerá en un 50% y perderá el degradado.

La siguiente tabla resume las clases utilizadas para desactivar el elemento de botón y el elemento de anclaje:

El siguiente ejemplo demuestra esto:

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Etiquetas de botón

Puede usar clases de botones con el elemento <a>, <button> o <input>. Pero se recomienda que lo use con elementos <button> principalmente para evitar problemas de inconsistencia entre navegadores.

El siguiente ejemplo demuestra esto:

<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">

Este capítulo cubre el soporte de Bootstrap para imágenes. Bootstrap proporciona tres clases que se pueden usar para aplicar algunos estilos simples a las imágenes:

• .img-rounded- agrega radio de borde: 6px para dar a la imagen esquinas redondeadas.

• .img-circle- redondea toda la imagen agregando border-radius: 500px .

• .img-thumbnail - agrega un poco de relleno y un borde gris -

El siguiente ejemplo demuestra esto:

<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">

Este capítulo trata sobre algunas de las clases auxiliares de Bootstrap que pueden resultar útiles.

Cerrar icono

Utilice el icono de cierre genérico para descartar contenido como modales y alertas. Usa la claseclose para obtener el icono de cierre.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Carets

Utilice signos de intercalación para indicar la dirección y la funcionalidad del menú desplegable. Para obtener esta funcionalidad use la clasecaret con un elemento <span>.

<p>Caret Example<span class = "caret"></span></p>

Flotadores rápidos

Puedes hacer flotar un elemento a la izquierda o derecha con class pull-left o pull-right respectivamente, el siguiente ejemplo demuestra esto.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>

Para alinear componentes en barras de navegación con clases de utilidad, use .navbar-left o .navbar-righten lugar. Consulte el capítulo de la barra de navegación para obtener más detalles.

Bloques de contenido central

Clase de uso center-block para poner un elemento en el centro.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

Para limpiar el flotador de cualquier elemento, use el .clearfix clase.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

Mostrar y ocultar contenido

Puede forzar que un elemento se muestre u oculte (incluso para lectores de pantalla) con el uso de clases .show y .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Contenido del lector de pantalla

Puede ocultar un elemento a todos los dispositivos excepto a los lectores de pantalla con la clase .sr-only.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <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" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

Aquí podemos ver que a la etiqueta de ambos tipos de entrada se le asigna la clase sr-only, por lo tanto, las etiquetas solo serán visibles para los lectores de pantalla.

Bootstrap proporciona algunas clases de ayuda para un desarrollo más rápido compatible con dispositivos móviles. Estos se pueden usar para mostrar y ocultar contenido por dispositivo a través de una consulta de medios, combinados con dispositivos grandes, pequeños y medianos.

Úselos con moderación y evite crear versiones completamente diferentes del mismo sitio. Responsive utilities are currently only available for block and table toggling.

Clases de impresión

La siguiente tabla enumera las clases de impresión. Úselos para alternar el contenido para imprimir.

Ejemplo

El siguiente ejemplo demuestra el uso de las clases auxiliares enumeradas anteriormente. Cambie el tamaño de su navegador o cargue el ejemplo en diferentes dispositivos para probar las clases de utilidad de respuesta.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks indica que el elemento está visible en su ventana gráfica actual.

Este capítulo discutirá sobre Glyphicons, su uso y algunos ejemplos. Bootstrap incluye 200 glifos en formato de fuente. Entendamos ahora qué son los glifos.

¿Qué son los glifos?

Los glifos son fuentes de iconos que puede utilizar en sus proyectos web. Los Glyphicons Halflings no son gratuitos y requieren licencia, sin embargo, su creador los ha puesto a disposición para proyectos Bootstrap sin costo alguno.

"Se recomienda, como agradecimiento, le pedimos que incluya un enlace opcional a GLYPHICONS siempre que sea práctico". - Documentación de Bootstrap

¿Dónde encontrar Glyphicons?

Ahora que hemos descargado la versión Bootstrap 3.xy entendemos su estructura de directorios en el capítulo Configuración del entorno , los glifos se pueden encontrar dentro de la carpeta de fuentes . Contiene los siguientes archivos:

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

Las reglas CSS asociadas están presentes en los archivos bootstrap.css y bootstrap-min.css dentro de la carpeta css de la carpeta dist . Puedes ver los glifos disponibles en este enlace GLYPHICONS .

Uso

Para usar los íconos, simplemente use el siguiente código en cualquier lugar de su código. Deje un espacio entre el icono y el texto para un relleno adecuado.

<span class = "glyphicon glyphicon-search"></span>

El siguiente ejemplo demuestra esto:

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

Este capítulo destacará los menús desplegables de Bootstrap. Los menús desplegables son menús contextuales que se pueden alternar para mostrar enlaces en un formato de lista. Esto se puede hacer interactivo con el complemento JavaScript desplegable .

Para usar el menú desplegable, simplemente envuelva el menú desplegable dentro de la clase .dropdownEl siguiente ejemplo muestra un menú desplegable básico:

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Opciones

Alineación

Alinee el menú desplegable a la derecha agregando la clase .pull-right a .dropdown-menu. El siguiente ejemplo demuestra esto:

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Encabezados

Puede agregar un encabezado para etiquetar secciones de acciones en cualquier menú desplegable usando la clase dropdown-header. El siguiente ejemplo demuestra esto:

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation" >
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

Los grupos de botones permiten apilar varios botones en una sola línea. Esto es útil cuando desea colocar elementos como botones de alineación juntos. Puede agregar un comportamiento de estilo de casilla de verificación y radio de JavaScript opcional con el complemento de botón de Bootstrap .

La siguiente tabla resume las clases importantes que Bootstrap proporciona para usar grupos de botones:

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button1</button>
   <button type = "button" class = "btn btn-default">Button2</button>
</div>

<div class = "btn-toolbar" role = "toolbar">
   <div class = "btn-group">...</div>
   <div class = "btn-group">...</div>
</div>

<div class = "btn-group btn-group-lg">...</div>
<div class = "btn-group btn-group-sm">...</div>
<div class = "btn-group btn-group-xs">...</div>

<div class = "btn-group-vertical">
   ...
</div>

Grupo de botones básico

El siguiente ejemplo demuestra el uso de class .btn-group discutido en la tabla anterior -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Barra de herramientas de botones

El siguiente ejemplo demuestra el uso de class .btn-toolbar discutido en la tabla anterior -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Tamaño del botón

El siguiente ejemplo demuestra el uso de class .btn-group-* discutido en la tabla anterior -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Anidamiento

Puede anidar grupos de botones dentro de otro grupo de botones, es decir, colocar un .btn-group dentro de otro .btn-group . Esto se hace cuando desea que los menús desplegables se mezclen con una serie de botones.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Buttongroup vertical

El siguiente ejemplo demuestra el uso de class .btn-group-vertical discutido en la tabla anterior -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Este capítulo discutirá cómo agregar un menú desplegable a los botones usando clases de Bootstrap. Para agregar un menú desplegable a un botón, simplemente ajuste el botón y el menú desplegable en un.btn-group. También puede utilizar <span class = "caret"> </span> para actuar como indicador de que el botón es un menú desplegable.

El siguiente ejemplo muestra los menús desplegables básicos de un solo botón:

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Default 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      Primary 
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Menú desplegable de botones divididos

Los menús desplegables de botones divididos utilizan el mismo estilo general que el botón desplegable, pero agregan una acción principal junto con el menú desplegable. Los botones divididos tienen la acción principal a la izquierda y un interruptor a la derecha que muestra el menú desplegable.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Default</button>
   
   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary">Primary</button>
   
   <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
      <span class = "caret"></span>
      <span class = "sr-only">Toggle Dropdown</span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

Tamaño desplegable del botón

Puede utilizar los menús desplegables con cualquier tamaño de botón: .btn-large, .btn-sm, o .btn-xs.

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
      Default
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
      Primary
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
</div>

<div class = "btn-group">
   <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
      Success
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Action</a></li>
      <li><a href = "#">Another action</a></li>
      <li><a href = "#">Something else here</a></li>
      
      <li class = "divider"></li>
      <li><a href = "#">Separated link</a></li>
   </ul>
   
</div>

Variación Dropup

Los menús también se pueden crear para desplegar hacia arriba en lugar de hacia abajo. Para lograr esto, simplemente agregue.dropup a los padres .btn-group envase.

<div class = "row" style = "margin-left:50px; margin-top:200px">
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Default
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
   <div class = "btn-group dropup">
      <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
         Primary
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu" role = "menu">
         <li><a href = "#">Action</a></li>
         <li><a href = "#">Another action</a></li>
         <li><a href = "#">Something else here</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </div>
   
</div>

Este capítulo explica una característica más que admite Bootstrap, los grupos de entrada. Los grupos de entrada son controles de formulario ampliados . Con los grupos de entrada, puede anteponer y agregar fácilmente texto o botones a las entradas basadas en texto.

Al agregar contenido antepuesto y adjunto a un campo de entrada, puede agregar elementos comunes a la entrada del usuario. Por ejemplo, puede agregar el símbolo del dólar, la @ para un nombre de usuario de Twitter o cualquier otra cosa que pueda ser común para la interfaz de su aplicación.

Para anteponer o agregar elementos a un .form-control-

• Envuélvalo en un <div> con clase .input-group

• Como siguiente paso, dentro de ese mismo <div>, coloque su contenido adicional dentro de un <span> con clase .input-group-addon.

• Ahora coloque este <span> antes o después del elemento <input>.

Para la compatibilidad entre navegadores, evite usar elementos <select> aquí, ya que no se pueden diseñar completamente en los navegadores WebKit. Tampoco aplique clases de grupo de entrada directamente para formar grupos. Un grupo de entrada es un componente aislado.

Grupo de entrada básico

El siguiente ejemplo demuestra el grupo de entrada básico:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>
		
      <br>
      
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
   
</div>

Tamaño del grupo de entrada

Puede cambiar el tamaño de los grupos de entrada, agregando las clases de tamaño de formulario relativo como .input-group-lg, input-group-sm, input-group-xs al .input-groupsí mismo. El contenido dentro cambiará de tamaño automáticamente.

Los siguientes ejemplos demuestran esto:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

Casillas de verificación y complementos de radio

Puede anteponer o agregar botones de opción y casillas de verificación en lugar de texto como se muestra en el siguiente ejemplo:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "radio">
               </span>
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Complementos de botón

Incluso puede agregar o agregar botones en grupos de entrada. En vez de.input-group-addon class, necesitarás usar class .input-group-btnpara envolver los botones. Esto es necesario debido a que los estilos de navegador predeterminados no se pueden anular. Los siguientes ejemplos demuestran esto:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
					
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               
               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Botones con desplegables

Se pueden agregar botones con menús desplegables en grupos de entrada simplemente envolviendo el botón y el menú desplegable en un .input-group-btn class como se demuestra en el siguiente ejemplo:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
               <input type = "text" class = "form-control">
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown">
                     DropdownMenu 
                     <span class = "caret"></span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!-- /btn-group -->
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Botones segmentados

Para segmentar los menús desplegables de botones en grupos de entrada, utilice el mismo estilo general que el botón desplegable, pero agregue una acción principal junto con el menú desplegable, como se puede ver en el siguiente ejemplo:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default" 
                     tabindex = "-1">Dropdown Menu</button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href ="#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
                  
               </div><!-- /btn-group -->
               <input type = "text" class = "form-control">
               
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 --><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">
                  
                  <button type = "button" class = "btn btn-default" tabindex = "-1">
                     Dropdown Menu
                  </button>
                  
                  <button type = "button" class = "btn btn-default dropdown-toggle" 
                     data-toggle = "dropdown" tabindex = "-1">
                     
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>
                  
                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>
                     
                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               
               </div><!-- /btn-group -->
            </div><!-- /input-group -->
         </div><!-- /.col-lg-6 -->
         
      </div><!-- /.row -->
   </form>
   
</div>

Bootstrap proporciona algunas opciones diferentes para diseñar elementos de navegación. Todos comparten el mismo marcado y clase base,.nav. Bootstrap también proporciona una clase de ayuda para compartir marcas y estados. Intercambia clases de modificadores para cambiar entre cada estilo.

Navegación tabular o pestañas

Para crear un menú de navegación con pestañas:

• Comience con una lista básica desordenada con la clase base de .nav

• Agregar clase .nav-tabs.

El siguiente ejemplo demuestra esto:

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Navegación de pastillas

Pastillas basicas

Para convertir las pestañas en píldoras, siga los mismos pasos anteriores, use la clase .nav-pills en vez de .nav-tabs.

El siguiente ejemplo demuestra esto:

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Pastillas verticales

Puede apilar las píldoras verticalmente usando la clase .nav-stacked junto con las clases - .nav, .nav-pills.

El siguiente ejemplo demuestra esto:

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Navegación justificada

Puede crear pestañas o píldoras de anchos iguales a los de su padre en pantallas de más de 768 px usando class .nav-justified junto con .nav, .nav-tabs o .nav, .nav-pillsrespectivamente. En pantallas más pequeñas, los enlaces de navegación se apilan.

El siguiente ejemplo demuestra esto:

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Enlaces deshabilitados

Para cada uno de los .nav clases, si agrega el .disabled clase, creará un enlace gris que también deshabilita la :hover estado como se muestra en el siguiente ejemplo:

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Esta clase solo cambiará la apariencia de <a>, no su funcionalidad. Utilice JavaScript personalizado para deshabilitar los enlaces aquí.

Listas deplegables

Los menús de navegación comparten una sintaxis similar con los menús desplegables. De forma predeterminada, tiene un elemento de lista que tiene un ancla que funciona junto con algunos atributos de datos para activar una lista desordenada con un.dropdown-menu clase.

Pestañas con menús desplegables

Para agregar menús desplegables a la pestaña:

• Comience con una lista básica desordenada con la clase base de .nav

• Agregar la clase .nav-tabs.

• Ahora agregue una lista desordenada con un .dropdown-menu clase.

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Pastillas con menús desplegables

Para hacer lo mismo con las píldoras, simplemente cambie el .nav-tabs clase con .nav-pills como se muestra en el siguiente ejemplo.

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

La barra de navegación es una de las características destacadas de los sitios Bootstrap. Las barras de navegación son componentes "meta" receptivos que sirven como encabezados de navegación para su aplicación o sitio. Las barras de navegación se colapsan en las vistas móviles y se vuelven horizontales a medida que aumenta el ancho de la ventana gráfica disponible. En esencia, la barra de navegación incluye estilos para los nombres de los sitios y navegación básica.

Barra de navegación predeterminada

Para crear una barra de navegación predeterminada:

• Agregar las clases .navbar, .navbar-default a la etiqueta <nav>.

• Añadir role = "navigation" al elemento anterior, para ayudar con la accesibilidad.

• Agregar una clase de encabezado .navbar-headeral elemento <div>. Incluir un elemento <a> con clasenavbar-brand. Esto le dará al texto un tamaño un poco más grande.

• Para agregar enlaces a la barra de navegación, simplemente agregue una lista desordenada con las clases de .nav, .navbar-nav.

El siguiente ejemplo demuestra esto:

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

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Barra de navegación receptiva

Para agregar funciones receptivas a la barra de navegación, el contenido que desea que se contraiga debe estar envuelto en un <div> con clases .collapse, .navbar-collapse. La naturaleza colapsada es disparada por un botón que tiene la clase de.navbar-toggley luego presenta dos elementos de datos. El primero,data-toggle, se usa para decirle al JavaScript qué hacer con el botón, y el segundo, data-target, indica qué elemento alternar. Luego con una clase .icon-barCrea lo que nos gusta llamar el botón de hamburguesa. Esto alternará los elementos que están en el .nav-collapse<div>. Para que esta característica funcione, debe incluir el complemento Bootstrap Collapse .

El siguiente ejemplo demuestra esto:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
	
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Formularios en Navbar

En lugar de usar los formularios predeterminados basados ​​en clases de los formularios de Bootstrap del capítulo , formularios que están en la barra de navegación, use el.navbar-formclase. Esto asegura que la alineación vertical adecuada del formulario y el comportamiento contraído en ventanas estrechas. Utilice las opciones de alineación (explicadas en la sección Alineación de componentes) para decidir dónde reside dentro del contenido de la barra de navegación.

El siguiente ejemplo demuestra esto:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
         <button type = "submit" class = "btn btn-default">Submit</button>
         
      </form>    
   </div>
   
</nav>

Botones en Navbar

Puedes agregar botones usando clase .navbar-btn a los elementos <button> que no residen en un <form> para centrarlos verticalmente en la barra de navegación. .navbar-btn se puede utilizar en elementos <a> y <input>.

No utilice .navbar-btnni las clases de botones estándar en elementos <a> dentro .navbar-nav.

El siguiente ejemplo demuestra esto:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
			
         <button type = "submit" class = "btn btn-default">Submit Button</button>
      </form>  
		
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
</nav>

Texto en la barra de navegación

Para envolver cadenas de texto en un elemento, use la clase .navbar-text. Esto se usa generalmente con la etiqueta <p> para el interlineado y el color adecuados. El siguiente ejemplo demuestra esto:

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
</nav>

Enlaces que no son de navegación

Si desea utilizar los enlaces estándar que no están dentro del componente de navegación de la barra de navegación normal, utilice la clase navbar-link para agregar colores adecuados para las opciones de la barra de navegación predeterminada e inversa, como se muestra en el siguiente ejemplo:

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as 
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
</nav>

Alineación de componentes

Puede alinear los componentes como enlaces de navegación, formularios, botones o texto a la izquierda o la derecha en una barra de navegación usando las clases de utilidad.navbar-left o .navbar-right. Ambas clases agregarán un flotante CSS en la dirección especificada. El siguiente ejemplo demuestra esto:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      
      <!--Left Align-->
      <ul class = "nav navbar-nav navbar-left">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form> 
      
      <p class = "navbar-text navbar-left">Left align-Text</p>
      
      <!--Right Align-->
      <ul class = "nav navbar-nav navbar-right">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form> 
		
      <p class = "navbar-text navbar-right">Right align-Text</p>
      
   </div>
</nav>

Fijo hacia arriba

La barra de navegación Bootstrap puede ser dinámica en su posicionamiento. De forma predeterminada, es un elemento a nivel de bloque que toma su posición en función de su ubicación en el HTML. Con algunas clases de ayuda, puede colocarlo en la parte superior o inferior de la página, o puede hacer que se desplace estáticamente con la página.

Si desea que la barra de navegación esté fija en la parte superior, agregue clase .navbar-fixed-top al .navbar class. El siguiente ejemplo demuestra esto:

Para evitar que la barra de navegación se coloque encima de otro contenido en el cuerpo de la página, agregue al menos 50 píxeles de relleno a la etiqueta <body> o pruebe sus propios valores.

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Fijado a la parte inferior

Si desea que la barra de navegación esté fija en la parte inferior de la página, agregue la clase .navbar-fixed-bottom al .navbar class. El siguiente ejemplo demuestra esto:

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class ="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Parte superior estática

Para crear una barra de navegación que se desplaza con la página, agregue el .navbar-static-topclase. Esta clase no requiere agregar el relleno al <body>.

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
				
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Barra de navegación invertida

Para crear una barra de navegación invertida con un fondo negro y con texto blanco, simplemente agregue el .navbar-inverse clase a la .navbar class como se demuestra en el siguiente ejemplo:

Para evitar que la barra de navegación se coloque encima de otro contenido en el cuerpo de la página, agregue al menos 50 píxeles de relleno a la etiqueta <body> o pruebe sus propios valores.

<nav class = "navbar navbar-inverse" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Las rutas de navegación son una excelente manera de mostrar información basada en jerarquías para un sitio. En el caso de los blogs, las rutas de navegación pueden mostrar las fechas de publicación, categorías o etiquetas. Indican la ubicación de la página actual dentro de una jerarquía de navegación.

Una ruta de navegación en Bootstrap es simplemente una lista desordenada con una clase de .breadcrumb. CSS agrega automáticamente el separador (bootstrap.min.css) a través de la siguiente clase:

.breadcrumb > li + li:before {
   color: #CCCCCC;
   content: "/ ";
   padding: 0 5px;
}

El siguiente ejemplo demuestra migas de pan:

<ol class = "breadcrumb">
   <li><a href = "#">Home</a></li>
   <li><a href = "#">2013</a></li>
   <li class = "active">November</li>
</ol>

Este capítulo trata sobre la función de paginación que admite Bootstrap. Bootstrap maneja la paginación, una lista desordenada como muchos otros elementos de la interfaz.

Paginación

La siguiente tabla enumera las clases que Bootstrap proporciona para manejar la paginación.

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>

<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Paginación predeterminada

El siguiente ejemplo demuestra el uso de class .pagination discutido en la tabla anterior -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <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>
   <li><a href = "#">&raquo;</a></li>
</ul>

Estados

El siguiente ejemplo demuestra el uso de class .disabled, .active discutido en la tabla anterior -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Dimensionamiento

El siguiente ejemplo demuestra el uso de clases para dimensionar, .pagination-* discutido en la tabla anterior -

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <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>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <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>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <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>
   <li><a href = "#">&raquo;</a></li>
</ul>

Buscapersonas

Si necesita crear enlaces de paginación simples que vayan más allá del texto, el buscapersonas puede funcionar bastante bien. Al igual que los enlaces de paginación, el buscapersonas es una lista desordenada. Por defecto, los enlaces están centrados. La siguiente tabla enumera las clases que Bootstrap proporciona para el localizador.

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Localizador predeterminado

El siguiente ejemplo demuestra el uso de class .pager discutido en la tabla anterior -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

Enlaces alineados

El siguiente ejemplo demuestra el uso de clases para alineación, .previous, .next discutido en la tabla anterior -

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Estados

El siguiente ejemplo demuestra el uso de class .disabled discutido en la tabla anterior -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Este capítulo cubre las etiquetas Bootstrap. Las etiquetas son excelentes para ofrecer recuentos, sugerencias u otro marcado para las páginas. Clase de uso.label para mostrar etiquetas como se muestra en el siguiente ejemplo:

<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>

Puede modificar la apariencia de las etiquetas usando las clases de modificadores como, label-default, label-primary, label-success, label-info, label-warning, label-danger como se muestra en el siguiente ejemplo:

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

Este capítulo discutirá sobre las insignias de Bootstrap. Las insignias son similares a las etiquetas; la principal diferencia es que las esquinas están más redondeadas.

Las insignias se utilizan principalmente para resaltar elementos nuevos o no leídos. Para usar insignias solo agrega<span class = "badge"> a enlaces, navegadores Bootstrap y más.

El siguiente ejemplo demuestra esto:

<a href = "#">Mailbox <span class = "badge">50</span></a>

Cuando no hay elementos nuevos o sin leer, las insignias simplemente se colapsarán a través de CSS :empty selector, siempre que no exista contenido dentro.

Estados de navegación activos

Puede colocar insignias en estados activos de navegación de píldoras y listas. Puede lograr esto colocando<span class = "badge"> a enlaces activos, como se demuestra en el siguiente ejemplo:

<h4>Example for Active State in Pill </h4>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
   <li><a href = "#">Profile</a></li>
   <li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>

<br>

<h4>Example for Active State in navigations</h4>

<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
   <li class = "active">
      <a href = "#">
         <span class = "badge pull-right">42</span>
         Home
      </a>
   </li>
	
   <li><a href = "#">Profile</a></li>
	
   <li>
      <a href = "#">
         <span class = "badge pull-right">3</span>
         Messages
      </a>
   </li>
</ul>

Este capítulo discutirá una característica más que Bootstrap admite, el Jumbotron. Como sugiere el nombre, este componente opcionalmente puede aumentar el tamaño de los encabezados y agregar mucho margen para el contenido de la página de destino. Para usar el Jumbotron -

• Cree un contenedor <div> con la clase de .jumbotron.

• Además de un <h1> más grande, el peso de la fuente se reduce a 200px.

El siguiente ejemplo demuestra esto:

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Para obtener un jumbotron de ancho completo, y sin esquinas redondeadas, use el .jumbotron clase fuera de todos .container clases y en su lugar agregue un .container dentro, como se muestra en el siguiente ejemplo:

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

El encabezado de la página es una característica pequeña y agradable para agregar el espacio apropiado alrededor de los encabezados de una página. Esto es particularmente útil en una página web donde puede tener varios títulos de publicaciones y necesita una forma de agregar distinción a cada uno de ellos. Para usar un encabezado de página, envuelva su encabezado en un <div> con una clase de.page-header -

<div class = "page-header">
   <h1>
      Example page header 
      <small>Subtext for header</small>
   </h1>
</div>

<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>

Este capítulo trata sobre las miniaturas de Bootstrap. Muchos sitios necesitan una forma de diseñar imágenes, videos, texto, etc., en una cuadrícula, y Bootstrap tiene una manera fácil de hacerlo con miniaturas. Para crear miniaturas usando Bootstrap:

• Agregue una etiqueta <a> con la clase de .thumbnail alrededor de una imagen.

• Esto agrega cuatro píxeles de relleno y un borde gris.

• Al pasar el mouse, un resplandor animado delinea la imagen.

El siguiente ejemplo muestra una miniatura predeterminada:

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </a>
   </div>
</div>

Agregar contenido personalizado

Ahora que tenemos una miniatura básica, es posible agregar cualquier tipo de contenido HTML como encabezados, párrafos o botones en las miniaturas. Siga los pasos a continuación:

• Cambie la etiqueta <a> que tiene una clase de .thumbnail a un <div>.

• Dentro de ese <div>, puede agregar cualquier cosa que necesite. Como se trata de un <div>, podemos usar la convención de nomenclatura predeterminada basada en el intervalo para el tamaño.

• Si desea agrupar varias imágenes, colóquelas en una lista desordenada y cada elemento de la lista flotará hacia la izquierda.

El siguiente ejemplo demuestra esto:

<div class = "row">
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role =" button">
               Button
            </a>
         </p>
      </div>
   </div>
   
   <div class = "col-sm-6 col-md-3">
      <div class = "thumbnail">
         <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
      </div>
      
      <div class = "caption">
         <h3>Thumbnail label</h3>
         <p>Some sample text. Some sample text.</p>
         
         <p>
            <a href = "#" class = "btn btn-primary" role = "button">
               Button
            </a> 
            
            <a href = "#" class = "btn btn-default" role = "button">
               Button
            </a>
         </p>
      </div>
   </div>
</div>

Este capítulo discutirá sobre las alertas y las clases que Bootstrap proporciona para las alertas. Las alertas proporcionan una manera de dar estilo a los mensajes para el usuario. Proporcionan mensajes de retroalimentación contextual para las acciones típicas de los usuarios.

Puede agregar un icono de cierre opcional para alertar. Para el despido en línea, use el complemento Alerts jQuery .

Puede agregar una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (p. ej., .alert-success, .alert-info, .alert-warning, .alert-danger). El siguiente ejemplo demuestra esto:

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Alertas de despido

Para crear una alerta de despido:

• Agregue una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (p. ej., .alert-success, .alert-info, .alert-warning, .alert-danger)

• También agregue opcional .alert-dismissable a la clase <div> anterior.

• Agrega un botón de cierre.

El siguiente ejemplo demuestra esto:

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Asegúrese de utilizar el elemento <button> con el atributo de datos data-dispats = "alert" .

Enlaces en alertas

Para obtener enlaces en alertas:

• Agregue una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (p. ej., .alert-success, .alert-info, .alert-warning, .alert-danger)

• Utilizar el .alert-link clase de utilidad para proporcionar rápidamente enlaces de colores coincidentes dentro de cualquier alerta.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>

Este capítulo trata sobre las barras de progreso de Bootstrap. El propósito de las barras de progreso es mostrar que los activos se están cargando, en progreso o que se está realizando una acción con respecto a los elementos de la página.

Las barras de progreso usan transiciones y animaciones CSS3 para lograr algunos de sus efectos. Estas funciones no son compatibles con Internet Explorer 9 y versiones anteriores de Firefox. Opera 12 no admite animaciones.

Barra de progreso predeterminada

Para crear una barra de progreso básica:

• Agrega un <div> con una clase de .progress.

• A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar.

• Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.

Veamos un ejemplo a continuación:

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barra de progreso alternativa

Para crear una barra de progreso con diferentes estilos:

• Agrega un <div> con una clase de .progress.

• A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar y clase progress-bar-* donde * podría estar success, info, warning, danger.

• Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.

Veamos un ejemplo a continuación:

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </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: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra de progreso a rayas

Para crear una barra de progreso rayada:

• Agrega un <div> con una clase de .progress y .progress-striped.

• A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar y clase progress-bar-* donde * podría estar success, info, warning, danger.

• Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.

Veamos un ejemplo a continuación:

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra de progreso animada

Para crear una barra de progreso animada:

• Agrega un <div> con una clase de .progress y .progress-striped. También agrega clase.active a .progress-striped.

• A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar.

• Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.

Esto animará las rayas de derecha a izquierda.

Veamos un ejemplo a continuación:

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barra de progreso apilada

Incluso puede apilar varias barras de progreso. Coloque las múltiples barras de progreso en el mismo.progress para apilarlos como se ve en el siguiente ejemplo -

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>

Este capítulo trata sobre el objeto Media. Estos son estilos de objetos abstractos para construir varios tipos de componentes (como comentarios de blogs, tweets, etc.) que presentan una imagen alineada a la izquierda o alineada a la derecha junto con el contenido textual. El objetivo del objeto de medios es hacer que el código para desarrollar estos bloques de información sea drásticamente más corto.

El objetivo de los objetos multimedia (marcado ligero, fácil ampliación) se logra aplicando clases a algunos de los marcados simples. Hay dos formas para el objeto multimedia:

• .media - Esta clase permite hacer flotar un objeto multimedia (imágenes, video y audio) a la izquierda o derecha de un bloque de contenido.

• .media-list- Si está preparando una lista donde los elementos serán parte de una lista desordenada, use una clase. útil para hilos de comentarios o listas de artículos.

Veamos un ejemplo a continuación del objeto multimedia predeterminado:

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
</div>

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
   </a>
   
   <div class = "media-body">
      <h4 class = "media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      
      <div class = "media">
         <a class = "pull-left" href = "#">
            <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
         </a>
         
         <div class = "media-body">
            <h4 class = "media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
      </div>
   </div>
</div>

Veamos un ejemplo de lista de medios:

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
			
         <p>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </p>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               
               <!-- Nested media object -->
               <div class = "media">
                  <a class = "pull-left" href = "#">
                     <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                        alt = "Generic placeholder image">
                  </a>
                  
                  <div class = "media-body">
                     <h4 class = "media-heading">Nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>
               </div>
            </div>
         </div>
         
         <!-- Nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>
            
            <div class = "media-body">
               <h4 class = "media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>
         </div>
      </div>
   </li>
   
   <li class = "media">
      <a class = "pull-right" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" 
            alt = "Generic placeholder image">
      </a>
      
      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>
   </li>
</ul>

El propósito del componente de grupo de lista es representar contenido complejo y personalizado en listas. Para obtener un grupo de lista básico:

• Agregar la clase .list-group al elemento <ul>.

• Agregar clase .list-group-item a <li>.

El siguiente ejemplo demuestra esto:

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   <li class = "list-group-item">24*7 support</li>
   <li class = "list-group-item">Renewal cost per year</li>
</ul>

Agregar insignias al grupo de listas

Podemos agregar el componente de insignias a cualquier elemento del grupo de lista y se colocará automáticamente a la derecha. Solo agrega<span class = "badge">dentro del elemento <li>. El siguiente ejemplo demuestra esto:

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      24*7 support
   </li>
   
   <li class = "list-group-item">Renewal cost per year</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      Disocunt Offer
   </li>
</ul>

Vinculación de elementos de grupo de lista

Al usar las etiquetas de anclaje en lugar de los elementos de la lista, podemos vincular los grupos de la lista. Necesitamos usar <div> en lugar del elemento <ul>. El siguiente ejemplo demuestra esto:

<a href = "#" class = "list-group-item active">
   Free Domain Name Registration
</a>

<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>

Agregar contenido personalizado al grupo de listas

Podemos agregar cualquier contenido HTML a los grupos de listas vinculados anteriores. El siguiente ejemplo demuestra esto:

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Starter Website Package
      </h4>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         24*7 support
      </h4>
      
      <p class = "list-group-item-text">
         We provide 24*7 support.
      </p>
   </a>
</div>

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Business Website Package
      </h4>
   </a>
   
   <a href = "#" class="list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">24*7 support</h4>
      <p class = "list-group-item-text">We provide 24*7 support.</p>
   </a>
</div>

Este capítulo discutirá sobre los paneles Bootstrap. Los componentes del panel se utilizan cuando desea poner su componente DOM en una caja. Para obtener un panel básico, simplemente agregue clase.panelal elemento <div>. También agrega clase.panel-default a este elemento como se muestra en el siguiente ejemplo:

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panel con encabezado

Hay dos formas de agregar un encabezado de panel:

• Utilizar .panel-heading class para agregar fácilmente un contenedor de encabezado a su panel.

• Utilice cualquier <h1> - <h6> con un .panel-title class para agregar un encabezado prediseñado.

El siguiente ejemplo demuestra ambas formas:

<div class = "panel panel-default">
   <div class = "panel-heading">
      Panel heading without title
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">
         Panel With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Panel con pie de página

Puede agregar pies de página a los paneles, ajustando botones o texto secundario en una clase que contenga <div> .panel-footer. El siguiente ejemplo demuestra esto.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

Los pies de página del panel no heredan colores y bordes cuando se utilizan variaciones contextuales, ya que no están destinados a estar en primer plano.

Alternativas contextuales del panel

Utilice clases de estado contextuales como, panel-primary, panel-success, panel-info, panel-warning, panel-danger, para hacer un panel más significativo para un contexto particular.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Panel con Mesas

Para obtener una tabla sin bordes dentro de un panel, use la clase .tabledentro del panel. Suponga que hay un <div> que contiene.panel-body, agregamos un borde adicional a la parte superior de la mesa para la separación. Si no hay <div> que contenga.panel-body, luego el componente se mueve del encabezado del panel a la mesa sin interrupción.

El siguiente ejemplo demuestra esto:

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

Panel con grupos de lista

Puede incluir grupos de listas dentro de cualquier panel. Crea un panel agregando clase.panelal elemento <div>. También agrega clase.panel-defaulta este elemento. Ahora, dentro de este panel, incluya sus grupos de listas. Puede aprender a crear un grupo de lista desde el capítulo Grupos de lista .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>

Un pozo es un contenedor en <div> que hace que el contenido aparezca hundido o un efecto de inserción en la página. Para crear un pozo, simplemente envuelva el contenido que le gustaría que aparezca en el pozo con un <div> que contenga la clase de.well. El siguiente ejemplo muestra un pozo predeterminado:

<div class = "well">Hi, am in well !!</div>

Dimensionamiento

Puede cambiar el tamaño del pozo usando las clases opcionales como, well-lg o well-lg. Estas clases se utilizan junto con.wellclase. Estos afectan el acolchado, haciendo que el pozo sea más grande o más pequeño según la clase.

<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>

Los componentes discutidos en los capítulos anteriores bajo Layout Componentsson solo el comienzo. Bootstrap viene con 12 complementos de jQuery que amplían las funciones y pueden agregar más interacción a su sitio. Para comenzar con los complementos de JavaScript de Bootstrap, no necesita ser un desarrollador avanzado de JavaScript. Al utilizar Bootstrap Data API, la mayoría de los complementos se pueden activar sin escribir una sola línea de código.

Los complementos de Bootstrap se pueden incluir en su sitio de dos formas:

• Individually- Uso de archivos * .js individuales de Bootstrap . Algunos complementos y componentes CSS dependen de otros complementos. Si incluye plugins individualmente, asegúrese de comprobar si existen estas dependencias en los documentos.

• O compiled (all at once)- Usando bootstrap.js o el bootstrap.min.js minificado . No intente incluir ambos, ya que tanto bootstrap.js como bootstrap.min.js contienen todos los complementos en un solo archivo.

Todos los complementos dependen de jQuery. Por lo tanto, jQuery debe incluirse antes de los archivos del complemento. Compruebe bower.json para ver qué versiones de jQuery son compatibles.

Atributos de datos

• Se puede acceder a todos los complementos de Bootstrap mediante la API de datos incluida. Por lo tanto, no es necesario que incluya una sola línea de JavaScript para invocar cualquiera de las funciones del complemento.

• En algunas situaciones, puede ser conveniente desactivar esta funcionalidad de la API de datos. Si necesita desactivar la API de datos, puede desvincular los atributos agregando la siguiente línea de JavaScript:

$(document).off('.data-api')

• Para desactivar un complemento específico / único, simplemente incluya el nombre del complemento como un espacio de nombres junto con el espacio de nombres de data-api como este:

$(document).off('.alert.data-api')

API programática

Los desarrolladores de Bootstrap creen que debería poder utilizar todos los complementos únicamente a través de la API de JavaScript. Todas las API públicas son métodos únicos y encadenables, y devuelven la colección sobre la que se actuó, por ejemplo:

$(".btn.danger").button("toggle").addClass("fat")

Todos los métodos aceptan un objeto de opciones opcionales, una cadena que apunta a un método en particular o nada (que inicia un complemento con comportamiento predeterminado) como se muestra a continuación:

// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Cada complemento también expone su constructor en bruto en un Constructorpropiedad: $ .fn.popover.Constructor . Si desea obtener una instancia de complemento en particular, recupérela directamente de un elemento:

$('[rel = popover]').data('popover').

No conflicto

Los complementos de Bootstrap a veces se pueden usar con otros marcos de interfaz de usuario. En estas circunstancias, ocasionalmente pueden ocurrir colisiones de espacios de nombres. Para superar esta llamada.noConflict en el complemento cuyo valor desea revertir.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

Eventos

Bootstrap proporciona eventos personalizados para la mayoría de las acciones únicas de los complementos. Generalmente, estos eventos se presentan en dos formas:

• Infinitive form- Esto se activa al inicio de un evento. Por ejemplo, mostrar . Los eventos infinitivos proporcionan la funcionalidad preventDefault . Esto proporciona la capacidad de detener la ejecución de una acción antes de que comience.

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})

• Past participle form- Esto se activa al completar una acción. Ej. Mostrado.

El complemento de transición proporciona efectos de transición simples.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará transition.jsuna vez junto con los otros archivos JS. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Transition.js es un ayudante básico para eventos de transiciónEnd, así como un emulador de transición CSS. Los otros complementos lo utilizan para verificar el soporte de transición CSS y para detectar transiciones colgantes.

Casos de uso

Algunos ejemplos del complemento de transición son:

• Deslizamiento o desvanecimiento en modales. Puede encontrar un ejemplo en el capítulo Bootstrap Modal Plugin .

• Pestañas que se desvanecen. Puede encontrar un ejemplo en el capítulo Complemento de la pestaña Bootstrap .

• Alertas que se desvanecen. Puede encontrar un ejemplo en el capítulo Bootstrap Alerts .

• Paneles de carrusel deslizantes. Puede encontrar un ejemplo en el capítulo Bootstrap Carousel Plugin .

Un modal es una ventana secundaria que se coloca en capas sobre su ventana principal. Normalmente, el propósito es mostrar contenido de una fuente separada que puede tener alguna interacción sin salir de la ventana principal. Las ventanas secundarias pueden proporcionar información, interacción o más.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará modal.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

Puede alternar el contenido oculto del complemento modal:

• Via data attributes - Establecer atributo data-toggle = "modal" en un elemento del controlador, como un botón o enlace, junto con un data-target = "#identifier" o href = "#identifier" para apuntar a un modal específico (con el id = "identificador") para alternar.

• Via JavaScript - Usando esta técnica puede llamar a un modal con id = "identifier" con una sola línea de JavaScript -

$('#identifier').modal(options)

Ejemplo

En el siguiente ejemplo se muestra un ejemplo de ventana modal estática:

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

• Para invocar la ventana modal, necesita tener algún tipo de disparador. Puede utilizar un botón o un enlace. Aquí hemos utilizado un botón.

• Si observa el código anterior, verá que en la etiqueta <button>, el data-target = "#myModal"es el destino del modal que desea cargar en la página. Este código le permite crear múltiples modales en la página y luego tener diferentes disparadores para cada uno de ellos. Ahora, para que quede claro, no carga varios modales al mismo tiempo, pero puede crear muchos en las páginas para que se carguen en diferentes momentos.

• Hay dos clases a tener en cuenta en el modal:

  • El primero es .modal, que simplemente identifica el contenido del <div> como modal.

  • Y segundo es el .fadeclase. Cuando se alterna el modal, hará que el contenido aparezca y desaparezca gradualmente.

• aria-labelledby = "myModalLabel", el atributo hace referencia al título modal.

• El atributo aria-hidden = "true" se utiliza para mantener la ventana modal invisible hasta que se activa un disparador (como un clic en el botón asociado).

• <div class = "modal-header">, modal-header es la clase para definir el estilo del encabezado de la ventana modal.

• class = "close", es un cierre de clase CSS que establece el estilo del botón Cerrar de la ventana modal.

• data-dismiss = "modal", es un atributo de datos HTML5 personalizado. Aquí se usa para cerrar la ventana modal.

• class = "modal-body", es una clase CSS de Bootstrap CSS para establecer el estilo del cuerpo de la ventana modal.

• class = "modal-footer", es una clase CSS de Bootstrap CSS para establecer el estilo del pie de página de la ventana modal.

• data-toggle = "modal", La alternancia de datos de atributos de datos personalizados HTML5 se utiliza para abrir la ventana modal.

Opciones

Hay ciertas opciones que se pueden pasar a través de atributos de datos o JavaScript para personalizar la apariencia de la ventana modal. La siguiente tabla enumera las opciones:

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Métodos

Aquí hay algunos métodos útiles que se pueden usar con modal ().

$('#identifier').modal({
   keyboard: false
})

$('#identifier').modal('toggle')

$('#identifier').modal('show')

$('#identifier').modal('hide')

Ejemplo

El siguiente ejemplo demuestra el uso de métodos:

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Simplemente haga clic en el botón Esc y se cerrará la ventana modal.

Eventos

La siguiente tabla enumera los eventos para trabajar con modal. Estos eventos pueden usarse para conectarse a la función.

$('#identifier').on('show.bs.modal', function () {
   // do something…
})

$('#identifier').on('shown.bs.modal', function () {
   // do something…
})

$('#identifier').on('hide.bs.modal', function () {
   // do something…
})

$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Ejemplo

El siguiente ejemplo demuestra el uso de eventos:

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Como se ve en la pantalla anterior, si hace clic en el botón Cerrar, es decir, ocultar evento, se muestra un mensaje de alerta.

Con el complemento desplegable, puede agregar menús desplegables a cualquier componente como barras de navegación, pestañas, píldoras y botones.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará dropdown.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

Puede alternar el contenido oculto del complemento desplegable -

• Via data attributes - Agregar data-toggle = "dropdown" a un enlace o botón para alternar un menú desplegable como se muestra a continuación:

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• Si necesita mantener los enlaces intactos (lo cual es útil si el navegador no habilita JavaScript), use el data-target atributo en lugar de href = "#"-

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
      <span class = "caret"></span>
   </a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• Via JavaScript - Para llamar al menú desplegable alternar a través de JavaScript, use el siguiente método -

$('.dropdown-toggle').dropdown()

Ejemplo

Within Navbar

El siguiente ejemplo demuestra el uso del menú desplegable dentro de una barra de navegación:

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

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Within Tabs

El siguiente ejemplo demuestra el uso del menú desplegable dentro de las pestañas:

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Opciones

No hay opciones.

Métodos

El menú desplegable tiene un método simple para mostrar u ocultar el menú desplegable.

$().dropdown('toggle')

Ejemplo

El siguiente ejemplo demuestra el uso del método de complemento desplegable.

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>

   <div id = "myexample">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
            
            <ul class = "dropdown-menu">
               <li><a id = "action-1" href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
			
      </ul>
   </div>
   
</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   }); 
</script>

El complemento Scroll spy (navegación de actualización automática) le permite apuntar a secciones de la página según la posición de desplazamiento. En su implementación básica, a medida que se desplaza, puede agregar.active clases a la barra de navegación según la posición de desplazamiento.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará scrollspy.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

Puede agregar el comportamiento scrollspy a su barra de navegación superior -

• Via data attributes - agregar data-spy = "scroll"al elemento que desea espiar (normalmente el cuerpo). Luego agrega atributodata-target con el ID o clase del elemento padre de cualquier Bootstrap .navcomponente. Para que esto funcione, debe tener elementos en el cuerpo de la página que tengan ID coincidentes de los enlaces que está espiando.

<body data-spy = "scroll" data-target = ".navbar-example">
   ...
   <div class = "navbar-example">
      <ul class = "nav nav-tabs">
         ...
      </ul>
   </div>
   ...
</body>

• Via JavaScript - Puede invocar scrollspy con JavaScript en lugar de utilizar los atributos de datos, seleccionando el elemento para espiar y luego invocando el .scrollspy() función -

$('body').scrollspy({ target: '.navbar-example' })

Ejemplo

El siguiente ejemplo muestra el uso del complemento scrollspy a través de atributos de datos:

<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0" 
   style = "height:200px; overflow:auto; position: relative;">
   <h4 id = "ios">iOS</h4>
	
   <p>iOS is a mobile operating system developed and distributed by Apple 
      Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple 
      TV. iOS is derived from OS X, with which it shares the Darwin 
      foundation. iOS is Apple's mobile version of the OS X operating system 
      used on Apple computers.</p>
   
   <h4 id = "svn">SVN</h4>
   
   <p>Apache Subversion which is often abbreviated as SVN, is a software 
      versioning and revision control system distributed under an open source 
      license. Subversion was created by CollabNet Inc. in 2000, but now it 
      is developed as a project of the Apache Software Foundation, and as 
      such is part of a rich community of developers and users.</p>
   
   <h4 id = "jmeter">jMeter</h4>
   
   <p>jMeter is an Open Source testing software. It is 100% pure Java 
      application for load and performance testing.</p>
   
   <h4 id = "ejb">EJB</h4>
   
   <p>Enterprise Java Beans (EJB) is a development architecture for building 
      highly scalable and robust enterprise level applications to be deployed 
      on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   
   <h4 id = "spring">Spring</h4>
   
   <p>Spring framework is an open source Java platform that provides 
      comprehensive infrastructure support for developing robust Java 
      applications very easily and very rapidly.</p>
   
   <p>Spring framework was initially written by Rod Johnson and was first 
      released under the Apache 2.0 license in June 2003.</p>
   
</div>

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. La siguiente tabla enumera las opciones:

Métodos

.scrollspy('refresh') - Al llamar a scrollspy a través del método JavaScript, debe llamar al .refreshmétodo para actualizar el DOM. Esto es útil si ha cambiado algún elemento del DOM, es decir, si ha agregado o eliminado algunos elementos. La siguiente sería la sintaxis para usar este método.

$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})

Ejemplo

El siguiente ejemplo demuestra el uso de .scrollspy('refresh') método -

<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
   
   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse" 
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>
   
   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle  = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
               <li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
               <li><a href = "#ejb" tabindex = "-1">ejb</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#spring" tabindex = "-1">spring</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"  
   style = "height:200px; overflow:auto; position: relative;">
   
   <div class = "section">
      <h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "section">
      <h4 id = "svn">SVN<small></small></h4>
      <p>Apache Subversion which is often abbreviated as SVN, is a software 
         versioning and revision control system distributed under an open source 
         license. Subversion was created by CollabNet Inc. in 2000, but 
         now it is developed as a project of the Apache Software Foundation, 
         and as such is part of a rich community of developers and users.</p>
   </div>
   
   <div class = "section">
      <h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>
      
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "section">
      <h4 id = "ejb">EJB</h4>
      
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications 
         to be deployed on J2EE compliant Application Server such as 
         JBOSS, Web Logic etc.</p>
   </div>
	
   <div class = "section">
      <h4 id = "spring">Spring</h4>
      
      <p>Spring framework is an open source Java platform that provides 
         comprehensive infrastructure support for developing robust Java 
         applications very easily and very rapidly.</p>
      
      <p>Spring framework was initially written by Rod Johnson and was first 
         released under the Apache 2.0 license in June 2003.</p>
   </div>
   
</div>

<script type = "text/javascript">
   $(function(){
      removeSection = function(e) {
         $(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
            var $spy = $(this).scrollspy('refresh')
         });
      }
      $("#myScrollspy").scrollspy();
   });
</script>

Eventos

La siguiente tabla enumera los eventos para trabajar con scrollspy. Este evento puede usarse para conectarse a la función.

$('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something…
})

Ejemplo

El siguiente ejemplo demuestra el uso de activate.bs.scrollspy evento -

<html>
   <head>
      <link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
      <script src = "bootstrap/scripts/jquery.min.js"></script>
      <script src = "bootstrap/js/bootstrap.min.js"></script>
      
      <script>
         $(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
            
               $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
         
            // The event is fired when an item gets actived with the scrollspy
            $("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
               $("#spyevent").html("Current Item being viewed >> " + currentSection);
            })
				
         });
      </script>
   
      <style>
         .scroll-box {
            height: 250px;
            position: relative;
            overflow: auto;
            font-size:2em;
         }
      </style>
   </head>
   
   <body>
      <div class = "container">
         <nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
      
            <!-- Nav Bar -->
            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle" 
                  data-toggle = "collapse" data-target = "#navbarCollapse">
               
                  <span class = "sr-only">Toggle navigation</span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>
					
               <a class = "navbar-brand" href = "#">Tutorials Point</a>
            </div>
            
            <!-- Links and Sublinks -->
            <div class = "collapse navbar-collapse" id = "navbarCollapse">
               <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "#subject-1">Subject 1</a></li>
                  <li><a href = "#subject-2">Subject 2</a></li>
               
                  <li class = "dropdown"><a href = "#" class = "dropdown-toggle" 
                     data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
                     
                     <ul class = "dropdown-menu">
                        <li><a href = "#subject-3-1">Subject 3.1</a></li>
                        <li><a href = "#subject-3-2">Subject 3.2</a></li>
                        <li><a href = "#subject-3-3">Subject 3.3</a></li>
                     </ul>
                     
                  </li>
						
                  <li><a href = "#subject-4">Subject 4</a></li>
               </ul>
            </div>
            
         </nav>
         
         <div class = "scroll-box" data-spy = "scroll" data-offset = "0">
            <div class = "subject">
            
               <h3 id = "subject-1">Subject 1 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>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.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-2">Subject 2 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
            
               <p>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.</p>
            </div>
				
            <hr>
         
            <div class = "subject">
               <h3 id = "subject-3">Subject 3 
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h3>
            
               <p>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.</p><
            </div>
				
            <hr>
            
            <div class = "subject">
               <h4 id = "subject-3-1">Subject 3.1
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>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.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-2">Subject 3.2
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>
               
               <p>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.</p>
            </div>
            
            <div class = "subject">
               <h4 id = "subject-3-3">Subject 3.3 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h4>
               
               <p>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.</p>
            </div>
				
            <hr>
            
            <div class = "subject">
               <h3 id = "subject-4">Subject 4 
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>
               
               <p>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.</p>
            </div>
            
         </div>
         <hr>
         
         <h4 id = "spyevent" class = "text-info"></h4>
      </div>
   </body>
</html>

Las pestañas se introdujeron en el capítulo Elementos de navegación de Bootstrap . Al combinar algunos atributos de datos, puede crear fácilmente una interfaz con pestañas. Con este complemento, puede realizar la transición a través de paneles de contenido local en pestañas o píldoras, incluso a través de menús desplegables.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará tab.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

Puede habilitar las pestañas de las siguientes dos formas:

• Via data attributes - necesitas agregar data-toggle = "tab" o data-toggle = "pill" a las anclas.

  Añadiendo el nav y nav-tabs clases a la pestaña ulaplicará el estilo de la pestaña Bootstrap , mientras agrega elnav y nav-pillslas clases aplicarán estilo de píldora .

<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>

• Via JavaScript - puede habilitar pestañas usando Javscript como se muestra a continuación -

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

• Aquí hay un ejemplo de diferentes formas de activar pestañas individuales:

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

Efecto de desvanecimiento

Para obtener un efecto de atenuación para las pestañas, agregue .fade a cada .tab-pane. El primer panel de pestañas también debe tener.in para desvanecerse correctamente en el contenido inicial -

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

Ejemplo

Un ejemplo de complemento de pestaña que utiliza atributos de datos y efecto de atenuación es el que se muestra en el siguiente ejemplo:

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

Métodos

.$().tab- Este método activa un elemento de pestaña y un contenedor de contenido. La pestaña debe tener undata-target o un href apuntando a un nodo contenedor en el DOM.

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () { $('#myTab a:last').tab('show')
   })
</script>

Ejemplo

El siguiente ejemplo muestra el uso del método de complemento de pestaña .tab. Aquí en el ejemplo, la segunda pestaña de iOS está activada -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
	
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function () { $('#myTab li:eq(1) a').tab('show');
   });
</script>

Eventos

La siguiente tabla enumera los eventos para trabajar con el complemento de pestaña. Este evento puede usarse para conectarse a la función.

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

Ejemplo

El siguiente ejemplo muestra el uso de eventos de complemento de pestaña. Aquí, en el ejemplo, mostraremos las pestañas visitadas actuales y anteriores:

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
      });
   });
</script>

La información sobre herramientas es útil cuando necesita describir un enlace. El complemento se inspiró en el complemento jQuery.tipsy escrito por Jason Frame . Desde entonces, la información sobre herramientas se ha actualizado para funcionar sin imágenes, animada con una animación CSS y atributos de datos para el almacenamiento local de títulos.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará tooltip.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

El complemento de información sobre herramientas genera contenido y marcado a pedido y, de forma predeterminada, coloca la información sobre herramientas después de su elemento de activación. Puede agregar información sobre herramientas de las dos formas siguientes:

• Via data attributes - Para agregar una información sobre herramientas, agregue data-toggle = "tooltip"a una etiqueta de anclaje. El título del ancla será el texto de una información sobre herramientas. De forma predeterminada, el complemento establece la información sobre herramientas en la parte superior.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>

• Via JavaScript - Activar la información sobre herramientas a través de JavaScript -

$('#identifier').tooltip(options)

El complemento de información sobre herramientas NO es solo complementos css como el menú desplegable u otros complementos discutidos en capítulos anteriores. Para usar este complemento, DEBE activarlo usando jquery (lea javascript). Para habilitar toda la información sobre herramientas en su página, simplemente use este script:

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de información sobre herramientas a través de atributos de datos.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Opciones

Hay ciertas opciones que se pueden agregar a través de Bootstrap Data API o invocar a través de JavaScript. La siguiente tabla enumera las opciones:

delay: { show: 500, hide: 100 }

Métodos

Los siguientes son algunos métodos útiles para información sobre herramientas:

$().tooltip(options)

$('#element').tooltip('toggle')

$('#element').tooltip('show')

$('#element').tooltip('hide')

$('#element').tooltip('destroy')

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de información sobre herramientas a través de atributos de datos.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Eventos

La siguiente tabla enumera los eventos para trabajar con el complemento de información sobre herramientas. Este evento puede usarse para conectarse a la función.

$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de información sobre herramientas a través de atributos de datos.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>

La ventana emergente es similar a la información sobre herramientas, que ofrece una vista ampliada completa con un encabezado. Para que se active el popover, el usuario solo necesita colocar el cursor sobre el elemento. El contenido de la ventana emergente se puede completar por completo utilizando Bootstrap Data API. Este método requiere información sobre herramientas.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el popover.jsy tiene una dependencia del complemento de información sobre herramientas . De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

El complemento popover genera contenido y marcado a pedido y, de forma predeterminada, coloca el popover después de su elemento disparador. Puede agregar popover de las siguientes dos formas:

• Via data attributes - Para agregar un popover, agregue data-toggle = "popover"a una etiqueta de ancla / botón. El título del ancla será el texto de un popover. De forma predeterminada, el plugin establece popover en la parte superior.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

• Via JavaScript - Habilite popovers a través de JavaScript usando la siguiente sintaxis -

$('#identifier').popover(options)

El complemento Popover NO es solo complementos CSS como el menú desplegable u otros complementos discutidos en capítulos anteriores. Para usar este complemento, DEBE activarlo usando jquery (lea javascript). Para habilitar todos los popovers en su página, simplemente use este script:

$(function () { $("[data-toggle = 'popover']").popover(); });

Ejemplo

El siguiente ejemplo demuestra el uso del complemento popover mediante atributos de datos.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Opciones

Hay ciertas opciones que se pueden agregar a través de Bootstrap Data API o invocar a través de JavaScript. La siguiente tabla enumera las opciones:

delay: { show: 500, hide: 100 }

Métodos

Los siguientes son algunos métodos útiles para popover:

$().popover(options)

$('#element').popover('toggle')

$('#element').popover('show')

$('#element').popover('hide')

$('#element').popover('destroy')

Ejemplo

El siguiente ejemplo demuestra los métodos del complemento popover:

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Eventos

La siguiente tabla enumera los eventos que funcionan con el complemento popover. Este evento puede usarse para conectarse a la función.

$('#mypopover').on('show.bs.popover', function () {
   // do something
})

$('#mypopover').on('shown.bs.popover', function () {
   // do something
})

$('#mypopover').on('hide.bs.popover', function () {
   // do something
})

$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra los eventos del complemento Popover:

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

Los mensajes de alerta se utilizan principalmente para mostrar información como mensajes de advertencia o confirmación a los usuarios finales. Con el complemento de mensajes de alerta, puede agregar la funcionalidad de descartar a todos los mensajes de alerta.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el alert.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

Puede habilitar la eliminación de una alerta de las siguientes dos formas:

• Via data attributes - Para descartar a través de la API de datos, simplemente agregue data-dismiss = "alert" a su botón de cierre para dar automáticamente una función de cierre de alerta.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

• Via JavaScript - Para descartar a través de JavaScript, use la siguiente sintaxis -

$(".alert").alert()

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de alerta a través de atributos de datos.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Opciones

Aquí no hay opciones.

Métodos

Los siguientes son algunos métodos útiles para el complemento de alerta:

$('#identifier').alert();

$('#identifier').alert('close');

Para permitir que las alertas se animen cuando están cerradas, asegúrese de que tengan la .fade y .in clase ya aplicada a ellos.

Ejemplo

El siguiente ejemplo demuestra el uso de .alert() método -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){ $("#myAlert").alert();
      });
   });  
</script>

El siguiente ejemplo demuestra el uso de .alert('close') método -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){ $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

Pruebe este código usando el Try iteditor. Puede ver que la funcionalidad de cierre se aplica a todos los mensajes de alerta, es decir, cerrar cualquier mensaje de alerta, el resto de los mensajes de alerta también se cierra.

Eventos

La siguiente tabla enumera los eventos que funcionan con el complemento de alerta. Este evento se puede utilizar para conectarse a la función de alerta.

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra los eventos del complemento de alerta:

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>

Los botones se explicaron en el capítulo Botones de Bootstrap . Con este complemento, puede agregar alguna interacción, como los estados de los botones de control o crear grupos de botones para más componentes, como barras de herramientas.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el button.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o minificar bootstrap.min.js .

Estado de carga

Para agregar un estado de carga a un botón, simplemente agregue el data-loading-text = "Loading..." como un atributo del elemento button como se muestra en el siguiente ejemplo:

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>

<script>
   $(function() { 
      $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

Al hacer clic en el botón, la salida sería como se ve en la siguiente imagen:

Palanca única

Para activar la alternancia (es decir, cambiar el estado normal de un botón a un estado de pulsación y viceversa) en un solo botón, agregue el data-toggle = "button" como un atributo del elemento button como se muestra en el siguiente ejemplo:

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

Caja

Puede crear un grupo de casillas de verificación y agregar alternancia simplemente agregando el atributo de datos data-toggle = "buttons" al btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Radio

De manera similar, puede crear un grupo de entradas de radio y agregar alternancia simplemente agregando el atributo de datos data-toggle = "buttons" al btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>

Uso

Puede habilitar el complemento de botones via JavaScript como se muestra a continuación -

$('.btn').button()

Opciones

No hay opciones.

Métodos

A continuación se muestran algunos de los métodos útiles para el complemento de botones:

$().button('toggle')

$().button('loading')

$().button('reset')

$().button(string)

Ejemplo

El siguiente ejemplo demuestra el uso de los métodos anteriores:

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () { $("#myButtons1 .btn").click(function(){
         $(this).button('toggle'); }); }); $(function() { 
      $("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   
   $(function() { $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
         });        
      });
   });  
   
   $(function() { $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
         });        
      });
   }); 
</script>

El complemento colapso facilita el colapso de divisiones de la página. Ya sea que lo use para construir una navegación en acordeón o cuadros de contenido, permite muchas opciones de contenido.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el collapse.js. Esto también requiere que el complemento de transición esté incluido en su versión de Bootstrap. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Puede utilizar el complemento de colapso:

• To create collapsible groups or accordion. Esto se puede crear como en el ejemplo de muestra a continuación:

<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 = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>

• data-toggle = "collapse" se agrega al enlace en el que hace clic para expandir o contraer el componente.

• href o un data-targetEl atributo se agrega al componente principal, cuyo valor es el id del componente secundario.

• data-parent Se agrega el atributo para crear el efecto de acordeón.

• Para crear un plegable simple sin el marcado de acordeón : esto se puede crear como en el ejemplo de muestra a continuación:

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Como puede ver en el ejemplo, hemos creado un componente plegable simple, a diferencia del acordeón, no hemos agregado el atributo data-parent.

Uso

La siguiente tabla enumera las clases que utiliza el complemento de colapso para manejar el trabajo pesado:

Puede usar el complemento colapso de dos maneras:

• Via data attributes - Agregar data-toggle = "collapse" y un data-targetal elemento para asignar automáticamente el control de un elemento plegable. losdata-targetEl atributo aceptará un selector de CSS para aplicar la contracción. Asegúrate de agregar la clase.collapseal elemento plegable. Si desea que se abra de forma predeterminada, incluya la clase adicional.in.

  Para agregar una administración de grupo similar a un acordeón a un control plegable, agregue el atributo de datos data-parent = "#selector".

• Via JavaScript - El método de colapso se puede activar con JavaScript como se muestra a continuación -

$('.collapse').collapse()

Opciones

Hay ciertas opciones que se pueden pasar a través de atributos de datos o JavaScript se enumeran en la siguiente tabla:

Métodos

Aquí hay una lista de algunos métodos útiles que se utilizan con elementos plegables.

$('#identifier').collapse({
   toggle: false
})

$('#identifier').collapse('toggle')

$('#identifier').collapse('show')

$('#identifier').collapse('hide')

Ejemplo

El siguiente ejemplo demuestra el uso de métodos:

<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 = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>

Eventos

La siguiente tabla enumera algunos eventos que se pueden utilizar con la función de contracción.

$('#identifier').on('show.bs.collapse', function () {
   // do something
})

$('#identifier').on('shown.bs.collapse', function () {
   // do something
})

$('#identifier').on('hide.bs.collapse', function () {
   // do something
})

$('#identifier').on('hidden.bs.collapse', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra el uso de eventos:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>

El carrusel Bootstrap es una forma flexible y receptiva de agregar un control deslizante a su sitio. Además de ser receptivo, el contenido es lo suficientemente flexible como para permitir imágenes, iframes, videos o casi cualquier tipo de contenido que desee.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el carousel.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Ejemplo

Una simple presentación de diapositivas a continuación muestra un componente genérico para recorrer los elementos como un carrusel, utilizando el complemento de carrusel Bootstrap. Para implementar el carrusel, solo necesita agregar el código con el marcado. No hay necesidad de atributos de datos, solo desarrollo simple basado en clases.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

Subtítulos opcionales

Puede agregar subtítulos a sus diapositivas fácilmente con el .carousel-caption elemento dentro de cualquier .item. Coloque casi cualquier HTML opcional allí y se alineará y formateará automáticamente. El siguiente ejemplo demuestra esto:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Uso

• Via data attributes - Utilice atributos de datos para controlar fácilmente la posición del carrusel.

  • Atributo data-slideacepta las palabras clave anterior o siguiente , lo que altera la posición de la diapositiva en relación con su posición actual.

  • Utilizar data-slide-to para pasar un índice de diapositivas sin procesar al carrusel data-slide-to = "2", que cambia la posición de la diapositiva a un índice particular que comienza con 0.

  • los data-ride = "carousel" El atributo se utiliza para marcar un carrusel como una animación a partir de la carga de la página.

• Via JavaScript - El carrusel se puede llamar manualmente con JavaScript como se muestra a continuación -

$('.carousel').carousel()

Opciones

Hay ciertas opciones que se pueden pasar a través de atributos de datos o JavaScript se enumeran en la siguiente tabla:

Métodos

A continuación se muestra una lista de métodos útiles que se pueden utilizar con el código carrusel.

$('#identifier').carousel({
   interval: 2000
})

$('#identifier').carousel('cycle')

$('#identifier')..carousel('pause')

$('#identifier').carousel(number)

$('#identifier').carousel('prev')

$('#identifier').carousel('next')

Ejemplo

El siguiente ejemplo demuestra el uso de métodos:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() { // Cycles to the previous item $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
         $("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
         $("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
         $("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

Eventos

La clase carrusel de Bootstrap expone dos eventos para conectarse a la funcionalidad del carrusel que se enumeran en la siguiente tabla.

$('#identifier').on('slide.bs.carousel', function () {
   // do something
})

$('#identifier').on('slid.bs.carousel', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra el uso de eventos:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

El complemento de afijo permite que un <div> se adhiera a una ubicación en la página. También puede activar y desactivar su fijación con este complemento. Un ejemplo común de esto son los íconos sociales. Comenzarán en una ubicación, pero cuando la página alcance una determinada marca, el <div> se bloqueará en su lugar y dejará de desplazarse con el resto de la página.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el affix.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

Puede usar el complemento de afijo a través de atributos de datos o manualmente con su propio JavaScript, como se explica a continuación.

• Via data attributes - Para agregar fácilmente un comportamiento de afijo a cualquier elemento, simplemente agregue data-spy = "affix"al elemento que desea espiar. Utilice compensaciones para definir cuándo alternar la fijación de un elemento.

Ejemplo

El siguiente ejemplo demuestra el uso a través de atributos de datos:

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum 
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet 
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, 
            id interdum neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum 
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
            mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in 
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
            dapibus orci. In dapibus velit blandit pharetra tincidunt. 
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed 
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at 
            facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada 
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
            pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
            lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
            amet mauris. </p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante 
            id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
            turpis at accumsan tincidunt. Phasellus risus risus,
            volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit 
            dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, 
            tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis 
            pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id 
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo 
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

• Via JavaScript - Puede colocar un elemento manualmente con JavaScript como se muestra a continuación

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

Ejemplo

El siguiente ejemplo demuestra el uso a través de atributos de datos:

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div>
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
			
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
            dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
            ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh 
            non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
            in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique 
            eget risus. Integer aliquet quam ut elit suscipit, id interdum 
            neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. 
            Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
            bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
            dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
            hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris 
            quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. 
            Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum 
            ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. 
            Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis 
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. 
            Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
            purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
            dolor nisl semper tortor, vel sagittis lacus est consequat eros. 
            Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, 
            tincidunt sit amet mauris.</p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
            lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
            at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
            tincidunt fringilla massa. Etiam hendrerit dolor eget ante 
            rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
            semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
            ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
            ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis 
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum 
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60  
         }
      });
   });
</script>

Posicionamiento vía CSS

En las dos situaciones anteriores, debe proporcionar CSS para el posicionamiento de su contenido. El complemento de afijo alterna entre tres clases, cada una de las cuales representa un estado particular: .affix, .affix-top y .affix-bottom . Siga los pasos a continuación para configurar su CSS para cualquiera de las opciones de uso anteriores.

• Para comenzar, el complemento agrega .affix-toppara indicar que el elemento está en su posición más alta. En este punto, no se requiere posicionamiento CSS.

• Desplazarse más allá del elemento que desea colocar debería activar la colocación real. Aquí es donde.affix reemplaza .affix-top y conjuntos position: fixed; (proporcionado por el código CSS de Bootstrap).

• Si se define un desplazamiento inferior, desplazarse más allá de eso debería reemplazar .affix con .affix-bottom. Dado que las compensaciones son opcionales, configurar una requiere que configure el CSS apropiado. En este caso, agregueposition: absolute; cuando sea necesario.

Opciones

Hay ciertas opciones que se pueden pasar a través de atributos de datos o JavaScript como se enumeran en la siguiente tabla:

¿Qué es una cuadrícula?

En diseño gráfico, una cuadrícula es una estructura (generalmente bidimensional) formada por una serie de líneas rectas (verticales, horizontales) que se cruzan y que se utilizan para estructurar el contenido. Se utiliza ampliamente para diseñar el diseño y la estructura de contenido en el diseño de impresión. En diseño web, es un método muy eficaz para crear un diseño coherente de forma rápida y eficaz utilizando HTML y CSS.

Funcionamiento del sistema Bootstrap Grid

Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido. Así es como funciona el sistema de cuadrícula Bootstrap:

• Las filas deben colocarse dentro de un .container class para una alineación y un relleno adecuados.

• Utilice filas para crear grupos horizontales de columnas.

• El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser los hijos inmediatos de las filas.

• Clases de cuadrícula predefinidas como .row and .col-xs-4están disponibles para realizar rápidamente diseños de cuadrícula. LESS mixins también se pueden utilizar para diseños más semánticos.

• Las columnas crean medianiles (espacios entre el contenido de la columna) mediante el relleno. Ese relleno se compensa en filas para la primera y la última columna mediante un margen negativo en.rows.

• Las columnas de la cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres.col-xs-4.

Bootstrap proporciona un diseño limpio para crear tablas. Algunos de los elementos de la tabla compatibles con Bootstrap son:

Diseño de formulario

Bootstrap le proporciona los siguientes tipos de diseños de formularios:

• Forma vertical (predeterminada)
• Formulario en línea
• Forma horizontal

Forma vertical o básica

La estructura de formulario básica viene con Bootstrap; los controles de formulario individuales reciben automáticamente un estilo global. Para crear un formulario básico, haga lo siguiente:

• Agregue un formulario de rol al elemento primario <form>.

• Envuelva las etiquetas y los controles en un <div> con la clase .form-group . Esto es necesario para un espaciado óptimo.

• Agregue una clase de .form-control a todos los elementos textuales <input>, <textarea> y <select>.

Formulario en línea

Para crear un formulario donde todos los elementos están alineados, alineados a la izquierda y las etiquetas están al lado, agregue la clase .form-inline a la etiqueta <form>.

Forma horizontal

Las formas horizontales se distinguen de las demás no solo en la cantidad de marcado, sino también en la presentación del formulario. Para crear un formulario que utilice el diseño horizontal, haga lo siguiente:

• Agregue una clase de .form-horizontal al elemento padre <form>.

• Envuelva las etiquetas y los controles en un <div> con la clase .form-group .

• Agregue una clase de .control-label a las etiquetas.

Bootstrap proporciona algunas opciones para diseñar botones, que se resumen en la siguiente tabla:

Bootstrap proporciona tres clases que se pueden usar para aplicar algunos estilos simples a las imágenes:

• .img-redondeado : agrega un radio de borde: 6px para dar a la imagen esquinas redondeadas.

• .img-circle : redondea toda la imagen agregando border-radius: 500px .

• .img-thumbnail : agrega un poco de relleno y un borde gris:

Bootstrap proporciona algunas clases de ayuda para un desarrollo más rápido compatible con dispositivos móviles. Estos se pueden usar para mostrar y ocultar contenido por dispositivo a través de una consulta de medios, combinados con dispositivos grandes, pequeños y medianos.

Úselos con moderación y evite crear versiones completamente diferentes del mismo sitio. Responsive utilities are currently only available for block and table toggling.

Bootstrap proporciona algunas opciones diferentes para diseñar elementos de navegación. Todos comparten el mismo marcado y clase base, .nav. Bootstrap también proporciona una clase de ayuda para compartir marcas y estados. Intercambia clases de modificadores para cambiar entre cada estilo.

Bootstrap proporciona algunas opciones diferentes para diseñar blogs. Algunos de los elementos del blog son como cuadro de comentarios, publicación de blog, pie de página de blog, etc.

¿Qué es un diseño de materiales?

El diseño de materiales es una guía completa para el diseño visual, de movimiento y de interacción entre plataformas.

Bootstrap proporciona algunas opciones diferentes para diseñar el control deslizante de navegación. Algunos de los ejemplos se muestran a continuación:

Bootstrap proporciona algunas opciones diferentes para diseñar la línea de tiempo. Algunos ejemplos, como se muestra a continuación:

Las alertas proporcionan una manera de dar estilo a los mensajes para el usuario. Proporcionan mensajes de retroalimentación contextual para las acciones típicas de los usuarios. Algunos ejemplos de alerta como se muestra a continuación:

Bootstrap proporciona algunas opciones diferentes para diseñar la interfaz de administración. Algunas de las interfaces de administración como se muestra a continuación:

Ajax se utiliza para comunicarse con páginas web y servidores web. Algunos de los ejemplos que se basan en ajax y bootstrap como se muestra a continuación:

Bootstrap proporciona algunas opciones diferentes para el control deslizante. Control deslizante con pestañas como se muestra a continuación -

Bootstrap proporciona algunas opciones diferentes para los subtítulos. Efecto de desplazamiento de subtítulos en miniatura como se muestra a continuación:

Bootstrap proporciona algunas opciones diferentes para el mapa. ejemplo de muestra de mapa es como se muestra a continuación:

Bootstrap proporciona algunas opciones diferentes para calendarios. ejemplo de ejemplo de calendario es el que se muestra a continuación:

Bootstrap proporciona algunas opciones diferentes para los íconos sociales. ejemplos de muestra de iconos sociales se muestran a continuación:

Bootstrap proporciona algunas opciones diferentes para iconos como fuentes. ejemplos de ejemplo de iconos son los que se muestran a continuación:

Bootstrap proporciona algunas opciones diferentes para diseñar elementos de Bootstrap. Algunos de los elementos de bootstrap se muestran a continuación: