Grupos de botões

Use grupos de botões para unir vários botões como um componente composto. Construa-os com uma série de <a>ou <button>elementos.

Você também pode combinar conjuntos de <div class="btn-group">em um <div class="btn-toolbar">para projetos mais complexos.

Exemplo de marcação

Veja como o HTML procura um grupo de botões padrão criado com botões de tags de âncora:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

E com uma barra de ferramentas para vários grupos:

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

Caixa de seleção e sabores de rádio

Os grupos de botões também podem funcionar como rádios, onde apenas um botão pode estar ativo, ou caixas de seleção, onde qualquer número de botões pode estar ativo. Veja os documentos Javascript para isso.

Obtenha o javascript »

Atenção

CSS para grupos de botões está em um arquivo separado, button-groups.less.

Menus suspensos de botões

Use qualquer botão para acionar um menu suspenso, colocando-o dentro de um .btn-groupe fornecendo a marcação de menu adequada.

Exemplo de marcação

Semelhante a um grupo de botões, nossa marcação usa marcação de botão regular, mas com algumas adições para refinar o estilo e dar suporte ao plugin jQuery suspenso do Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Ação
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu suspenso" > 
    <!-- links do menu suspenso -->
  </ul>
</div>

Menus suspensos de botão dividido

Com base nos estilos e na marcação do grupo de botões, podemos criar facilmente um botão dividido. Os botões de divisão apresentam uma ação padrão à esquerda e uma alternância suspensa à direita com links contextuais.

Exemplo de marcação

Expandimos as listas suspensas de botões normais para fornecer uma segunda ação de botão que funciona como um acionador de lista suspensa separado.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Ação </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu suspenso" > 
    <!-- links do menu suspenso -->
  </ul>
</div>

Classe base poderosa

Todos os componentes de navegação aqui — guias, pílulas e listas — compartilham a mesma marcação e estilos básicos por toda a .navclasse.

Por que guias e pílulas

Abas e pílulas no Bootstrap são construídas <ul>com o mesmo núcleo HTML, uma lista de links. Alterne entre abas ou pílulas com apenas uma aula.

Ambas as opções são ótimas para subseções de conteúdo ou navegação entre páginas de conteúdo relacionado.

Guias básicas

Pegue um regular <ul>de links e adicione .nav-tabs:

• Casa
• Perfil
• Mensagens

<ul class = "nav nav-tabs" > 
  <li class = "ativo" > 
    <a href = "#" > Página inicial </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Comprimidos básicos

Pegue o mesmo HTML, mas use .nav-pills:

• Casa
• Perfil
• Mensagens

<ul class = "nav nav-pills" > 
  <li class = "ativo" > 
    <a href = "#" > Página inicial </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Como empilhá-los

Como as guias e pílulas são horizontais por padrão, basta adicionar uma segunda classe, .nav-stacked, para fazê-las parecer empilhadas verticalmente.

Guias empilhadas

• Casa
• Perfil
• Mensagens

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

Comprimidos empilhados

• Casa
• Perfil
• Mensagens

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

Menus ricos facilitados

Os menus suspensos nas guias e pílulas do Bootstrap são super fáceis e exigem apenas um pouco de HTML extra e um plugin jQuery leve.

Vá até a página Javascript para ler os documentos sobre como inicializar dropdowns no Bootstrap.

Abas com menus suspensos

• Casa
• Perfil
• Suspenso
  • Ação
  • Outra ação
  • Outra coisa aqui
  • Link separado

<ul class = "nav nav-tabs" > 
  <li class = "lista suspensa" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Suspenso
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu suspenso" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Comprimidos com dropdowns

• Casa
• Perfil
• Suspenso
  • Ação
  • Outra ação
  • Outra coisa aqui
  • Link separado

<ul class = "nav nav-pills" > 
  <li class = "lista suspensa" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Suspenso
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu suspenso" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Navegação no estilo de aplicativo

