Grupos de botóns

Use grupos de botóns para unir varios botóns xuntos como un compoñente composto. Constrúeos cunha serie de <a>ou <button>elementos.

Mellores prácticas

Recomendamos as seguintes pautas para usar grupos de botóns e barras de ferramentas:

• Use sempre o mesmo elemento nun único grupo de botóns <a>ou <button>.
• Non mesture botóns de cores diferentes no mesmo grupo de botóns.
• Use iconas ademais do texto ou en lugar do texto, pero asegúrese de incluír o texto alternativo e do título cando corresponda.

Os grupos de botóns relacionados con menús despregables (ver máis abaixo) deberían chamarse por separado e incluír sempre un cursor despregable para indicar o comportamento previsto.

Exemplo predeterminado

Así é como busca o HTML para un grupo de botóns estándar construído con botóns de etiqueta de ancoraxe:

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

Exemplo de barra de ferramentas

Combina conxuntos de <div class="btn-group">para <div class="btn-toolbar">os compoñentes máis complexos.

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

Caixa de verificación e sabores de radio

Os grupos de botóns tamén poden funcionar como radios, onde só un botón pode estar activo, ou caixas de verificación, onde pode estar activo calquera número de botóns. Consulta os documentos de Javascript para iso.

Obter o javascript »

Menú despregable en grupos de botóns

Aviso! Os botóns con menú despregable deben estar envoltos individualmente .btn-groupdentro dunha .btn-toolbarpara a representación correcta.

Visión xeral e exemplos

Use calquera botón para activar un menú despregable colocándoo dentro dun .btn-groupe proporcionando a marca de menú adecuada.

Exemplo de marcado

Semellante a un grupo de botóns, o noso marcado usa o marcado de botóns normal, pero con un puñado de engadidos para refinar o estilo e admitir o complemento jQuery de Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Acción
    <span class = "caret" ></span> 
  </a>
  <ul class = "menú desplegable" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</div>

Funciona con todos os tamaños de botóns

Os menús despregables de botóns funcionan en calquera tamaño. o tamaño dos teus botóns é .btn-large, .btn-small, ou .btn-mini.

Require javascript

Os menús despregables de botóns requiren o complemento Bootstrap para funcionar.

Nalgúns casos, como os móbiles, os menús despregables estenderanse fóra da ventana gráfica. Debe resolver o aliñamento manualmente ou con javascript personalizado.

Visión xeral e exemplos

Partindo dos estilos e marcas do grupo de botóns, podemos crear facilmente un botón dividido. Os botóns de división presentan unha acción estándar á esquerda e un menú despregable á dereita con ligazóns contextuais.

Tallas

Use as clases de botóns adicionais .btn-mini, .btn-smallou .btn-largepara o tamaño.

<div class = "btn-group" > 
  ...
  <ul class = "menú desplegable tirar á dereita" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</div>

Exemplo de marcado

Ampliamos os menús despregables de botóns normais para proporcionar unha segunda acción de botón que funciona como un disparador de menú despregable separado.

<div class = "btn-group" > 
  <button class = "btn" > Acción </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menú desplegable" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</div>

Menús desplegables

Os menús despregables tamén se poden cambiar de abaixo cara arriba engadindo unha única clase ao pai inmediato de .dropdown-menu. Voltará a dirección do .caretmenú e cambiará a posición do propio menú para moverse de abaixo cara arriba en lugar de de arriba abaixo.

<div class = "eliminación do grupo btn" > 
  <button class = "btn" > Despegar </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menú desplegable" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</div>

Clase base poderosa

Todos os compoñentes de navegación aquí (pestanas, pílulas e listas) comparten o mesmo marcado base e estilos a través da .navclase.

Cando usar

As pestanas e as pílulas son excelentes para seccións de contido ou para navegar entre páxinas de contido relacionado.

Aliñación de compoñentes

Para aliñar as ligazóns de navegación, use as clases de utilidade .pull-leftou . .pull-rightAmbas clases engadirán un flotante CSS na dirección especificada.

Fichas básicas

Toma unha <ul>ligazón regular e engade .nav-tabs:

• Casa
• Perfil
• Mensaxes

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

Pastillas básicas

Tome o mesmo HTML, pero use no seu .nav-pillslugar:

• Casa
• Perfil
• Mensaxes

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

