Componentes

Bootstrap incorpora docenas de componentes reutilizables para proporcionar navegación, alertas, ventanas emergentes y mucho más.

Grupos de botones

Utilice grupos de botones para unir varios botones como un componente compuesto. Constrúyelos con una serie de <a>o <button>elementos.

Mejores prácticas

Recomendamos las siguientes pautas para usar grupos de botones y barras de herramientas:

  • Utilice siempre el mismo elemento en un solo grupo de botones, <a>o <button>.
  • No mezcle botones de diferentes colores en el mismo grupo de botones.
  • Utilice iconos además del texto o en lugar de él, pero asegúrese de incluir texto alternativo y de título cuando corresponda.

Los grupos de botones relacionados con menús desplegables (ver a continuación) deben llamarse por separado y siempre deben incluir un signo de intercalación desplegable para indicar el comportamiento previsto.

Ejemplo predeterminado

Así es como el HTML busca un grupo de botones estándar creado con botones de etiquetas de anclaje:

  1. < clase div = "grupo-btn" >
  2. < clase de botón = "btn" > 1 </botón>
  3. < clase de botón = "btn" > 2 </botón>
  4. < clase de botón = "btn" > 3 </botón>
  5. </div>

Ejemplo de barra de herramientas

Combine conjuntos de <div class="btn-group">en a <div class="btn-toolbar">para componentes más complejos.

  1. < clase div = "btn-barra de herramientas" >
  2. < clase div = "grupo-btn" >
  3. ...
  4. </div>
  5. </div>

Casilla de verificación y sabores de radio

Los grupos de botones también pueden funcionar como radios, donde solo un botón puede estar activo, o casillas de verificación, donde cualquier número de botones puede estar activo. Ver los documentos de Javascript para eso.

Obtener el javascript »

Menús desplegables en grupos de botones

¡Aviso! Los botones con menús desplegables deben envolverse individualmente .btn-groupdentro de un .btn-toolbarpara una representación adecuada.

Menús desplegables de botones

Resumen y ejemplos

Use cualquier botón para activar un menú desplegable colocándolo dentro de .btn-groupy proporcionando el marcado de menú adecuado.

marcado de ejemplo

De manera similar a un grupo de botones, nuestro marcado usa un marcado de botón regular, pero con algunas adiciones para refinar el estilo y admitir el complemento jQuery desplegable de Bootstrap.

  1. < clase div = "grupo-btn" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Acción
  4. <span clase = "intercalación" ></span>
  5. </a>
  6. <ul clase = "menú desplegable" >
  7. <!-- enlaces del menú desplegable -->
  8. </ul>
  9. </div>

Funciona con todos los tamaños de botones.

Los menús desplegables de botones funcionan en cualquier tamaño. los tamaños de sus botones a .btn-large, .btn-smallo .btn-mini.

Requiere javascript

Los menús desplegables de botones requieren el complemento desplegable Bootstrap para funcionar.

En algunos casos, como en los dispositivos móviles, los menús desplegables se extenderán fuera de la ventana gráfica. Debe resolver la alineación manualmente o con javascript personalizado.


Menús desplegables de botones divididos

Resumen y ejemplos

Sobre la base de los estilos y el marcado del grupo de botones, podemos crear fácilmente un botón dividido. Los botones de división cuentan con una acción estándar a la izquierda y un menú desplegable a la derecha con enlaces contextuales.

Tallas

Utilice las clases de botones adicionales .btn-mini, .btn-smallo .btn-largepara el tamaño.

  1. < clase div = "grupo-btn" >
  2. ...
  3. <ul class = "menú desplegable hacia la derecha" >
  4. <!-- enlaces del menú desplegable -->
  5. </ul>
  6. </div>

marcado de ejemplo