As listas de navegação fornecem uma maneira simples e fácil de criar grupos de links de navegação com cabeçalhos opcionais. Eles são melhor usados ​​em barras laterais como o Finder no OS X.

Estruturalmente, eles são construídos nos mesmos estilos de navegação principais que guias e pílulas, portanto, o uso e a personalização são diretos.

Com ícones

As listas de navegação também são fáceis de equipar com ícones. <i>Adicione a tag apropriada com a classe e pronto.

Exemplo de lista de navegação

Pegue uma lista de links e adicione class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Cabeçalho da lista
  </li>
  <li class = "ativo" > 
    <a href = "#" > Página inicial </a> 
  </li>
  <li>
    <a href = "#" > Biblioteca </a> 
  </li>
  ...
</ul>

Exemplo com ícones

Mesmo exemplo, mas com <i>tags para ícones.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "livro de ícones" ></i> 
      Biblioteca
    </a>
  </li>
  ...
</ul>

O que está incluído

Dê vida às suas guias com um plug-in simples para alternar entre o conteúdo por meio de guias. O Bootstrap integra guias tabuladas em quatro estilos: superior (padrão), direita, inferior e esquerda.

Alterando entre eles é fácil e requer apenas alterar muito pouca marcação.

Exemplo de tabulação

Para tornar as guias tabuladas, envolva-as .nav-tabsem outra div com class .tabbable.

Plug-in personalizado do jQuery

Todas as guias com guias são alimentadas pelo nosso leve plugin jQuery. Leia mais sobre como dar vida às guias com guias na página de documentos javascript.

Obtenha o javascript →

Abas na parte inferior

Inverta a ordem do HTML e adicione uma classe para colocar guias na parte inferior.

<div class = "tabable tabs-abaixo" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Abas à esquerda

Troque a classe para colocar abas à esquerda.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Abas à direita

Troque a classe para colocar abas à direita.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Andaime da barra de navegação

A barra de navegação requer apenas alguns divs para estruturá-la bem para exibição estática ou fixa.

<div class = "barra de navegação" > 
  <div class = "navbar-inner" > 
    <div class = "contêiner" > 
      ...
    </div>
  </div>
</div>

Para tornar a barra de navegação fixa na parte superior da janela de visualização, adicione .navbar-fixed-topà div mais externa, .navbar. Em seu CSS, você também precisará levar em conta a sobreposição que ele causa adicionando padding-top: 40px;ao seu arquivo <body>.

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

Marca

Um link simples para mostrar o nome da sua marca ou projeto requer apenas uma tag âncora.

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

Formulário de pesquisa

Os formulários de pesquisa recebem estilos personalizados na barra de navegação com a .navbar-searchclasse. Inclua .pull-leftou .pull-rightno formpara alinhá-lo.

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

Variação responsiva opcional

Dependendo da quantidade de conteúdo em sua barra superior, talvez você queira implementar as opções responsivas. Para fazer isso, envolva seu conteúdo de navegação em um div, .nav-collapse.collapsee adicione o botão de alternância da barra de navegação, .btn-navbar.

<div class = "barra de navegação" > 
  <div class = "navbar-inner" > 
    <div class = "contêiner" > 
 
      <!-- .btn-navbar é usado como alternância para conteúdo recolhido da barra de navegação -->
      <a class = "btn btn-navbar" data-toggle = "recolher" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Certifique-se de deixar a marca exposta se quiser que ela seja exibida -->
      <a class = "brand" href = "#" > Nome do projeto </a>  
 
      <!-- Tudo o que você deseja ocultar em 940px ou menos, coloque aqui -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Links de navegação

Os itens de navegação são simples de adicionar por meio de listas não ordenadas.

<ul class = "nav" > 
  <li class = "ativo" > 
    <a href = "#" > Página inicial </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Adicionando listas suspensas

Adicionar dropdowns à navegação é super simples, mas requer o uso do nosso plugin javascript .

