Exemplo

Menu contextual alternável para exibir listas de links. Tornado interativo com o plug-in JavaScript suspenso .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Ação </a></li>  
  <li><a tabindex = "-1" href = "#" > Outra ação </a></li>  
  <li><a tabindex = "-1" href = "#" > Outra coisa aqui </a></li>  
  <li class = "divisor" ></li> 
  <li><a tabindex = "-1" href = "#" > Link separado </a></li>  
</ul>

Marcação

Olhando apenas para o menu suspenso, aqui está o HTML necessário. Você precisa envolver o gatilho do menu suspenso e o menu suspenso dentro de .dropdown, ou outro elemento que declare position: relative;. Depois é só criar o cardápio.

<div class = "dropdown" > 
  <!-- Link ou botão para alternar a lista suspensa -->
  <ul class = "menu suspenso" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Ação </a></li>  
    <li><a tabindex = "-1" href = "#" > Outra ação </a></li>  
    <li><a tabindex = "-1" href = "#" > Outra coisa aqui </a></li>  
    <li class = "divisor" ></li> 
    <li><a tabindex = "-1" href = "#" > Link separado </a></li>  
  </ul>
</div>

Opções

Alinhe os menus à direita e adicione níveis adicionais de menus suspensos.

Alinhando os menus

Adicionar .pull-righta .dropdown-menupara alinhar à direita o menu suspenso.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Opções de menu desativadas

Adicione .disableda um <li>no menu suspenso para desativar o link.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Link normal </a></li>  
  <li class = "desativado" ><a tabindex = "-1" href = "#" > Link desativado </a></li>   
  <li><a tabindex = "-1" href = "#" > Outro link </a></li>  
</ul>

Submenus em menus suspensos

Adicione um nível extra de menus suspensos, aparecendo ao passar o mouse como os do OS X, com algumas adições de marcação simples. Adicione .dropdown-submenua qualquer lium em um menu suspenso existente para estilo automático.

Predefinição

Soltar-se

Submenu esquerdo

<ul class = "menu suspenso" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "submenu suspenso" > 
    <a tabindex = "-1" href = "#" > Mais opções </a>  
    <ul class = "menu suspenso" > 
      ...
    </ul>
  </li>
</ul>

Exemplos

Duas opções básicas, juntamente com duas variações mais específicas.

Grupo de botão único

Enrole uma série de botões .btncom .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Esquerda </button> 
  <button class = "btn" > Meio </button> 
  <button class = "btn" > Direita </button> 
</div>

Vários grupos de botões

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>

Grupos de botões verticais

Faça um conjunto de botões aparecer empilhados verticalmente em vez de horizontalmente.

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

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.

<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

As listas suspensas de botão funcionam em qualquer tamanho: .btn-large, .btn-smallou .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

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.

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

Tamanhos

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Ação </button> 
  <button class = "btn btn-mini 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>

Padrões leves Mesma marcação, classes diferentes

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.

Guias básicas

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

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

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

Estado desativado

Para qualquer componente de navegação (guias, pílulas ou lista), adicione links cinza e sem efeitos.disabled de foco . No entanto, os links permanecerão clicáveis, a menos que você remova o atributo. Como alternativa, você pode implementar JavaScript personalizado para evitar esses cliques.href

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

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.

Empilhável

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

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

Comprimidos empilhados

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

Listas suspensas

Adicione menus suspensos com um pouco de HTML extra e o plug-in JavaScript suspenso .

Abas com menus suspensos

<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

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

Listas de navegação

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.

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>

ObservaçãoPara aninhar em uma lista de navegação, inclua class="nav nav-list"em qualquer arquivo <ul>.

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>

Navegação por abas

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.

Exemplo de tabulação

Para tornar as guias tabulados, crie um .tab-panecom ID exclusivo para cada guia e envolva-os em .tab-content.

Estou na Seção 1.

Olá, estou na Seção 2.

E aí garota, esta é a Seção 3.

<div class = "tabable" > <!-- Necessário apenas para guias esquerda/direita -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Seção 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seção 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Estou na Seção 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Olá, estou na Seção 2. </p>
    </div>
  </div>
</div>

Fade nas guias

Para fazer as guias aparecerem gradualmente, adicione .fadea cada .tab-pane.

Requer plugin 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 do JavaScript .

Tabbable em qualquer direção

Abas na parte inferior

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

Estou na Seção A.

Olá, estou na Seção B.

E aí garota, esta é a Seção C.

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

Estou na Seção A.

Olá, estou na Seção B.

E aí garota, esta é a Seção C.

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

Estou na Seção A.

Olá, estou na Seção B.

E aí garota, esta é a Seção C.

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

Barra de navegação básica

Para começar, as navbars são estáticas (não fixas no topo) e incluem suporte para um nome de projeto e navegação básica. Coloque um em qualquer lugar dentro de um .container, que define a largura do seu site e conteúdo.

<div class = "barra de navegação" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Título </a>  
    <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>
  </div>
</div>

Componentes da barra de navegação

Marca

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

<a class = "brand" href = "#" > Nome do projeto </a>

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>

