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" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</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 »

Aviso

CSS para grupos de botóns está nun ficheiro separado, button-groups.less.

Menú despregable de botóns

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

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

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>

Dividir menú despregable de botóns

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.

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" > 
  <a class = "btn" href = "#" > Acción </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <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
• Perfil
• 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
• Perfil
• 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.

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.

Exemplo tabulable

Para que as pestanas sexan tabulables, envolve o .nav-tabsdiv noutro div con class .tabbable.

Complemento jQuery personalizado

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 →

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

Para fixar a barra de navegación na parte superior da ventana gráfica, engade .navbar-fixed-topao div máis externo, .navbar.

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

No teu CSS, tamén terás que ter en conta a superposición que provoca ao engadir 40 píxeles ou máis de recheo ao teu <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>

Formulario de busca

Os formularios de busca reciben estilos personalizados na barra de navegación coa .navbar-searchclase. Inclúe .pull-leftou .pull-rightsobre formpara aliñalo.

<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 as clases de utilidade .pull-leftou . .pull-rightAmbas clases engadirán un flotante CSS na dirección especificada.

Engadindo menú despregable

Engadir menús despregables 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 →

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 = "activo" > 
    <a href = "#" > Datos </a> 
  </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.

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>

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

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 = "alerta" > × </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.

<div class = "información do progreso do progreso 
     con franxas de progreso" >
  <div class = "bar" 
       estilo = " ancho : 20 %; " ></div> 
</div>

Animado

Toma o exemplo de raias e anímao.

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

Cores adicionais

As barras de progreso utilizan algúns dos mesmos nomes de clases como botóns e alertas para un estilo similar.

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

Alternativamente, pode personalizar os ficheiros LESS e tirar as súas propias cores e tamaños.

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-8 ou versións anteriores de Firefox.

Opera non admite 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>

Insignias

Use unha insignia nun elemento para un reconto non lido ou como un simple indicador.

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

Pechar icona

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

×

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