Ampliamos los menús desplegables de botones normales para proporcionar una segunda acción de botón que funciona como un activador desplegable independiente.

  1. < clase div = "grupo-btn" >
  2. <button class = "btn" > Acción </button>
  3. < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span clase = "intercalación" ></span>
  5. </botón>
  6. <ul clase = "menú desplegable" >
  7. <!-- enlaces del menú desplegable -->
  8. </ul>
  9. </div>

menús desplegables

Los menús desplegables también se pueden alternar de abajo hacia arriba agregando una sola clase al padre inmediato de .dropdown-menu. Cambiará la dirección de .carety cambiará la posición del menú para moverse de abajo hacia arriba en lugar de arriba hacia abajo.

  1. < clase div = "desplegable del grupo btn" >
  2. <button class = "btn" > Desplegar </button>
  3. < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span clase = "intercalación" ></span>
  5. </botón>
  6. <ul clase = "menú desplegable" >
  7. <!-- enlaces del menú desplegable -->
  8. </ul>
  9. </div>

Paginación multicon-página

Cuándo usar

Paginación ultrasimplista y de estilo minimalista inspirada en Rdio, ideal para aplicaciones y resultados de búsqueda. El bloque grande es difícil de perder, fácilmente escalable y proporciona grandes áreas de clic.

Enlaces de página con estado

Los enlaces son personalizables y funcionan en varias circunstancias con la clase correcta. .disabledpara enlaces en los que no se puede hacer clic y .activepara la página actual.

Alineación flexible

Agregue cualquiera de las dos clases opcionales para cambiar la alineación de los enlaces de paginación: .pagination-centeredy .pagination-right.

Ejemplos

El componente de paginación predeterminado es flexible y funciona en una serie de variaciones.

Margen

Envuelto en un <div>, la paginación es solo un <ul>.

  1. < clase div = "paginación" >
  2. <ul>
  3. <li><a href = "#" > Anterior </a></li>
  4. <li clase = "activo" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Siguiente </a></li>
  11. </ul>
  12. </div>

Pager Para enlaces rápidos anteriores y siguientes

Acerca del localizador

El componente de paginación es un conjunto de enlaces para implementaciones de paginación simples con marcas ligeras e incluso estilos más claros. Es genial para sitios simples como blogs o revistas.

Estado deshabilitado opcional

Los enlaces de buscapersonas también usan la .disabledclase general de la paginación.

Ejemplo predeterminado

De forma predeterminada, el buscapersonas centra los enlaces.

  1. <ul class = "buscapersonas" >
  2. <li>
  3. <a href = "#" > Anterior </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Siguiente </a>
  7. </li>
  8. </ul>

Enlaces alineados

Alternativamente, puede alinear cada enlace a los lados:

  1. <ul class = "buscapersonas" >
  2. <li clase = "anterior" >
  3. <a href = "#" > mayores </a>
  4. </li>
  5. <li clase = "siguiente" >
  6. <a href = "#" > Más reciente → </a>
  7. </li>
  8. </ul>
Etiquetas Margen
Defecto <span class="label">Default</span>
Éxito <span class="label label-success">Success</span>
Advertencia <span class="label label-warning">Warning</span>
Importante <span class="label label-important">Important</span>
Información <span class="label label-info">Info</span>
Inverso <span class="label label-inverse">Inverse</span>

Sobre

Las insignias son componentes pequeños y simples para mostrar un indicador o contar algún tipo. Se encuentran comúnmente en clientes de correo electrónico como Mail.app o en aplicaciones móviles para notificaciones automáticas.

Clases disponibles

Nombre Ejemplo Margen
Defecto 1 <span class="badge">1</span>
Éxito 2 <span class="badge badge-success">2</span>
Advertencia 4 <span class="badge badge-warning">4</span>
Importante 6 <span class="badge badge-important">6</span>
Información 8 <span class="badge badge-info">8</span>
Inverso 10 <span class="badge badge-inverse">10</span>

unidad de héroe

