Ejemplo

Menú contextual conmutable para mostrar listas de enlaces. Hecho interactivo con el complemento de JavaScript desplegable .

<ul class = "menú desplegable" rol = "menú" aria-labelledby = "menú desplegable" >   
  <li><a tabindex = "-1" href = "#" > Acción </a></li>  
  <li><a tabindex = "-1" href = "#" > Otra acción </a></li>  
  <li><a tabindex = "-1" href = "#" > Algo más aquí </a></li>  
  <li clase = "divisor" ></li> 
  <li><a tabindex = "-1" href = "#" > Enlace separado </a></li>  
</ul>

Margen

Mirando solo el menú desplegable, aquí está el HTML requerido. Debe envolver el activador del menú desplegable y el menú desplegable dentro .dropdownde , u otro elemento que declare position: relative;. Luego solo crea el menú.

< clase div = "desplegable" > 
  <!-- Enlace o botón para cambiar el menú desplegable -->
  < clase ul = "menú desplegable" rol = "menú" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Acción </a></li>  
    <li><a tabindex = "-1" href = "#" > Otra acción </a></li>  
    <li><a tabindex = "-1" href = "#" > Algo más aquí </a></li>  
    <li clase = "divisor" ></li> 
    <li><a tabindex = "-1" href = "#" > Enlace separado </a></li>  
  </ul>
</div>

Opciones

Alinee los menús a la derecha y agregue niveles adicionales de menús desplegables.

Alineación de los menús

Agregue .pull-righta .dropdown-menupara alinear a la derecha el menú desplegable.

<ul class = "menú desplegable pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Submenús en menús desplegables

Agregue un nivel adicional de menús desplegables, que aparecen al pasar el mouse como los de OS X, con algunas adiciones de marcado simples. Agregue .dropdown-submenua cualquiera lien un menú desplegable existente para un estilo automático.

< clase ul = "menú desplegable" rol = "menú" aria-labelledby = "dLabel" >   
  ...
  <li clase = "submenú desplegable" > 
    <a tabindex = "-1" href = "#" > Más opciones </a>  
    <ul clase = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

Ejemplos

Dos opciones básicas, junto con dos variaciones más específicas.

Grupo de un solo botón

Envuelve una serie de botones .btncon .btn-group.

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

Múltiples grupos de botones

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>

Grupos de botones verticales

Haga que un conjunto de botones aparezcan apilados verticalmente en lugar de horizontalmente.

<div clase = "btn-grupo btn-grupo-vertical" > 
  ...
</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.

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.

< 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 botones desplegables funcionan en cualquier tamaño: .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

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.

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

Tallas

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

< clase div = "grupo-btn" > 
  <button class = "btn btn-mini" > Acción </button> 
  < clase de botón = "btn btn-mini 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>

Valores predeterminados ligeros Mismo marcado, diferentes clases

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

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>

Estado deshabilitado

Para cualquier componente de navegación (pestañas, píldoras o lista), agregue enlaces grises y sin efectos.disabled de desplazamiento . Sin embargo, se podrá hacer clic en los enlaces a menos que elimine el atributo. Alternativamente, podría implementar JavaScript personalizado para evitar esos clics.href

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

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.

apilable

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>

Listas deplegables

Agregue menús desplegables con un poco de HTML adicional y el complemento JavaScript de menús desplegables .

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

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.

Ejemplo de lista de navegación

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

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

NotaPara anidar dentro de una lista de navegación, incluya class="nav nav-list"en cualquier archivo <ul>.

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>

Navegación con pestañas

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.

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.

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

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 .

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.

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

barra de navegación básica

Para empezar, las barras de navegación son estáticas (no fijas en la parte superior) e incluyen soporte para un nombre de proyecto y navegación básica. Coloque uno en cualquier lugar dentro de un .container, que establece el ancho de su sitio y contenido.

< clase div = "barra de navegación" > 
  <div class = "navbar-inner" > 
    <a class = "marca" href = "#" > Título </a>  
    < clase ul = "navegación" > 
      <li class = "activo" ><a href = "#" > Inicio </a></li>  
      <li><a href = "#" > Enlace </a></li> 
      <li><a href = "#" > Enlace </a></li> 
    </ul>
  </div>
</div>

Componentes de la barra de navegación

Marca

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

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

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>

Formularios

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" >  
  < tipo de botón = "enviar" clase = "btn" > Enviar </botón>  
</formulario>

Formulario de búsqueda

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>

Alineación de componentes

Alinee los enlaces de navegación, el formulario de búsqueda o el texto, use las clases de utilidad .pull-lefto . .pull-rightAmbas clases agregarán un CSS flotante en la dirección especificada.

Usar menús desplegables

Agregue menús desplegables y menús desplegables a la navegación con un poco de marcado y el complemento JavaScript de menús desplegables .

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

