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.

Melhores Práticas

Recomendamos as seguintes diretrizes para usar grupos de botões e barras de ferramentas:

• Sempre use o mesmo elemento em um único grupo de botões <a>ou <button>.
• Não misture botões de cores diferentes no mesmo grupo de botões.
• Use ícones além ou em vez de texto, mas certifique-se de incluir texto alternativo e título quando apropriado.

Grupos de botões relacionados com menus suspensos (veja abaixo) devem ser chamados separadamente e sempre incluem um acento circunflexo suspenso para indicar o comportamento pretendido.

Exemplo padrã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" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Exemplo de barra de ferramentas

Combine conjuntos de <div class="btn-group">em um <div class="btn-toolbar">para componentes mais complexos.

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

Listas suspensas em grupos de botões

Atenção! Os botões com listas suspensas devem ser agrupados individualmente .btn-groupdentro de um .btn-toolbarpara renderização adequada.

Visão geral e exemplos

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 um punhado de 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>

Funciona com todos os tamanhos de botão

Os botões suspensos funcionam em qualquer tamanho. seus tamanhos de botão para .btn-large, .btn-small, ou .btn-mini.

Requer javascript

Os botões suspensos exigem que o plug-in suspenso do Bootstrap funcione.

Em alguns casos, como em dispositivos móveis, os menus suspensos se estenderão para fora da janela de visualização. Você precisa resolver o alinhamento manualmente ou com javascript personalizado.

Visão geral e exemplos

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.

Tamanhos

.btn-miniUtilize a classe de botão extra .btn-small, ou .btn-largepara dimensionamento.

<div class = "btn-group" > 
  ...
  <ul class = "menu suspenso pull-right" > 
    <!-- links do menu suspenso -->
  </ul>
</div>

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" > 
  <button class = "btn" > Ação </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu suspenso" > 
    <!-- links do menu suspenso -->
  </ul>
</div>

Menus suspensos

Os menus suspensos também podem ser alternados de baixo para cima adicionando uma única classe ao pai imediato de .dropdown-menu. Ele mudará a direção do .caretmenu e reposicionará o próprio menu para mover de baixo para cima em vez de de cima para baixo.

<div class = "dropup do grupo btn" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <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.

Quando usar

As guias e pílulas são ótimas para seções de conteúdo ou navegação entre páginas de conteúdo relacionado.

Alinhamento de componentes

Para alinhar links de navegação, use as classes de utilitário .pull-leftou . .pull-rightAmbas as classes adicionarão um float CSS na direção especificada.

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
• Ajuda
• Suspenso
  • Action
  • Another action
  • Something else here
  • Separated link
• Soltar-se
  • Action
  • Another action
  • Something else here
  • Separated link

<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
• Ajuda
• Suspenso
  • Action
  • Another action
  • Something else here
  • Separated link
• Soltar-se
  • Action
  • Another action
  • Something else here
  • Separated link

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

Divisores horizontais

Adicione um divisor horizontal criando um item de lista vazio com a classe .divider, assim:

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

Exemplo de lista de navegação

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

<ul class = "nav nav-list" > 
  <li class = "cabeçalho de navegação" > 
    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>

Barra de navegação fixa

Fixe a barra de navegação na parte superior ou inferior da janela de visualização com uma classe adicional na div mais externa, .navbar.

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

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

Quando você afixar a barra de navegação, lembre-se de levar em conta a área oculta abaixo. Adicione 40px ou mais de adição ao arquivo <body>. Certifique-se de adicionar isso após o CSS principal do Bootstrap e antes do CSS responsivo opcional.

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ários na barra de navegação

Para estilizar e posicionar corretamente um formulário na barra de navegação, adicione as classes apropriadas conforme mostrado abaixo. Para um formulário padrão, inclua .navbar-forme ou .pull-leftou .pull-rightpara alinhá-lo corretamente.

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

Para um formulário de pesquisa mais personalizado, adicione a .navbar-searchclasse para receber estilos especializados na barra de navegação.

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

Você pode facilmente adicionar divisores aos seus links de navegação com um item de lista vazio e uma classe simples. Basta adicionar isso entre os links:

<ul class = "nav" > 
  ...
  <li class = "divisória vertical" ></li> 
  ...
</ul>

Alinhamento de componentes

Para alinhar um nav, formulário de pesquisa ou texto, use as classes de utilitário .pull-leftou . .pull-rightAmbas as classes adicionarão um float CSS na direção especificada.

Adicionando menus suspensos

Adicionar dropdowns e dropups à 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 →

Texto na barra de navegação

Enrole as sequências de texto em uma <p>tag para obter a cor e o início adequados.

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" > Dados </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 de paginação simples com marcação leve e estilos ainda mais leves. É ótimo para sites simples como blogs ou revistas.

Estado desativado opcional

Os links do pager também usam a .disabledclasse geral da paginação.

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>

Sobre

Crachás são componentes pequenos e simples para exibir um indicador ou contagem de algum tipo. Eles são comumente encontrados em clientes de e-mail como Mail.app ou em aplicativos móveis para notificações push.

Aulas disponíveis

O Bootstrap fornece um componente leve e flexível chamado unidade hero para exibir conteúdo em seu site. Funciona bem em sites de marketing e de conteúdo pesado.

Marcação

Enrole seu conteúdo em um divgosto assim:

<div class = "unidade-herói" > 
  <h1> Cabeçalho </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Saber mais
    </a>
  </p>
</div>

Um shell simples para h1espaçar e segmentar adequadamente seções de conteúdo em uma página. Ele pode utilizar o elemento h1default do small, bem como a maioria dos outros componentes (com estilos adicionais).

<div class = "page-header" > 
  <h1> Exemplo de cabeçalho de página </h1>
</div>

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 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" data-dismiss = "alerta" > × </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" data-dismiss = "alerta" > × </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 (sem IE).

<div class = "progress progress-striped" > 
  <div class = "barra" 
       estilo = " largura : 20 %; " ></div> 
</div>

Animado

Pega o exemplo listrado e o anima (sem IE).

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

Cores adicionais

As barras de progresso usam algumas das mesmas classes de botão e alerta para estilos consistentes.

Barras listradas

Semelhante às cores sólidas, temos variadas barras de progresso listradas.

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-9 ou versões anteriores do Firefox.

Opera e IE não suportam 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>

Fechar ícone

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

×

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