Grupos de botones

Utilice grupos de botones para unir varios botones como un componente compuesto. Constrúyalos 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:

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

Ejemplo de barra de herramientas

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

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

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.

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.

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

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.

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.

< clase div = "grupo-btn" > 
  ...
  <ul class = "menú desplegable hacia la derecha" > 
    <!-- enlaces del menú desplegable -->
  </ul>
</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.

< clase div = "grupo-btn" > 
  <button class = "btn" > Acción </button> 
  < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span clase = "intercalación" ></span> 
  </botón>
  <ul clase = "menú desplegable" > 
    <!-- enlaces del menú desplegable -->
  </ul>
</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.

< clase div = "desplegable del grupo btn" > 
  <button class = "btn" > Desplegar </button> 
  < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span clase = "intercalación" ></span> 
  </botón>
  <ul clase = "menú desplegable" > 
    <!-- enlaces del menú desplegable -->
  </ul>
</div>

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.

Cuándo usar

Las pestañas y las pastillas son excelentes para secciones de contenido o para navegar entre páginas de contenido relacionado.

Alineación de componentes

Para alinear los enlaces de navegación, use las clases de utilidad .pull-lefto . .pull-rightAmbas clases agregarán un CSS flotante en la dirección especificada.

Pestañas básicas

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

• Hogar
• Perfil
• Mensajes

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

• Hogar
• Perfil
• Mensajes

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

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

• Hogar
• Perfil
• Mensajes

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

Pastillas apiladas

• Hogar
• Perfil
• Mensajes

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

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

• Hogar
• Ayuda
• Desplegable
  • Acción
  • Otra acción
  • algo mas aqui
  • Enlace separado

<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

• Hogar
• Ayuda
• Desplegable
  • Acción
  • Otra acción
  • algo mas aqui
  • Enlace separado

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

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.

Divisores horizontales

Agregue un divisor horizontal creando un elemento de lista vacío con la clase .divider, así:

< clase ul = "nav lista-navegación" > 
  ...
  <li clase = "divisor" ></li> 
  ...
</ul>

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>

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.

Fundido en pestañas

Para hacer que las pestañas se desvanezcan, agréguelas .fadea cada .tab-pane.

Requiere complemento jQuery

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 →

Ejemplo tabulado

Para hacer que las pestañas se puedan tabular, cree una .tab-paneID única para cada pestaña y envuélvalas en .tab-content.

Para pestañas alineadas a la derecha o a la izquierda, envuelva el .nav-tabsy .tab-contenten .tabbable.

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.

<div class = "tabbable" > <-- Solo se requiere para pestañas izquierda/derecha --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sección 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sección 2 </a></li>  
  </ul>
  < clase div = "contenido de la pestaña" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Estoy en la Sección 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hola, estoy en la Sección 2. </p>
    </div>
  </div>
</div>

Pestañas en la parte inferior

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

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

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

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

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>

barra de navegación fija

Fija la barra de navegación en la parte superior o inferior de la ventana gráfica con una clase adicional en el div más externo, .navbar.

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

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

Cuando fije la barra de navegación, recuerde tener en cuenta el área oculta debajo. Agregue 40 px o más de relleno al archivo <body>. Asegúrese de agregar esto después del CSS principal de Bootstrap y antes del CSS receptivo opcional.

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>

Formularios en la barra de navegación

Para diseñar y colocar correctamente un formulario dentro de la barra de navegación, agregue las clases apropiadas como se muestra a continuación. Para un formulario predeterminado, incluya .navbar-formy .pull-lefto .pull-rightpara alinearlo correctamente.

<form class = "navbar-form pull-left" > 
  < tipo de entrada = "texto" clase = "span2" >  
</formulario>

Para un formulario de búsqueda más personalizado, agregue .navbar-searcha formy .search-querya la entrada de estilos especializados en la barra de navegación.

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

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>

Puede agregar fácilmente divisores a sus enlaces de navegación con un elemento de lista vacío y una clase simple. Solo agrega esto entre los enlaces:

< clase ul = "navegación" > 
  ...
  <li clase = "divisor-vertical" ></li> 
  ...
</ul>

Alineación de componentes

Para alinear una navegación, un formulario de búsqueda o un texto, utilice las clases de utilidad .pull-lefto . .pull-rightAmbas clases agregarán un CSS flotante en la dirección especificada.

Adición de menús desplegables

Agregar menús desplegables y menús desplegables a la navegación es muy 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 →

Texto en la barra de navegación

Envuelva las cadenas de texto en un <.navbar-text>, generalmente en una <p>etiqueta para un interlineado y color adecuados.

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

• Hogar

• Inicio /
• Biblioteca

• Inicio /
• biblioteca /
• Datos

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 class = "activo" > Datos </li> 
</ul>

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>

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.

• Anterior
• próximo

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

• ← Mayores
• Más reciente →

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

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

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í:

<div clase = "unidad-héroe" > 
  <h1> Título </h1>
  <p> Lema </p>
  <p>
    <a clase = "btn btn-principal btn-grande" > 
      Aprende más
    </a>
  </p>
</div>

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

< clase div = "encabezado de página" > 
  <h1> Ejemplo de encabezado de página </h1>
</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 directo. 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.

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.

< clase div = "alerta" > 
  < clase de botón = "cerrar" datos-descartar = "alerta" > × </botón>  
  <fuerte> ¡Advertencia! </strong> Será mejor que lo compruebes tú mismo, no te ves muy bien.
</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 buttonelemento con el atributo de datos, que hemos optado por hacer para nuestros documentos.

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.

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

error o peligro

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

Éxito

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

Información

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

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 (sin IE).

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

Animado

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

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

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.

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

Cerrar icono

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

×

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

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

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