Visite la documentación de los menús desplegables de JavaScript para obtener más marcas e información sobre cómo llamar a los menús desplegables.

Texto

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

Variaciones de visualización opcionales

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.

fijo en la parte superior

Agregue .navbar-fixed-topy recuerde tener en cuenta el área oculta debajo agregando al menos 40 px paddingal archivo <body>. Asegúrese de agregar esto después del CSS principal de Bootstrap y antes del CSS receptivo opcional.

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

Fijado al fondo

Añadir .navbar-fixed-bottomen su lugar.

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

Barra de navegación superior estática

Cree una barra de navegación de ancho completo que se desplace con la página agregando .navbar-static-top. A diferencia de la .navbar-fixed-topclase, no necesita cambiar ningún relleno en el archivo body.

< clase div = "navbar navbar-static-top" > 
  ...
</div>

Barra de navegación receptiva

Para implementar una barra de navegación receptiva colapsable, envuelva el contenido de su barra 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í -->
      <div class = "nav-collapse colapso" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

variación invertida

Modifique el aspecto de la barra de navegación agregando .navbar-inverse.

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

Ejemplos

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

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

Paginación estándar

Paginación simple 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.

< clase div = "paginación" > 
  <ul>
    <li><a href = "#" > Anterior </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 = "#" > Siguiente </a></li> 
  </ul>
</div>

Opciones

Estados inhabilitados y activos

Los enlaces son personalizables para diferentes circunstancias. Úselo .disabledpara enlaces en los que no se puede hacer clic y .activepara indicar la página actual.

< clase div = "paginación" > 
  <ul>
    <li clase = "deshabilitado" ><a href = "#" > Anterior </a></li>  
    <li clase = "activo" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Opcionalmente, puede intercambiar anclas activas o deshabilitadas por tramos para eliminar la funcionalidad de clic y conservar los estilos previstos.

< clase div = "paginación" > 
  <ul>
    <li clase = "deshabilitado" ><span> Anterior </span></li> 
    <li clase = "activo" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Tallas

¿Te apetece una paginación más grande o más pequeña? Agregue .pagination-large, .pagination-smallo .pagination-minipara tamaños adicionales.

<div clase = "paginación paginación-grande" > 
  <ul>
    ...
  </ul>
</div>
< clase div = "paginación" > 
  <ul>
    ...
  </ul>
</div>
<div clase = "paginación paginación-pequeña" > 
  <ul>
    ...
  </ul>
</div>
<div clase = "paginación paginación-mini" > 
  <ul>
    ...
  </ul>
</div>

Alineación

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

<div class = "paginación centrada en la paginación" > 
  ...
</div>

<div clase = "paginación paginación derecha" > 
  ...
</div>

Buscapersonas

Vínculos rápidos anteriores y siguientes para implementaciones de paginación simples con marcas y estilos 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>

Estado deshabilitado opcional

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

<ul class = "buscapersonas" > 
  <li clase = "anterior deshabilitado" > 
    <a href = "#" > ← mayores </a> 
  </li>
  ...
</ul>

Etiquetas

Insignias

unidad de héroe

Un componente ligero y flexible para mostrar contenido clave en su sitio. Funciona bien en sitios de marketing y de contenido pesado.

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

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

< clase div = "encabezado de página" > 
  <h1> Encabezado de página de ejemplo <small> Subtexto para encabezado </small></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.

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.

Margen

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 = "span4" > 
    <a href = "#" clase = "miniatura" >  
      <img src = "https://placehold.it/300x200" 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 = "span4" > 
    < clase div = "miniatura" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Etiqueta de miniatura </h3>
      <p> Título de la miniatura... </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.

Alerta predeterminada

Envuelva cualquier texto y un botón de descartar opcional .alertpara un mensaje de alerta de advertencia básico.

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

Descartar botones

Los navegadores Mobile Safari y Mobile Opera, además del data-dismiss="alert"atributo, requieren un href="#"para descartar alertas cuando se usa una <a>etiqueta.

<a href = "#" clase = "cerrar" datos-descartar = "alerta" > × </a>   

Alternativamente, puede usar un <button>elemento con el atributo de datos, que hemos optado por hacer para nuestros documentos. Al usar <button>, debe incluir type="button"o sus formularios no se enviarán.

< tipo de botón = "botón" clase = "cerrar" datos-descartar = "alerta" > × </botón>   

Descartar alertas a través de JavaScript

Utilice el complemento jQuery de alertas para descartar alertas de forma rápida y sencilla.

Opciones

Para mensajes más largos, aumente el relleno en la parte superior e inferior del envoltorio de alerta agregando .alert-block.