Bootstrap proporciona un componente ligero y flexible llamado unidad de héroe para mostrar contenido en su sitio. Funciona bien en sitios de marketing y de contenido pesado.

Margen

Envuelve tu contenido en un me divgusta así:

  1. <div clase = "unidad-héroe" >
  2. <h1> Título </h1>
  3. <p> Lema </p>
  4. <p>
  5. <a clase = "btn btn-principal btn-grande" >
  6. Aprende más
  7. </a>
  8. </p>
  9. </div>

¡Hola Mundo!

Esta es una unidad de héroe simple, un componente de estilo jumbotron simple para llamar la atención adicional sobre el contenido o la información destacados.

Aprende más

Encabezado de página

Un shell simple para h1espaciar y segmentar adecuadamente secciones de contenido en una página. Puede utilizar el elemento h1predeterminado smallde , así como la mayoría de los otros componentes (con estilos adicionales).

  1. < clase div = "encabezado de página" >
  2. <h1> Ejemplo de encabezado de página </h1>
  3. </div>

Miniaturas predeterminadas

De forma predeterminada, las miniaturas de Bootstrap están diseñadas para mostrar imágenes vinculadas con un marcado mínimo requerido.

Altamente personalizable

Con un poco de marcado adicional, es posible agregar cualquier tipo de contenido HTML como encabezados, párrafos o botones en las miniaturas.

  • Etiqueta de miniatura

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Acción Acción

  • Etiqueta de miniatura

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Acción Acción

Por qué usar miniaturas

Las miniaturas (anteriormente .media-gridhasta la versión 1.4) son excelentes para cuadrículas de fotos o videos, resultados de búsqueda de imágenes, productos minoristas, portafolios y mucho más. Pueden ser enlaces o contenido estático.

Marcado simple y flexible

El marcado de miniaturas es simple: todo lo que se requiere es una ulcon cualquier cantidad de elementos. liTambién es súper flexible, lo que permite cualquier tipo de contenido con solo un poco más de marcado para envolver su contenido.

Utiliza tamaños de columna de cuadrícula

Por último, el componente de miniaturas utiliza clases de sistemas de cuadrícula existentes, como .span2o .span3, para controlar las dimensiones de las miniaturas.

el marcado

Como se mencionó anteriormente, el marcado requerido para las miniaturas es ligero y sencillo. Aquí hay un vistazo a la configuración predeterminada para las imágenes vinculadas :

  1. <ul class = "miniaturas" >
  2. <li clase = "span3" >
  3. <a href = "#" clase = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Para contenido HTML personalizado en miniaturas, el marcado cambia ligeramente. Para permitir el contenido de nivel de bloque en cualquier lugar, cambiamos <a>por un <div>me gusta así:

  1. <ul class = "miniaturas" >
  2. <li clase = "span3" >
  3. < clase div = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etiqueta de miniatura </h5>
  6. <p> Pie de foto en miniatura justo aquí... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Más ejemplos

Explore todas sus opciones con las diversas clases de cuadrícula disponibles para usted. También puede mezclar y combinar diferentes tamaños.

Valores predeterminados ligeros

Clase base reescrita

Con Bootstrap 2, hemos simplificado la clase base: .alerten lugar de .alert-message. También hemos reducido el marcado mínimo requerido: no <p>se requiere de forma predeterminada, solo el exterior <div>.

Mensaje de alerta único

Para un componente más duradero con menos código, eliminamos el aspecto diferenciador de las alertas de bloque, mensajes que vienen con más relleno y, por lo general, más texto. La clase también ha cambiado a .alert-block.


va muy bien con javascript

Bootstrap viene con un excelente complemento jQuery que admite mensajes de alerta, lo que hace que descartarlos sea rápido y fácil.

Obtener el complemento »

Alertas de ejemplo

Envuelva su mensaje y un icono de cierre opcional en un div con clase simple.

