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.

También puede combinar conjuntos de <div class="btn-group">en a <div class="btn-toolbar">para proyectos más complejos.

marcado de ejemplo

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

< clase div = "grupo-btn" > 
  <a clase = "btn" href = "#" > 1 </a>  
  <a clase = "btn" href = "#" > 2 </a>  
  <a clase = "btn" href = "#" > 3 </a>  
</div>

Y con una barra de herramientas para múltiples grupos:

< clase div = "btn-barra de herramientas" > 
  < clase div = "grupo-btn" > 
    ...
  </div>
</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 »

Aviso

CSS para grupos de botones está en un archivo separado, button-groups.less.

Menús desplegables de botones

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.

< clase div = "grupo-btn" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Acción
    <span clase = "intercalación" ></span> 
  </a>
  <ul clase = "menú desplegable" > 
    <!-- enlaces del menú desplegable -->
  </ul>
</div>

Menús desplegables de botones divididos

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.

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.

< clase div = "grupo-btn" > 
  <a class = "btn" href = "#" > Acción </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span clase = "intercalación" ></span> 
  </a>
  <ul clase = "menú desplegable" > 
    <!-- enlaces del menú desplegable -->
  </ul>
</div>

Valores predeterminados ligeros Mismo marcado, diferentes clases

Clase base poderosa

Todos los componentes de navegación aquí (pestañas, píldoras y listas) comparten el mismo marcado base y estilos en toda la .navclase.

¿Por qué pestañas y pastillas?

Las pestañas y las píldoras en Bootstrap se crean <ul>con el mismo HTML central, una lista de enlaces. Cambia entre pestañas o pastillas con solo una clase.

Ambas opciones son excelentes para subsecciones de contenido o para navegar entre páginas de contenido relacionado.

Pestañas básicas

Tome una lista regular <ul>de enlaces y agregue .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li clase = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pastillas basicas

Tome ese mismo HTML, pero use en su .nav-pillslugar:

<ul class = "píldoras de navegación de navegación" > 
  <li clase = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Apilable Hacer pestañas o pastillas verticales

Cómo apilarlos

Como las pestañas y las pastillas son horizontales de manera predeterminada, simplemente agregue una segunda clase, .nav-stacked, para que aparezcan apiladas verticalmente.

Pestañas apiladas

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pastillas apiladas

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Menús desplegables para componentes de navegación avanzados

Menús completos simplificados

Los menús desplegables en las pestañas y píldoras de Bootstrap son súper fáciles y solo requieren un poco de HTML adicional y un complemento ligero de jQuery.

Dirígete a la página de Javascript para leer los documentos sobre la inicialización de menús desplegables en Bootstrap.

Pestañas con menús desplegables

<ul class = "nav nav-tabs" > 
  <li clase = "desplegable" > 
    <a clase = "desplegable-alternar" 
       alternar datos = "desplegable"
       href = "#" >
        Desplegable
        <b clase = "intercalación" ></b> 
      </a>
    <ul clase = "menú desplegable" > 
      <!-- enlaces -->
    </ul>
  </li>
</ul>

Pastillas con menús desplegables

<ul class = "píldoras de navegación de navegación" > 
  <li clase = "desplegable" > 
    <a clase = "desplegable-alternar" 
       alternar datos = "desplegable"
       href = "#" >
        Desplegable
        <b clase = "intercalación" ></b> 
      </a>
    <ul clase = "menú desplegable" > 
      <!-- enlaces -->
    </ul>
  </li>
</ul>

Listas de navegación Cree navegaciones apiladas simples, ideales para barras laterales

Navegación al estilo de la aplicación

Las listas de navegación proporcionan una manera simple y fácil de crear grupos de enlaces de navegación con encabezados opcionales. Se utilizan mejor en barras laterales como Finder en OS X.

Estructuralmente, se basan en los mismos estilos de navegación básicos que las pestañas y las píldoras, por lo que el uso y la personalización son sencillos.

con iconos

Las listas de navegación también son fáciles de equipar con iconos. Agregue la etiqueta adecuada <i>con clase y listo.

Ejemplo de lista de navegación

Tome una lista de enlaces y agregue class="nav nav-list":

< clase ul = "nav lista-navegación" > 
  <li clase = "encabezado de navegación" > 
    Encabezado de lista
  </li>
  <li clase = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li>
    <a href = "#" > Biblioteca </a> 
  </li>
  ...