<ul class = "nav" > 
  <li class = "lista suspensa" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          Conta
          <b class = "caret" ></b> 
    </a>
    <ul class = "menu suspenso" > 
      ...
    </ul>
  </li>
</ul>

Obtenha o javascript →

Por que usá-los

A navegação Breadcrumb é usada como uma forma de mostrar aos usuários onde eles estão em um aplicativo ou site, mas não para navegação principal. Mantenha seu uso esparso e sucinto para ser mais eficaz.

Exemplos

Um único exemplo mostrado como pode ser exibido em várias páginas.

• Casa

• Início /
• Biblioteca

• Início /
• Biblioteca /
• Dados

Marcação

HTML é sua lista não ordenada padrão com links.

<ul class = "migalhas de pão" > 
  <li>
    <a href = "#" > Página inicial </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteca </a> <span class = "divider" > / </span>   
  </li>
  <li class = "ativo" > 
    <a href = "#" > Dados </a> 
  </li>
</ul>

Quando usar

Paginação ultra simplista e com estilo minimalista inspirada no Rdio, ótima para aplicativos e resultados de pesquisa. O bloco grande é difícil de perder, facilmente escalável e oferece grandes áreas de clique.

Links de página com estado

Os links são personalizáveis ​​e funcionam em várias circunstâncias com a classe certa. .disabledpara links não clicáveis ​​e .activepara a página atual.

Alinhamento flexível

Adicione uma das duas classes opcionais para alterar o alinhamento dos links de paginação: .pagination-centerede .pagination-right.

Exemplos

O componente de paginação padrão é flexível e funciona em várias variações.

Marcação

Envolto em um <div>, a paginação é apenas um <ul>.

<div class = "paginação" > 
  <ul>
    <li><a href = "#" > Anterior </a></li> 
    <li class = "ativo" > 
      <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 = "#" > Próximo </a></li> 
  </ul>
</div>

Sobre o pager

O componente pager é um conjunto de links para implementações simples de paginação com marcação leve e estilos ainda mais leves. É ótimo para sites simples como blogs ou revistas.

Exemplo padrão

Por padrão, o pager centraliza os links.

• Anterior
• Próximo

<ul class = "pager" > 
  <li>
    <a href = "#" > Anterior </a> 
  </li>
  <li>
    <a href = "#" > Próximo </a> 
  </li>
</ul>

Links alinhados

Alternativamente, você pode alinhar cada link aos lados:

• ← Mais antigo
• Mais recente →

<ul class = "pager" > 
  <li classe = "anterior" > 
    <a href = "#" > ← Mais antigo </a> 
  </li>
  <li classe = "próximo" > 
    <a href = "#" > Mais recente → </a> 
  </li>
</ul>

Miniaturas padrão

Por padrão, as miniaturas do Bootstrap são projetadas para mostrar imagens vinculadas com marcação mínima necessária.

Altamente personalizável

Com um pouco de marcação extra, é possível adicionar qualquer tipo de conteúdo HTML como títulos, parágrafos ou botões em miniaturas.

• 

  Rótulo da 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.

  Ação Ação

• 

  Rótulo da 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.

  Ação Ação

Por que usar miniaturas

As miniaturas (anteriormente .media-gridaté a v1.4) são ótimas para grades de fotos ou vídeos, resultados de pesquisa de imagens, produtos de varejo, portfólios e muito mais. Eles podem ser links ou conteúdo estático.

Marcação simples e flexível

A marcação de miniaturas é simples - um ulcom qualquer número de lielementos é tudo o que é necessário. Também é super flexível, permitindo qualquer tipo de conteúdo com apenas um pouco mais de marcação para envolver seu conteúdo.

Usa tamanhos de coluna de grade

Por fim, o componente de miniaturas usa classes de sistema de grade existentes - como .span2ou .span3- para controle de dimensões de miniaturas.

A marcação