¡Advertencia! Será mejor que lo compruebes tú mismo, no te ves muy bien.
  1. < clase div = "alerta" >
  2. < clase de botón = "cerrar" datos-descartar = "alerta" > × </botón>
  3. <fuerte> ¡Advertencia! </strong> Será mejor que lo compruebes tú mismo, no te ves muy bien.
  4. </div>

¡Aviso! Los dispositivos iOS requieren un href="#"correo electrónico para descartar alertas. Asegúrese de incluirlo y el atributo de datos para los iconos de cierre de anclaje. Alternativamente, puede usar un <button>elemento con el atributo de datos, que hemos optado por hacer para nuestros documentos. Al usar <button>, debe incluirtype="button" o sus formularios no se enviarán.

Amplíe fácilmente el mensaje de alerta estándar con dos clases opcionales: .alert-blockpara más controles de relleno y texto y .alert-headingpara un encabezado coincidente.

¡Advertencia!

Será mejor que lo compruebes tú mismo, no te ves muy bien. Nulla vitae elit libero, un pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div clase = "alerta alerta-bloqueo" >
  2. <a clase = "cerrar" datos-descartar = "alerta" href = "#" > × </a>
  3. <h4 class = "alert-heading" > ¡Advertencia! </h4>
  4. Mejor compruébalo tú mismo, no eres...
  5. </div>

Alternativas contextuales Agregar clases opcionales para cambiar la connotación de una alerta

error o peligro

¡Oh, chasquido! Cambia algunas cosas e intenta enviarlo de nuevo.
  1. <div clase = "alerta alerta-error" >
  2. ...
  3. </div>

Éxito

¡Bien hecho! Ha leído con éxito este importante mensaje de alerta.
  1. <div clase = "alerta alerta-éxito" >
  2. ...
  3. </div>

Información

¡Aviso! Esta alerta necesita su atención, pero no es muy importante.
  1. <div clase = "alerta alerta-info" >
  2. ...
  3. </div>

Ejemplos y marcado

Básico

Barra de progreso predeterminada con un degradado vertical.

  1. < clase div = "progreso" >
  2. <div clase = "barra"
  3. estilo = " ancho : 60 %; " ></div>
  4. </div>

A rayas

Utiliza un degradado para crear un efecto de rayas (sin IE).

  1. <div clase = "progreso progreso-rayado" >
  2. <div clase = "barra"
  3. estilo = " ancho : 20 %; " ></div>
  4. </div>

Animado

Toma el ejemplo rayado y lo anima (sin IE).

  1. <div clase = "progreso progreso-rayado
  2. activo" >
  3. <div clase = "barra"
  4. estilo = " ancho : 40 %; " ></div>
  5. </div>

Opciones y soporte del navegador

Colores adicionales

Las barras de progreso usan algunas de las mismas clases de botones y alertas para lograr estilos uniformes.

barras rayadas

Similar a los colores sólidos, tenemos barras de progreso variadas a rayas.

Comportamiento

Las barras de progreso usan transiciones CSS3, por lo que si ajusta dinámicamente el ancho a través de javascript, cambiará de tamaño sin problemas.

Si usa la .activeclase, sus .progress-stripedbarras de progreso animarán las franjas de izquierda a derecha.

Compatibilidad con navegador

Las barras de progreso usan degradados, transiciones y animaciones CSS3 para lograr todos sus efectos. Estas características no son compatibles con IE7-9 o versiones anteriores de Firefox.

Opera e IE no admiten animaciones en este momento.

pozos

Use el pozo como un efecto simple en un elemento para darle un efecto de inserción.

¡Mira, estoy en un pozo!
  1. < clase div = "bien" >
  2. ...
  3. </div>

Cerrar icono

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

  1. < clase de botón = "cerrar" > × </botón>

Los dispositivos iOS requieren un href="#" para los eventos de clic si prefiere usar un ancla.

  1. <a clase = "cerrar" href = "#" > × </a>