Formulários

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" >  
  <button type = "submit" class = "btn" > Enviar </button>  
</form>

Formulário de pesquisa

Para um formulário de pesquisa mais personalizado, adicione .navbar-searchao forme .search-queryà entrada para estilos especializados na barra de navegação.

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

Alinhamento de componentes

Alinhe links de navegação, 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.

Usando listas suspensas

Adicione dropdowns e dropups à navegação com um pouco de marcação e o plugin JavaScript dropdowns .

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

Visite a documentação de listas suspensas JavaScript para obter mais marcação e informações sobre como chamar listas suspensas.

Texto

Enrole strings de texto em um elemento com .navbar-text, geralmente em uma <p>tag para obter a cor e o início adequados.

Variações de exibição opcionais

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.

Fixo para cima

Adicione .navbar-fixed-tope lembre-se de levar em conta a área oculta abaixo dela, adicionando pelo menos 40px paddingao arquivo <body>. Certifique-se de adicionar isso após o CSS principal do Bootstrap e antes do CSS responsivo opcional.

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

Fixo para baixo

Adicione .navbar-fixed-bottomem vez disso.

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

Barra de navegação superior estática

Crie uma barra de navegação de largura total que rola com a página adicionando .navbar-static-top. Ao contrário da .navbar-fixed-topclasse, você não precisa alterar nenhum preenchimento no arquivo body.

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

Barra de navegação responsiva

Para implementar uma barra de navegação responsiva recolhível, envolva o conteúdo da barra de navegação em uma div, .nav-collapse.collapse, e 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 colapso" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Atenção! A barra de navegação responsiva requer o plugin de recolhimento e o arquivo CSS Bootstrap responsivo .

Variação invertida

Modifique a aparência da barra de navegação adicionando .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Exemplos

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

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

Paginação padrão

Paginação simples 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.

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

Opções

Estados desativados e ativos

Os links são personalizáveis para diferentes circunstâncias. Use .disabledpara links não clicáveis e .activepara indicar a página atual.

<div class = "paginação" > 
  <ul>
    <li class = "desativado" ><a href = "#" > « </a></li>  
    <li class = "ativo" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Você pode, opcionalmente, trocar âncoras ativas ou desativadas por extensões para remover a funcionalidade de clique enquanto mantém os estilos pretendidos.

<div class = "paginação" > 
  <ul>
    <li class = "desativado" ><span> « </span></li> 
    <li class = "ativo" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Tamanhos

Gosta de paginação maior ou menor? Adicione .pagination-large, .pagination-small, ou .pagination-minipara tamanhos adicionais.

<div class = "paginação pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginação" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginação pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginação pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Alinhamento

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

<div class = "paginação centrada na paginação" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Links rápidos anteriores e seguintes para implementações simples de paginação com marcação e estilos leves. É ótimo para sites simples como blogs ou revistas.

Exemplo padrão

Por padrão, o pager centraliza os links.

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

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

Estado desativado opcional

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

<ul class = "pager" > 
  <li class = "anteriormente desativado" > 
    <a href = "#" > ← Mais antigo </a> 
  </li>
  ...
</ul>

Rótulos

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

Distintivos

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

Facilmente desmontável

Para facilitar a implementação, rótulos e emblemas simplesmente serão recolhidos (através do :emptyseletor de CSS) quando não houver conteúdo.

Unidade de herói

Um componente leve e flexível para mostrar o conteúdo principal do seu site. Funciona bem em sites de marketing e de conteúdo pesado.

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

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

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

<div class = "page-header" > 
  <h1> Exemplo de cabeçalho de página <small> Subtexto para cabeçalho </small></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
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.

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 = "span4" > 
    <a href = "#" class = "miniatura" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "miniatura" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Rótulo da miniatura </h3>
      <p> Legenda da miniatura... </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.

Alerta padrão

Enrole qualquer texto e um botão de dispensa opcional .alertpara uma mensagem de alerta de aviso básico.

Aviso! Melhor verificar você mesmo, você não está parecendo muito bem.

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

Botões de dispensar

Os navegadores Mobile Safari e Mobile Opera, além do data-dismiss="alert"atributo, exigem um href="#"para dispensa de alertas ao usar uma <a>tag.

<a href = "#" class = "fechar" data-dismiss = "alerta" > × </a>

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.

< tipo de botão = "botão" class = "fechar" data-dismiss = "alerta" > × </button>

Dispensar alertas via JavaScript

Use o plugin jQuery de alertas para dispensar alertas de forma rápida e fácil.

Opções

Para mensagens mais longas, aumente o preenchimento na parte superior e inferior do wrapper de alerta adicionando .alert-block.

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.

<div class = "alert alert-block" > 
  < tipo de botão = "botão" class = "fechar" data-dismiss = "alerta" > × </button>   
  <h4> Aviso! </h4>
  Melhor verificar você mesmo, você não é...
</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.

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

Sucesso

Bem feito! Você leu com sucesso esta importante mensagem de alerta.

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

Em formação

Atenção! Este alerta precisa de sua atenção, mas não é super importante.

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

Exemplos e marcação

