Componentes

Dezenas de componentes reutilizáveis ​​são integrados ao Bootstrap para fornecer navegação, alertas, popovers e muito mais.

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

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

Exemplo de barra de ferramentas

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Menus suspensos de botões

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Ação
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu suspenso" >
  7. <!-- links do menu suspenso -->
  8. </ul>
  9. </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.


Menus suspensos de botão dividido

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

Utilize as classes de botões extras .btn-mini, .btn-small, ou .btn-largepara dimensionamento.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menu suspenso pull-right" >
  4. <!-- links do menu suspenso -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Ação </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menu suspenso" >
  7. <!-- links do menu suspenso -->
  8. </ul>
  9. </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 irá inverter a direção .carete reposicionar o próprio menu para mover de baixo para cima em vez de de cima para baixo.

  1. <div class = "dropup do grupo btn" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menu suspenso" >
  7. <!-- links do menu suspenso -->
  8. </ul>
  9. </div>

Paginação de várias páginas

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

  1. <div class = "paginação" >
  2. <ul>
  3. <li><a href = "#" > Anterior </a></li>
  4. <li class = "ativo" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Próximo </a></li>
  11. </ul>
  12. </div>

Pager Para links rápidos anteriores e seguintes

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Anterior </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Próximo </a>
  7. </li>
  8. </ul>

Links alinhados

Alternativamente, você pode alinhar cada link aos lados:

  1. <ul class = "pager" >
  2. <li classe = "anterior" >
  3. <a href = "#" > Mais antigo </a>
  4. </li>
  5. <li classe = "próximo" >
  6. <a href = "#" > Mais recente → </a>
  7. </li>
  8. </ul>
Rótulos Marcação
Predefinição <span class="label">Default</span>
Sucesso <span class="label label-success">Success</span>
Aviso <span class="label label-warning">Warning</span>
Importante <span class="label label-important">Important</span>
Informações <span class="label label-info">Info</span>
Inverso <span class="label label-inverse">Inverse</span>

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

Nome Exemplo Marcação
Predefinição 1 <span class="badge">1</span>
Sucesso 2 <span class="badge badge-success">2</span>
Aviso 4 <span class="badge badge-warning">4</span>
Importante 6 <span class="badge badge-important">6</span>
Informações 8 <span class="badge badge-info">8</span>
Inverso 10 <span class="badge badge-inverse">10</span>

Unidade de herói

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:

  1. <div class = "unidade-herói" >
  2. <h1> Cabeçalho </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Saber mais
  7. </a>
  8. </p>
  9. </div>

Olá Mundo!

Esta é uma unidade de herói simples, um componente simples no estilo jumbotron para chamar atenção extra para conteúdo ou informações em destaque.

Saber mais

Cabeçalho da página

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

  1. <div class = "page-header" >
  2. <h1> Exemplo de cabeçalho de página </h1>
  3. </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 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 :

  1. <ul class = "miniaturas" >
  2. <li class = "span3" >
  3. <a href = "#" class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "miniaturas" >
  2. <li class = "span3" >
  3. <div class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Rótulo da miniatura </h5>
  6. <p> Legenda da miniatura aqui... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Padrões leves

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.

Aviso! Melhor verificar você mesmo, você não está parecendo muito bem.
  1. <div class = "alerta" >
  2. <button class = "fechar" data-dismiss = "alerta" > × </button>
  3. <strong> Aviso! </strong> Melhor verificar você mesmo, você não está parecendo muito bem.
  4. </div>

Atenção! Dispositivos iOS requerem um href="#"para dispensa de alertas. Certifique-se de incluí-lo e o atributo de dados para ícones de fechamento de âncora. Alternativamente, você pode usar um <button>elemento com o atributo data, o que optamos por fazer para nossos documentos. Ao usar <button>, você deve incluir type="button"ou seus formulários não podem ser enviados.

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.

Aviso!

Melhor verificar você mesmo, você não está parecendo muito bem. Nulla vitae elit libero, a pharetra augue. Praesent comodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "fechar" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Atenção! </h4>
  4. Melhor verificar você mesmo, você não é...
  5. </div>

Alternativas contextuais Adicione classes opcionais para alterar a conotação de um alerta

Erro ou perigo

Oh sôfrego! Altere algumas coisas e tente enviar novamente.
  1. <div class = "alerta alerta-erro" >
  2. ...
  3. </div>

Sucesso

Bem feito! Você leu com sucesso esta importante mensagem de alerta.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Em formação

Atenção! Este alerta precisa de sua atenção, mas não é super importante.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Exemplos e marcação

Básico

Barra de progresso padrão com um gradiente vertical.

  1. <div class = "progresso" >
  2. <div class = "barra"
  3. estilo = " largura : 60 %; " ></div>
  4. </div>

Listrado

Usa um gradiente para criar um efeito listrado (sem IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "barra"
  3. estilo = " largura : 20 %; " ></div>
  4. </div>

Animado

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

  1. <div class = "progresso com listras de progresso
  2. ativo" >
  3. <div class = "barra"
  4. estilo = " largura : 40 %; " ></div>
  5. </div>

Opções e suporte ao navegador

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.

Olha, eu estou em um poço!
  1. <div class = "bem" >
  2. ...
  3. </div>

Fechar ícone

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

  1. <button class = "fechar" > × </button>

Dispositivos iOS requerem um href="#" para eventos de clique se você preferir usar uma âncora.

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