</ul>

Ejemplo con iconos

Mismo ejemplo, pero con <i>etiquetas para iconos.

< clase ul = "nav lista-navegación" > 
  ...
  <li>
    <a href = "#" > 
      <i clase = "libro-icono" ></i> 
      Biblioteca
    </a>
  </li>
  ...
</ul>

Navegación con pestañas Da vida a las pestañas a través de javascript

Qué está incluido

Haga que sus pestañas cobren vida con un complemento simple para alternar entre el contenido a través de las pestañas. Bootstrap integra pestañas tabulables en cuatro estilos: superior (predeterminado), derecha, inferior e izquierda.

Cambiar entre ellos es fácil y solo requiere cambiar muy poco marcado.

Ejemplo tabulado

Para hacer que las pestañas sean tabulables, envuélvelas .nav-tabsen otro div con class .tabbable.

Estoy en la Sección 1.

Hola, estoy en la Sección 2.

Qué tal chica, esta es la Sección 3.

Complemento jQuery personalizado

Todas las pestañas que se pueden tabular funcionan con nuestro ligero complemento jQuery. Obtenga más información sobre cómo dar vida a las pestañas que se pueden tabular en la página de documentos de JavaScript.

Obtener el javascript →

Marcado sencillo

El uso de pestañas con pestañas requiere un div envolvente, un conjunto de pestañas y un conjunto de paneles de contenido con pestañas.

< clase div = "tabable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Sección 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Sección 2 </a></li>  
  </ul>
  < clase div = "contenido de la pestaña" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Estoy en la Sección 1. </p>
    </div>
    < clase div = "panel de pestañas" id = "2" >  
      <p> Hola, estoy en la Sección 2. </p>
    </div>
  </div>
</div>

Tabulado en cualquier dirección

Pestañas en la parte inferior

Cambia el orden del HTML y agrega una clase para colocar pestañas en la parte inferior.

Estoy en la Sección A.

Hola, estoy en la Sección B.

Qué pasa chica, esta es la Sección C.

<div class = "pestañas tabulables a continuación" > 
  < clase div = "contenido de la pestaña" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Pestañas a la izquierda

Cambia la clase para poner pestañas a la izquierda.

Estoy en la Sección A.

Hola, estoy en la Sección B.

Qué pasa chica, esta es la Sección C.

<div class = "pestañas tabulables a la izquierda" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  < clase div = "contenido de la pestaña" > 
    ...
  </div>
</div>

Pestañas a la derecha

Cambia la clase para poner pestañas a la derecha.

Estoy en la Sección A.

Hola, estoy en la Sección B.

Qué pasa chica, esta es la Sección C.

<div class = "pestañas tabulables a la derecha" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  < clase div = "contenido de la pestaña" > 
    ...
  </div>
</div>

Ejemplo de barra de navegación estática

Un ejemplo de una barra de navegación estática (no fijada en la parte superior) con el nombre del proyecto, la navegación y el formulario de búsqueda.

Andamio de la barra de navegación

La barra de navegación requiere solo unos pocos divs para estructurarla bien para una visualización estática o fija.

< clase div = "barra de navegación" > 
  <div class = "navbar-inner" > 
    < clase div = "contenedor" > 
      ...
    </div>
  </div>
</div>

Para hacer que la barra de navegación se fije en la parte superior de la ventana gráfica, agregue .navbar-fixed-topal div más externo, .navbar. En su CSS, también deberá tener en cuenta la superposición que provoca al agregar padding-top: 40px;a su archivo <body>.

<div class = "barra de navegación barra de navegación superior fija" > 
  ...
</div>

Nombre de la marca

Un enlace simple para mostrar su marca o nombre de proyecto solo requiere una etiqueta de anclaje.

<a clase = "marca" href = "#" >  
  Nombre del proyecto
</a>

Formulario de búsqueda

Los formularios de búsqueda reciben estilos personalizados en la barra de navegación con la .navbar-searchclase. Incluir .pull-lefto .pull-righten el formpara alinearlo.

<form class = "navbar-search pull-left" > 
  < tipo de entrada = "texto" clase = "consulta de búsqueda" marcador de posición = "Buscar" >   
</formulario>

Variación de respuesta opcional