Básico

Barra de progresso padrão com um gradiente vertical.

<div class = "progresso" > 
  <div class = "bar" style = " largura : 60 %; " ></div>   
</div>

Listrado

Usa um gradiente para criar um efeito listrado. Não disponível no IE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " largura : 20 %; " ></div>   
</div>

Animado

Adicione .activea .progress-stripedpara animar as listras da direita para a esquerda. Não disponível em todas as versões do IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " largura : 40 %; " ></div>   
</div>

Empilhado

Coloque várias barras no mesmo .progresspara empilhá-las.

<div class = "progresso" > 
  <div class = "bar bar-success" style = " largura : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " largura : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " largura : 10 %; " ></div>   
</div>

Opções

Cores adicionais

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progresso progresso-sucesso" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-perigo" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Barras listradas

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-sucesso progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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.

Versões anteriores ao Internet Explorer 10 e Opera 12 não suportam animações.

Estilos de objetos abstratos para a construção de vários tipos de componentes (como comentários de blog, Tweets, etc.) que apresentam uma imagem alinhada à esquerda ou à direita ao lado do conteúdo textual.

Exemplo padrão

A mídia padrão permite flutuar um objeto de mídia (imagens, vídeo, áudio) à esquerda ou à direita de um bloco de conteúdo.

Título de mídia

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em faucibus.

Título de mídia

<div class = "mídia" > 
  <a class = "pull-esquerda" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Título de mídia </h4> 
    ...
 
    <!-- Objeto de mídia aninhado -->
    <div class = "mídia" > 
      ...
    </div>
  </div>
</div>

Lista de mídia

Com um pouco de marcação extra, você pode usar mídia dentro da lista (útil para tópicos de comentários ou listas de artigos).

Título de mídia

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Título de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Título de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Título de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Título de mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "lista de mídia" > 
  <li class = "mídia" > 
    <a class = "pull-esquerda" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Título de mídia </h4> 
      ...
 
      <!-- Objeto de mídia aninhado -->
      <div class = "mídia" > 
        ...
     </div>
    </div>
  </li>
</ul>

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!

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

Aulas opcionais

Controle de preenchimento e cantos arredondados com duas classes de modificadores opcionais.

Olha, eu estou em um poço!

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

Olha, eu estou em um poço!

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

Fechar ícone

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

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

Dispositivos iOS requerem href="#"eventos for click se você preferir usar uma âncora.

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

Aulas auxiliares

Aulas simples e focadas para pequenos ajustes de exibição ou comportamento.

.puxar para a esquerda

Flutuar um elemento para a esquerda

class = "puxar para a esquerda"

. puxar - esquerda {
  flutuar : esquerda ;
}

.pull-right

Flutuar um elemento à direita

class = "puxar para a direita"

. puxar - direito {
  flutuar : direita ;
}

.silenciado

Alterar a cor de um elemento para#999

classe = "silenciado"

. silenciado {
  cor : #999; 
}

.clearfix

Limpe o floatem qualquer elemento

class = "clearfix"

. correção clara {
  * zoom : 1 ; 
  &: antes ,
  &: depois de {
    exibição : mesa ;
    conteúdo : "" ; 
  }
  &: depois de {
    claro : ambos ;
  }
}

Menus suspensos

Exemplo

Marcação

Opções

Alinhando os menus

Opções de menu desativadas

Submenus em menus suspensos

Grupos de botões

Exemplos

Grupo de botão único

Vários grupos de botões

Grupos de botões verticais

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

Listas suspensas em grupos de botões

Menus suspensos de botões

Visão geral e exemplos

Funciona com todos os tamanhos de botão

Requer JavaScript

Menus suspensos de botão dividido

Tamanhos

Menus suspensos

Nav: guias, pílulas e listas

Padrões leves Mesma marcação, classes diferentes

Guias básicas

Comprimidos básicos

Estado desativado

Alinhamento de componentes

Empilhável

Guias empilhadas

Comprimidos empilhados

Listas suspensas

Abas com menus suspensos

Comprimidos com dropdowns

Listas de navegação

Exemplo de lista de navegação

Divisores horizontais

Navegação por abas

Exemplo de tabulação

Fade nas guias

Requer plugin jQuery

Tabbable em qualquer direção

Abas na parte inferior

Abas à esquerda

Abas à direita

Barra de navegação

Barra de navegação básica

Componentes da barra de navegação

Marca

Links de navegação

Formulários

Formulário de pesquisa

Alinhamento de componentes

Usando listas suspensas

Texto

Variações de exibição opcionais

Fixo para cima

Fixo para baixo

Barra de navegação superior estática

Barra de navegação responsiva

Variação invertida

Migalhas de pão

Exemplos

Paginação Duas opções para paginar o conteúdo

Paginação padrão

Opções

Estados desativados e ativos

Tamanhos

Alinhamento

Pager

Exemplo padrão

Links alinhados

Estado desativado opcional

Etiquetas e emblemas

Rótulos

Distintivos

Facilmente desmontável

Componentes tipográficos

Unidade de herói

Olá Mundo!

Cabeçalho da página