Como apilalos

Como as pestanas e as pílulas son horizontais por defecto, só tes que engadir unha segunda clase, .nav-stacked, para que aparezan apiladas verticalmente.

Fichas apiladas

• Casa
• Perfil
• Mensaxes

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

Pastillas apiladas

• Casa
• Perfil
• Mensaxes

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

Menús ricos feitos fáciles

Os menús despregables nas pestanas e pílulas de Bootstrap son moi sinxelos e só requiren un pouco de HTML extra e un complemento jQuery lixeiro.

Diríxete á páxina de Javascript para ler os documentos sobre a inicialización de menús despregables en Bootstrap.

Pestanas con menú despregable

• Casa
• Axuda
• Despregar menú
  • Acción
  • Outra acción
  • Algo máis aquí
  • Ligazón separada

<ul class = "nav nav-tabs" > 
  <li class = "menú desplegable" > 
    <a class = "alternar desplegable" 
       data-toggle = "menús desplegable"
       href = "#" >
        Despregar menú
        <b class = "caret" ></b> 
      </a>
    <ul class = "menú desplegable" > 
      <!-- ligazóns -->
    </ul>
  </li>
</ul>

Pastillas con menú despregable

• Casa
• Axuda
• Despregar menú
  • Acción
  • Outra acción
  • Algo máis aquí
  • Ligazón separada

<ul class = "nav nav-pills" > 
  <li class = "menú desplegable" > 
    <a class = "alternar desplegable" 
       data-toggle = "menús desplegable"
       href = "#" >
        Despregar menú
        <b class = "caret" ></b> 
      </a>
    <ul class = "menú desplegable" > 
      <!-- ligazóns -->
    </ul>
  </li>
</ul>

Navegación ao estilo de aplicación

As listas de navegación ofrecen un xeito sinxelo e sinxelo de crear grupos de ligazóns de navegación con cabeceiras opcionais. Utilízanse mellor en barras laterais como o Finder en OS X.

Estruturalmente, están construídos nos mesmos estilos de navegación básicos que as pestanas e as pílulas, polo que o uso e a personalización son sinxelos.

Con iconas

As listas de navegación tamén son fáciles de equipar con iconas. Engade a etiqueta adecuada <i>coa clase e listo.

Separadores horizontais

Engade un divisor horizontal creando un elemento de lista baleiro coa clase .divider, así:

<ul class = "nav nav-list" > 
  ...
  <li class = "divisor" ></li> 
  ...
</ul>

Exemplo de lista de navegación

Colle unha lista de ligazóns e engade class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Cabeceira da lista
  </li>
  <li class = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li>
    <a href = "#" > Biblioteca </a> 
  </li>
  ...
</ul>

Exemplo con iconas

Mesmo exemplo, pero con <i>etiquetas para as iconas.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "libro de iconas" ></i> 
      Biblioteca
    </a>
  </li>
  ...
</ul>

Que está incluído

Da vida ás túas pestanas cun sinxelo complemento para alternar entre contidos mediante pestanas. Bootstrap integra pestanas con tabulacións en catro estilos: superior (predeterminado), dereita, inferior e esquerda.

Cambiar entre eles é doado e só require cambiar moi pouco o marcado.

Desvanecerse nas pestanas

Para que as pestanas se desvanezan, engade .fadea cada unha .tab-pane.

Require o complemento jQuery

Todas as pestanas con tabulacións están alimentadas polo noso complemento lixeiro jQuery. Lea máis sobre como dar vida ás pestanas con tabulacións na páxina de documentos de javascript .

Obter o javascript →

Exemplo tabulable

Para que as pestanas sexan tabulables, cree un .tab-paneID único para cada pestana e engádeas en formato .tab-content.

Para as pestanas aliñadas á dereita ou á esquerda, envolve .nav-tabse .tab-contentdentro.tabbable .

Marcado sinxelo

O uso de pestanas con pestanas require un div de envoltura, un conxunto de pestanas e un conxunto de paneis de contido con pestanas.

<div class = "tabbable" > <-- Só é necesario para as pestanas esquerda/dereita --> 
  <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>
  <div class = "contido da pestana" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Estou na Sección 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Ola, estou na Sección 2. </p>
    </div>
  </div>
</div>

Pestanas na parte inferior