Dependiendo de la cantidad de contenido en su barra superior, es posible que desee implementar las opciones de respuesta. Para hacerlo, envuelva su contenido de navegación en un div que lo contenga .nav-collapse.collapse, y agregue el botón de alternancia de la barra de navegación, .btn-navbar.

< clase div = "barra de navegación" > 
  <div class = "navbar-inner" > 
    < clase div = "contenedor" > 
 
      <!-- .btn-navbar se usa para cambiar el contenido de la barra de navegación contraído -->
      <a class = "btn btn-navbar" alternar datos = "collapse" data-target = ".nav-collapse" >   
        <span clase = "barra de iconos" ></span> 
        <span clase = "barra de iconos" ></span> 
        <span clase = "barra de iconos" ></span> 
      </a>
 
      <!-- Asegúrese de dejar la marca ahí afuera si quiere que se muestre -->
      <a class = "marca" href = "#" > Nombre del proyecto </a>  
 
      <!-- Todo lo que quieras ocultar a 940px o menos, colócalo aquí -->
      < clase div = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

¡Aviso! La barra de navegación receptiva requiere el complemento de colapso .

Enlaces de navegación

Los elementos de navegación son fáciles de agregar a través de listas desordenadas.

< clase ul = "navegación" > 
  <li clase = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li><a href = "#" > Enlace </a></li> 
  <li><a href = "#" > Enlace </a></li> 
</ul>

Agregar menús desplegables

Agregar menús desplegables a la navegación es súper simple, pero requiere el uso de nuestro complemento de JavaScript .

< clase ul = "navegación" > 
  <li clase = "desplegable" > 
    <a href = "#" 
          clase = "desplegable-alternar"
          alternar datos = "desplegable" >
          Cuenta
          <b clase = "intercalación" ></b> 
    </a>
    <ul clase = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

Obtener el javascript →

¿Por qué usarlos?

La navegación con migas de pan se usa como una forma de mostrar a los usuarios dónde se encuentran dentro de una aplicación o un sitio, pero no para la navegación principal. Mantenga su uso escaso y sucinto para que sea más efectivo.

Ejemplos

Un solo ejemplo que se muestra tal como podría mostrarse en varias páginas.

Margen

HTML es su lista desordenada estándar con enlaces.

<ul clase = "miga de pan" > 
  <li>
    <a href = "#" > Inicio </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteca </a> <span class = "divider" > / </span>   
  </li>
  <li clase = "activo" > 
    <a href = "#" > Datos </a> 
  </li>
</ul>

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

< clase div = "paginación" > 
  <ul>
    <li><a href = "#" > Anterior </a></li> 
    <li clase = "activo" > 
      <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 = "#" > Siguiente </a></li> 
  </ul>
</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 marcado ligero y estilos aún más ligeros. Es genial para sitios simples como blogs o revistas.

Ejemplo predeterminado

De forma predeterminada, el buscapersonas centra los enlaces.

<ul class = "buscapersonas" > 
  <li>
    <a href = "#" > Anterior </a> 
  </li>
  <li>
    <a href = "#" > Siguiente </a> 
  </li>
</ul>

Enlaces alineados

Alternativamente, puede alinear cada enlace a los lados:

<ul class = "buscapersonas" > 
  <li clase = "anterior" > 
    <a href = "#" > ← mayores </a> 
  </li>
  <li clase = "siguiente" > 
    <a href = "#" > Más reciente → </a> 
  </li>
</ul>

Etiquetas	Margen
Defecto	`<span class="label">Default</span>`
Nuevo	`<span class="label label-success">New</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>`

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 :

<ul class = "miniaturas" > 
  <li clase = "span3" > 
    <a href = "#" clase = "miniatura" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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í:

<ul class = "miniaturas" > 
  <li clase = "span3" > 
    < clase div = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etiqueta de miniatura </h5>
      <p> Pie de foto en miniatura justo aquí... </p>
    </div>
  </li>
  ...
</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.

< clase div = "alerta" > 
  <a clase = "cerrar" > × </a> 
  <fuerte> ¡Advertencia! </strong> Será mejor que lo compruebes tú mismo, no te ves muy bien.
</div>

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.

<div clase = "alerta alerta-bloqueo" > 
  <a clase = "cerrar" > × </a> 
  <h4 class = "alert-heading" > ¡Advertencia! </h4> 
  Mejor compruébalo tú mismo, no eres...
</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.

<div clase = "alerta alerta-error" > 
  ...