<div clase = "alerta alerta-bloqueo" > 
  < tipo de botón = "botón" clase = "cerrar" datos-descartar = "alerta" > × </botón>   
  <h4> ¡Advertencia! </h4>
  Mejor compruébalo tú mismo, no eres...
</div>

alternativas contextuales

Agregue clases opcionales para cambiar la connotación de una alerta.

error o peligro

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

Éxito

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

Información

<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. No disponible en IE7-8.

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

Animado

Agregue .activea .progress-stripedpara animar las rayas de derecha a izquierda. No disponible en todas las versiones de IE.

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

apilado

Coloque varias barras en el mismo .progresspara apilarlas.

< clase div = "progreso" > 
  <div class = "bar bar-éxito" style = " ancho : 35 %; " ></div>   
  <div class = "bar bar-advertencia" style = " ancho : 20 %; " ></div>   
  <div class = "bar bar-peligro" style = " ancho : 10 %; " ></div>   
</div>

Opciones

Colores adicionales

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

< clase div = "progreso información-progreso" > 
  <div clase = "barra" estilo = " ancho : 20 % " ></div>   
</div>
<div clase = "progreso progreso-éxito" > 
  <div clase = "barra" estilo = " ancho : 40 % " ></div>   
</div>
<div clase = "progreso progreso-advertencia" > 
  <div clase = "barra" estilo = " ancho : 60 % " ></div>   
</div>
<div clase = "progreso progreso-peligro" > 
  <div clase = "barra" estilo = " ancho : 80 % " ></div>   
</div>

barras rayadas

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

<div clase = "progreso progreso-info progreso-rayado" > 
  <div clase = "barra" estilo = " ancho : 20 % " ></div>   
</div>
<div clase = "progreso progreso-éxito progreso-rayado" > 
  <div clase = "barra" estilo = " ancho : 40 % " ></div>   
</div>
<div clase = "progreso progreso-advertencia progreso-rayado" > 
  <div clase = "barra" estilo = " ancho : 60 % " ></div>   
</div>
<div clase = "progreso progreso-peligro progreso-rayado" > 
  <div clase = "barra" estilo = " ancho : 80 % " ></div>   
</div>

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.

Las versiones anteriores a Internet Explorer 10 y Opera 12 no admiten animaciones.

Estilos de objetos abstractos para construir varios tipos de componentes (como comentarios de blog, tweets, etc.) que presentan una imagen alineada a la izquierda o a la derecha junto con contenido de texto.

Ejemplo predeterminado

Los medios predeterminados permiten hacer flotar un objeto de medios (imágenes, video, audio) a la izquierda o derecha de un bloque de contenido.

Encabezado de medios

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Encabezado de medios

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Encabezado de medios

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

< clase div = "medios" > 
  <a clase = "tirar a la izquierda" href = "#" >  
    <img class = "objeto multimedia" src = "https://placehold.it/64x64" >  
  </a>
  < clase div = "cuerpo de medios" > 
    <h4 class = "media-heading" > Encabezado de medios </h4> 
    ...
 
    <!-- Objeto multimedia anidado -->
    < clase div = "medios" > 
      ...
    </div>
  </div>
</div>

Lista de medios

Con un poco de marcado adicional, puede usar medios dentro de la lista (útil para hilos de comentarios o listas de artículos).

<ul class = "lista de medios" > 
  <li clase = "medios" > 
    <a clase = "tirar a la izquierda" href = "#" >  
      <img class = "objeto multimedia" src = "https://placehold.it/64x64" >  
    </a>
    < clase div = "cuerpo de medios" > 
      <h4 class = "media-heading" > Encabezado de medios </h4> 
      ...
 
      <!-- Objeto multimedia anidado -->
      < clase div = "medios" > 
        ...
     </div>
    </div>
  </li>
</ul>

pozos

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

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

Clases opcionales

Controle el relleno y las esquinas redondeadas con dos clases de modificadores opcionales.

<div class = "bien bien-grande" > 
  ...
</div>

<div class = "bien bien-pequeño" > 
  ...
</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>  

clases de ayuda

Clases simples y enfocadas para pequeños ajustes de visualización o comportamiento.

.tirar a la izquierda

Flotar un elemento a la izquierda

clase = "tirar a la izquierda"

. tirar - izquierda {
  flotante : izquierda ;
}

.tirar a la derecha

Flotar un elemento a la derecha

clase = "tirar a la derecha"

. tirar - derecha {
  flotante : derecho ;
}

.apagado

Cambiar el color de un elemento a#999

clase = "silenciado"

. silenciado {
  color : #999; 
}

.clearfix

Borrar el floaten cualquier elemento

clase = "arreglar"

. arreglo claro {
  * zoom : 1 ; 
  &: antes ,
  &: después de {
    pantalla : mesa ;
    contenido : "" ; 
  }
  &: después de {
    claro : ambos ;
  }
}