Cambia a orde do HTML e engade unha clase para poñer pestanas na parte inferior.

<div class = "pestanas con tabulacións abaixo" > 
  <div class = "contido da pestana" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Pestanas á esquerda

Cambia a clase para poñer as pestanas á esquerda.

<div class = "tabulacións á esquerda" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "contido da pestana" > 
    ...
  </div>
</div>

Pestanas á dereita

Cambia a clase para poñer as pestanas á dereita.

<div class = "tabulacións á dereita" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "contido da pestana" > 
    ...
  </div>
</div>

Andamios Navbar

A barra de navegación require só uns poucos divs para estruturala ben para a visualización estática ou fixa.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "contedor" > 
      ...
    </div>
  </div>
</div>

Barra de navegación fixa

Corrixe a barra de navegación na parte superior ou inferior da ventana gráfica cunha clase adicional no div máis externo, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Cando fixes a barra de navegación, recorda que debes ter en conta a área oculta debaixo. Engade 40 píxeles ou máis de recheo ao<body> . Asegúrate de engadir isto despois do CSS Bootstrap básico e antes do CSS de resposta opcional.

Marca

Unha ligazón sinxela para mostrar o nome da túa marca ou proxecto só require unha etiqueta de referencia.

<a class = "marca" href = "#" >  
  Nome do proxecto
</a>

Formularios na barra de navegación

Para colocar e colocar correctamente un formulario dentro da barra de navegación, engade as clases adecuadas como se mostra a continuación. Para un formulario predeterminado, inclúa .navbar-forme .pull-leftou .pull-rightpara aliñalo correctamente.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

Para obter un formulario de busca máis personalizado, engade .navbar-searchá entrada forme .search-queryá entrada de estilos especializados na barra de navegación.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Buscar" >   
</form>

Variación de resposta opcional

Dependendo da cantidade de contido da túa barra superior, quizais queiras implementar as opcións de resposta. Para facelo, envolve o contido de navegación nun div que contén .nav-collapse.collapse, e engade o botón de alternancia da barra de navegación, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "contedor" > 
 
      <!-- .btn-navbar úsase como conmutador para o contido contraído da barra de navegación -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Asegúrate de deixar a marca aí fóra se queres que se mostre -->
      <a class = "brand" href = "#" > Nome do proxecto </a>  
 
      <!-- Todo o que queres oculto a 940 píxeles ou menos, colócao aquí -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Ligazóns de navegación

Os elementos de navegación son sinxelos de engadir mediante listas non ordenadas.

<ul class = "nav" > 
  <li class = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li><a href = "#" > Ligazón </a></li> 
  <li><a href = "#" > Ligazón </a></li> 
</ul>

Podes engadir facilmente divisores ás túas ligazóns de navegación cun elemento de lista baleiro e unha clase sinxela. Só ten que engadir isto entre ligazóns:

<ul class = "nav" > 
  ...
  <li class = "divisor-vertical" ></li> 
  ...
</ul>

Aliñación de compoñentes

Para aliñar un navegador, formulario de busca ou texto, use o .pull-leftou.pull-right clases de utilidadeAmbas clases engadirán un flotante CSS na dirección especificada.

Engadindo menús despregables

Engadir menús despregable e despregable ao navegador é moi sinxelo, pero require o uso do noso complemento de javascript .

<ul class = "nav" > 
  <li class = "menú desplegable" > 
    <a href = "#" 
          class = "desplegable-alternar"
          data-toggle = "menús desplegable" >
          Conta
          <b class = "caret" ></b> 
    </a>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

Obter o javascript →

Texto na barra de navegación

Envolve as cadeas de texto nun <.navbar-text>, xeralmente nunha <p>etiqueta para a interlineado e a cor adecuadas.

Por que usalos

A navegación por rutas de navegación úsase como unha forma de mostrar aos usuarios onde están dentro dunha aplicación ou dun sitio, pero non para a navegación principal. Mantén o seu uso escaso e sucinto para que sexa máis eficaz.

Exemplos

Móstrase un único exemplo xa que se pode mostrar en varias páxinas.

• Casa

• Inicio /
• Biblioteca

• Inicio /
• Biblioteca /
• Datos

Marcado

HTML é a túa lista estándar sen ordenar con ligazóns.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Inicio </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteca </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Datos </li> 
</ul>