</div>

Éxito

× ¡Bien hecho! Ha leído con éxito este importante mensaje de alerta.

<div clase = "alerta alerta-éxito" > 
  ...
</div>

Información

× ¡Aviso! Esta alerta necesita su atención, pero no es muy importante.

<div clase = "alerta alerta-info" > 
  ...
</div>

Ejemplos y marcado

Básico

Barra de progreso predeterminada con un degradado vertical.

< clase div = "progreso" > 
  <div clase = "barra" 
       estilo = " ancho : 60 %; " ></div> 
</div>

A rayas

Utiliza un degradado para crear un efecto de rayas.

<div clase = "progreso progreso-info 
     progreso-rayado" >
  <div clase = "barra" 
       estilo = " ancho : 20 %; " ></div> 
</div>

Animado

Toma el ejemplo rayado y lo anima.

<div clase = "progreso progreso-peligro 
     progreso-rayado activo" >
  <div clase = "barra" 
       estilo = " ancho : 40 %; " ></div> 
</div>

Opciones y soporte del navegador

Colores adicionales

Las barras de progreso utilizan algunos de los mismos nombres de clase que los botones y alertas para un estilo similar.

.progress-info
.progress-success
.progress-danger

Alternativamente, puede personalizar los archivos LESS y rodar sus propios colores y tamaños.

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-8 o versiones anteriores de Firefox.

Opera no admite 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!

< clase div = "bien" > 
  ...
</div>

Insignias

Use una insignia en un elemento para un recuento no leído o como un indicador simple.

<span clase = "insignia" > 3 </div>

Cerrar icono

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

< una clase = "cerrar" > × </a>

Grupos de botones Únase a los botones para obtener más funciones similares a las de una barra de herramientas

Grupos de botones

marcado de ejemplo

Casilla de verificación y sabores de radio

Aviso

Menús desplegables de botones Menús desplegables contextuales basados ​​en grupos de botones

Menús desplegables de botones

marcado de ejemplo

Menús desplegables de botones divididos

marcado de ejemplo

Navegación, pestañas y pastillas Navegación de estilo de lista altamente personalizable

Valores predeterminados ligeros Mismo marcado, diferentes clases

Clase base poderosa

¿Por qué pestañas y pastillas?

Pestañas básicas

Pastillas basicas

Apilable Hacer pestañas o pastillas verticales

Cómo apilarlos

Pestañas apiladas

Pastillas apiladas

Menús desplegables para componentes de navegación avanzados

Menús completos simplificados

Pestañas con menús desplegables

Pastillas con menús desplegables

Listas de navegación Cree navegaciones apiladas simples, ideales para barras laterales

Navegación al estilo de la aplicación

con iconos

Ejemplo de lista de navegación

Ejemplo con iconos

Navegación con pestañas Da vida a las pestañas a través de javascript

Qué está incluido

Ejemplo tabulado

Complemento jQuery personalizado

Marcado sencillo

Tabulado en cualquier dirección

Pestañas en la parte inferior

Pestañas a la izquierda

Pestañas a la derecha

barra de navegación

Ejemplo de barra de navegación estática

Andamio de la barra de navegación

Nombre de la marca

Formulario de búsqueda

Variación de respuesta opcional

Enlaces de navegación

Agregar menús desplegables

Migas de pan

¿Por qué usarlos?

Ejemplos

Margen

Paginación Dos opciones para paginar el contenido

Paginación multicon-página

Cuándo usar

Enlaces de página con estado

Alineación flexible

Ejemplos

Margen

Pager Para enlaces rápidos anteriores y siguientes

Acerca del localizador

Ejemplo predeterminado

Enlaces alineados

Etiquetas en línea Etiquetar y anotar texto

Miniaturas Cuadrículas de imágenes, videos, texto y más

Miniaturas predeterminadas

Altamente personalizable

Etiqueta de miniatura

Etiqueta de miniatura

Por qué usar miniaturas

Marcado simple y flexible

Utiliza tamaños de columna de cuadrícula

el marcado

Más ejemplos

Estilos de alertas para mensajes de éxito, advertencia y error

Valores predeterminados ligeros

Clase base reescrita

Mensaje de alerta único

va muy bien con javascript

Alertas de ejemplo

¡Advertencia!

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

Menús desplegables de botones Menús desplegables contextuales basados en grupos de botones