Como mencionado anteriormente, a marcação necessária para miniaturas é leve e direta. Veja a configuração padrão para imagens vinculadas :

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

Para conteúdo HTML personalizado em miniaturas, a marcação muda um pouco. Para permitir conteúdo de nível de bloco em qualquer lugar, trocamos o <a>por um <div>assim:

<ul class = "miniaturas" > 
  <li class = "span3" > 
    <div class = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Rótulo da miniatura </h5>
      <p> Legenda da miniatura aqui... </p>
    </div>
  </li>
  ...
</ul>

Mais exemplos

Explore todas as suas opções com as várias classes de grade disponíveis para você. Você também pode misturar e combinar tamanhos diferentes.

Classe base reescrita

Com o Bootstrap 2, simplificamos a classe base: .alertem vez de .alert-message. Também reduzimos a marcação mínima necessária - não <p>é necessário por padrão, apenas o <div>.

Mensagem de alerta única

Para um componente mais durável com menos código, removemos a aparência diferenciada de alertas de bloco, mensagens que vêm com mais preenchimento e normalmente mais texto. A classe também mudou para .alert-block.

Fica ótimo com javascript

O Bootstrap vem com um ótimo plugin jQuery que suporta mensagens de alerta, tornando o descarte rápido e fácil.

Obtenha o plug-in »

Alertas de exemplo

Enrole sua mensagem e um ícone de fechamento opcional em um div com classe simples.

<div class = "alerta" > 
  <a class = "fechar" > × </a> 
  <strong> Aviso! </strong> Melhor verificar você mesmo, você não está parecendo muito bem.
</div>

Estenda facilmente a mensagem de alerta padrão com duas classes opcionais: .alert-blockpara mais controles de preenchimento e texto e .alert-headingpara um título correspondente.

<div class = "alert alert-block" > 
  <a class = "fechar" > × </a> 
  <h4 class = "alert-heading" > Atenção! </h4> 
  Melhor verificar você mesmo, você não é...
</div>

Erro ou perigo

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

Sucesso

<div class = "alert alert-success" > 
  ...
</div>

Em formação

<div class = "alert alert-info" > 
  ...
</div>

Básico

Barra de progresso padrão com um gradiente vertical.

<div class = "progresso" > 
  <div class = "barra" 
       estilo = " largura : 60 %; " ></div> 
</div>

Listrado

Usa um gradiente para criar um efeito listrado.

<div class = "progress progress-info 
     listrado de progresso" >
  <div class = "barra" 
       estilo = " largura : 20 %; " ></div> 
</div>

Animado

Pega o exemplo listrado e o anima.

<div class = "progresso-perigo-progresso 
     ativo com faixa de progresso" >
  <div class = "barra" 
       estilo = " largura : 40 %; " ></div> 
</div>

Cores adicionais

As barras de progresso utilizam alguns dos mesmos nomes de classe dos botões e alertas para estilos semelhantes.

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

Alternativamente, você pode personalizar os arquivos LESS e rolar suas próprias cores e tamanhos.

Comportamento

As barras de progresso usam transições CSS3, portanto, se você ajustar dinamicamente a largura via javascript, ela será redimensionada suavemente.

Se você usar a .activeclasse, suas .progress-stripedbarras de progresso animarão as listras da esquerda para a direita.

Suporte ao navegador

As barras de progresso usam gradientes, transições e animações CSS3 para obter todos os seus efeitos. Esses recursos não são compatíveis com o IE7-8 ou versões anteriores do Firefox.

O Opera não suporta animações neste momento.

Poços

Use o poço como um efeito simples em um elemento para dar a ele um efeito de inserção.

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

Distintivos

Use um emblema em um elemento para uma contagem não lida ou como um indicador simples.

<span class = "crachá" > 3 </div> 

Fechar ícone

Use o ícone de fechamento genérico para dispensar conteúdo como modais e alertas.

×

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