Cando usar

Paxinación ultra simplista e de estilo minimalista inspirada en Rdio, ideal para aplicacións e resultados de busca. O bloque grande é difícil de perder, facilmente escalable e ofrece grandes áreas de clic.

Ligazóns de páxinas con estado

As ligazóns son personalizables e funcionan en varias circunstancias coa clase correcta. .disabledpara ligazóns non clicables e .activepara páxina actual.

Aliñación flexible

Engade calquera das dúas clases opcionais para cambiar o aliñamento das ligazóns de paxinación: .pagination-centerede .pagination-right.

Exemplos

O compoñente de paxinación predeterminado é flexible e funciona en varias variacións.

Marcado

Envolto nun <div>, a paxinación é só un <ul>.

<div class = "paxinación" > 
  <ul>
    <li><a href = "#" > Anterior </a></li> 
    <li class = "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 = "#" > Seguinte </a></li> 
  </ul>
</div>

Sobre o buscapersonas

O compoñente paginador é un conxunto de ligazóns para implementacións de paxinación sinxelas con marcas lixeiras e estilos aínda máis claros. É ideal para sitios sinxelos como blogs ou revistas.

Estado opcional desactivado

As ligazóns de paginación tamén usan a .disabledclase xeral da paginación.

Exemplo predeterminado

Por defecto, o buscapersonas centra as ligazóns.

• Anterior
• A continuación

<ul class = "pager" > 
  <li>
    <a href = "#" > Anterior </a> 
  </li>
  <li>
    <a href = "#" > Seguinte </a> 
  </li>
</ul>

Ligazóns aliñadas

Alternativamente, pode aliñar cada ligazón aos lados:

• ← Máis vello
• Máis recente →

<ul class = "pager" > 
  <li class = "anterior" > 
    <a href = "#" > ← Máis vello </a> 
  </li>
  <li class = "seguinte" > 
    <a href = "#" > Máis recente → </a> 
  </li>
</ul>

Sobre

As insignias son compoñentes pequenos e sinxelos para mostrar un indicador ou un reconto dalgún tipo. Atópanse habitualmente en clientes de correo electrónico como Mail.app ou en aplicacións móbiles para notificacións push.

Clases dispoñibles

Bootstrap ofrece un compoñente lixeiro e flexible chamado unidade heroe para mostrar o contido do teu sitio. Funciona ben en sitios de marketing e contido pesado.

Marcado

Envolve o teu contido nun divlike así:

<div class = "unidade heroe" > 
  <h1> Título </h1>
  <p> Lema </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Aprender máis
    </a>
  </p>
</div>

Un shell sinxelo para h1espaciar e segmentar adecuadamente seccións de contido nunha páxina. Pode utilizar o elemento h1predeterminado smallde , así como a maioría dos outros compoñentes (con estilos adicionais).

<div class = "cabeceira da páxina" > 
  <h1> Exemplo de cabeceira da páxina </h1>
</div>

Miniaturas predeterminadas

De xeito predeterminado, as miniaturas de Bootstrap están deseñadas para mostrar as imaxes vinculadas cun marcado mínimo necesario.

Altamente personalizable

Cun pouco de marcado adicional, é posible engadir calquera tipo de contido HTML como títulos, parágrafos ou botóns nas miniaturas.

• 

  Etiqueta en 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 en 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 que usar miniaturas

As miniaturas (anteriormente .media-gridata a versión 1.4) son excelentes para cuadrículas de fotos ou vídeos, resultados de busca de imaxes, produtos de venda polo miúdo, carteiras e moito máis. Poden ser ligazóns ou contido estático.

Marcado sinxelo e flexible

O marcado de miniaturas é sinxelo: un ulcon calquera número de lielementos é todo o que se require. Tamén é súper flexible, xa que permite que calquera tipo de contido teña un pouco máis de marcado para envolver o teu contido.

Usa tamaños de columna de grade

Por último, o compoñente de miniaturas usa clases de sistemas de grade existentes, como .span2ou .span3para controlar as dimensións das miniaturas.

O marcado

Como se mencionou anteriormente, o marcado necesario para as miniaturas é lixeiro e sinxelo. Aquí tes unha ollada á configuración predeterminada para as imaxes ligadas :

<ul class = "miniaturas" > 
  <li class = "span3" > 
    <a href = "#" class = "miniatura" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Para o contido HTML personalizado en miniaturas, o marcado cambia lixeiramente. Para permitir o contido de nivel de bloque en calquera lugar, cambiamos <a>por un <div>similar:

<ul class = "miniaturas" > 
  <li class = "span3" > 
    <div class = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etiqueta en miniatura </h5>
      <p> Lenda de miniatura aquí mesmo... </p>
    </div>
  </li>
  ...
</ul>

Máis exemplos

Explora todas as túas opcións coas distintas clases de cuadrícula dispoñibles para ti. Tamén podes mesturar e combinar diferentes tamaños.

Clase base reescrita

Con Bootstrap 2, simplificamos a clase base: .alerten lugar de .alert-message. Tamén reducimos o marcado mínimo necesario: non <p>é necesario por defecto, só o exterior <div>.

Mensaxe de alerta única

Para un compoñente máis duradeiro e con menos código, eliminamos o aspecto diferenciador das alertas de bloqueo, as mensaxes que veñen con máis recheo e normalmente máis texto. A clase tamén cambiou a .alert-block.

Vai xenial con javascript

Bootstrap inclúe un excelente complemento de jQuery que admite mensaxes de alerta, o que fai que descartalos sexa rápido e sinxelo.

Obter o complemento »

Alertas de exemplo

Envolve a túa mensaxe e unha icona de peche opcional nun div cunha clase sinxela.

<div class = "alerta" > 
  <button class = "close" data-dismiss = "alerta" > × </button>  
  <strong> Aviso! </strong> O mellor que che faga a ti mesmo, non tes un aspecto moi bo.
</div>

Aviso! Os dispositivos iOS requiren unha href="#"para a eliminación de alertas. Asegúrate de incluílo e o atributo de datos para as iconas de peche de ancoraxe. Alternativamente, pode usar un buttonelemento co atributo de datos, o que optamos por facer para os nosos documentos.

Estende facilmente a mensaxe de alerta estándar con dúas clases opcionais: .alert-blockpara máis controis de recheo e texto e .alert-headingpara un título coincidente.

<div class = "bloqueo de alertas de alerta" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Aviso! </h4> 
  O mellor que te verifiques, non estás...
</div>

Erro ou perigo

<div class = "erro de alerta de alerta" > 
  ...
</div>

Éxito

<div class = "alerta de éxito-alerta" > 
  ...
</div>

Información

<div class = "información de alerta de alerta" > 
  ...
</div>

Básico

Barra de progreso predeterminada cun gradiente vertical.

<div class = "progreso" > 
  <div class = "bar" 
       estilo = " ancho : 60 %; " ></div> 
</div>

Raias

Usa un degradado para crear un efecto de raias (sen IE).

<div class = "progress progress-striped" > 
  <div class = "bar" 
       estilo = " ancho : 20 %; " ></div> 
</div>

Animado

Toma o exemplo con raias e anímao (sen IE).

<div class = "progreso con franxas de progreso 
     activo" >
  <div class = "bar" 
       estilo = " ancho : 40 %; " ></div> 
</div>

Cores adicionais

As barras de progreso usan algúns dos mesmos botóns e clases de alerta para estilos consistentes.

Barras de raias

Semellante ás cores sólidas, temos varias barras de progreso con raias.

Comportamento

As barras de progreso usan transicións CSS3, polo que se axusta dinámicamente o ancho mediante javascript, cambiará o tamaño sen problemas.

Se usas a .activeclase, as túas .progress-stripedbarras de progreso animarán as franxas de esquerda a dereita.

Soporte de navegador

As barras de progreso usan degradados, transicións e animacións CSS3 para conseguir todos os seus efectos. Estas funcións non son compatibles con IE7-9 ou versións anteriores de Firefox.

Opera e IE non admiten animacións neste momento.

Pozos

Use o pozo como un efecto sinxelo sobre un elemento para darlle un efecto de inserción.

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

Pechar icona

Usa a icona de peche xenérico para descartar contido como modais e alertas.

×

<button class = "pechar" > × </button> 

Os dispositivos iOS requiren un href="#" para os eventos de clic se prefire usar unha áncora.

<a class = "close" href = "#" > × </a>