Exemplo

Menus alternáveis e contextuais para exibir listas de links. Tornar interativo com um plugin dropdown de javascript.

<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="#">Algo a mais aqui</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Link separador</a></li>
</ul>

Marcação

Olhando somente o menu dropdown, aqui está o HTML requerido. Você precisa colocar em volta do elemento que dispara o menu dropdown em um .dropdown, ou outro elemento que declara position: relative;.. Então simplesmente cria o menu.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" 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="#">Algo a mais aqui</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Link separador</a></li>
  </ul>
</div>

Opções

Alinhar menus para a direita e adicionar níveis diferentes de dropdowns

Alinhando os menus

Adicione .pull-right para um .dropdown-menu para alinhar a direita um menu dropdown

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

Sub menus em um dropdown

Adicione um nível extra de menu dropdown, aparecendo no hover como é feito no OS X, com adição de algumas marcações. Adicione .dropdown-submenu em qualquer li em um dropdown existente para estilização automática

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

Exemplos

Duas opções básicas, ao longe de mais variações específicas

Grupo de botão único

Coloque em volta de uma série de botões .btn uma classe .btn-group.

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

Grupos de botões múltiplos

Combine as escolhas da estrutura <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 uma coleção de botões aparecerm verticalmente estagnados ao invés de horizontalmente

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

Checkbox e radio em diferentes sabores

Grupos de botões também funciona como radios, onde somente um pode estar ativo, ou checkboxes, onde qualquer número de elementos podem estar ativos. Veja a documentação do javascript para isto.

Dropdown nos grupos de botões

Atenção! Botões com dropdowns devem ser individualmente colocados com uma classe .btn-group dentro de um .btn-toolbar para renderizar corretamente

Visão geral e exemplos

Use qualquer botão para disparar um menu dropdown colocados dentro de um .btn-group e provê o markup apropriado

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

Trabalha com todos tamanhos de botões

Dropdown de botões trabalha em qualquer tamanho: .btn-large, .btn-small, ou .btn-mini.

Requer javascript

Botões dropdown requerem O Bootstrap dropdown plugin para funcionar.

Em alguns casos—como mobile—menus dropdown irão ultrapassar a visão do browser. Você precisa resolver o alinhamento manualmente ou com algum javascript customizado.

Quebrando botões dropdown

Para construir estilos e markup de grupos de botões, nós podemos simplesmente quebrar os botões. A funcionalidade de quebrar botões permite que você tenha uma ação padrão na esquerda e um dropdown na 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="dropdown-menu">
    <!-- Links de menu dropdown -->
  </ul>
</div>

Tamanhos

Utilize as classes extras de botões .btn-mini, .btn-small, ou .btn-large para 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="dropdown-menu">
    <!-- Links de menu dropdown -->
  </ul>
</div>

Menus Dropup

Menus Dropdown pode também ser alternados da parte inferior adicionando uma classe simples no pai imediato, classe é .dropdown-menu. Isto irá modificar a direção do .caret e reposiciona o menu para mover de cima pra baixo ebaixo de topo pra baixo

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- Links de menu dropdown -->
  </ul>
</div>

Padrões leves Mesmo markup, classes diferentes

Todos componentes de navegação aqui—abas, pílulas, e listas—compartilham a mesma marcação base e estilos através da classe .nav

Tabs básica

Use um regular <ul> de links e adicione a classe .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Início</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Pílulas básicas

Use algum HTML, mas use .nav-pills ao invés disto

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Início</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Estado desabilitado

Para qualquer componente de navegação(abas, pílulas e lista), adicione .disabled para links cinzas e para efeitos de hover. Links irão permanecer clicáveis, entretanto, ao menos que um javascript seja implementado para prever estes cliques

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Início</a></li>
  ...
</ul>

Alinhamento do componente

Para alinhar links de navegação, use as classes .pull-left ou .pull-right. Ambas as classes irão adicionar um float css na direção especificada

Estagnadas

Com abas e pílulas são horizontais por padrão, mas somente adicione uma classe, a .nav-stacked, para deixar verticalmente estagnados

Tabs estagnadas

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

Pílulas estagnadas

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

Dropdowns

Adicoine menus dropdown com um HTML extra e um Plugin javascript de dropdown.

Tabs com dropdown

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

Pílulas com dropdowns

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

Listas de navegação

Uma simples e fácil maneira de construir grupos de navegação em links com cabeçalhos opcionais. Eles são usados de melhor forma em barras laterais como o finder in OS X.

Exemplo de listas 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 de lista</li>
  <li class="active"><a href="#">Início</a></li>
  <li><a href="#">Biblioteca</a></li>
  ...
</ul>

Nota Para aninhamento com uma lista de navegação, class="nav nav-list" em um <ul>.

Divisores horizontais

Adicione um divisor horizontal simplesmente com um item de lista vazio com a classe .divider, como descrito:

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

Navegação tabeável

Traga suas abas para vida com um simples plugin para alternar entre conteúdo via abas. O Bootstrap integra tabs em abas em quatro estilos, topo (padrão), direita, parte inferior, e esquerda.

Exemplo tabeável

Para fazer abas tabeáveis, criar um .tab-pane com um id único para cada aba e coloque em volta delas um .tab-content

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <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>

Efeito de desaparecer gradualmente em abas

Para fazer abas desaparecem gradualmente, adicione .fade para cada .tab-pane.

Requer plugin jQuery

Todas abas tabeáveis são alimentados pelo nosso leve plugin do jQuery. Leia mais sobre como trazer abas tabeáveis para vida no na página de documentação javascript.

Tabeável em qualquer direção

Tabs na parte inferior

Mudando a ordem dos HTML's e modificando uma classe você coloca as tabs na parte inferior

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Tabs na esquerda

Mude a classe para colocar as tabs na esquerda

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

Tabs na direita

Mude a classe para colocar as tabs na direita

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

Navegação básica

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

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Título</a>
    <ul class="nav">
      <li class="active"><a href="#">Início</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Componentes de barra de navegação

Marca

Um link simples para mostrar sua marca ou nome do projeto requer apenas uma tag de link

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

Links de navegação

Itens de navegação são simplesmente adicionados via listas não ordenadas

<ul class="nav">
  <li class="active">
    <a href="#">Início</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Você pode facilmente adicionar divisores em links de navegação com uma lista vazia e adicionando uma classe. Simplesmente adicione isto entre os links

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

Formulários

Para estilizar e posicionar apropriadamente um formulário dentro da barra de navegação, adicione a classe apropriada como mostrado abaixo. Para um formulário padrão, inclua .navbar-form ou .pull-left ou .pull-right para alinhar

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Enviar</button>
</form>

Formulário de busca

Para um formulário customizado de busca, adicione .navbar-search para o form e .search-query para o input para estilos especializados na barra de navegação

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

Alinhamento do componente

Alinhar links de navegação, formulário de busca, ou texto, use o .pull-left ou .pull-right. Ambas classes irão adicionar um float no CSS na direção especificada

Usando dropdowns

Adicione dropdowns e dropups para a navegação com um pouco de marcação e um plugin de dropdowns.

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

Visite a documentação do dropdowns javascript

Texto

Colocar em volta de strings de texto em um elemento .navbar-text, usualmente em uma tag <p> para apropriadamente colocar uma cor

Variações opcionais de exibição

Conserte a barra de navegação no topo ou na parte inferior da janela do browser com uma classe adicional na div mais externa, o .navbar.

Fixed to top

Adicione .navbar-fixed-top e lembre-se de contar com a área abaixo adicionando ao menos 40px padding para o <body>. Certifique-se de adicionar isto depois do core do Bootstrap CSS e antes do CSS responsivo opcional

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

Fixed to bottom

Ao invés disto, adicione .navbar-fixed-bottom

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

Navegação do topo estática

Crie uma barra de navegação de largura inteira que executa scroll junto com a página adicionando .navbar-static-top. Diferente da classe .navbar-fixed-top, você não precisa mudar qualquer padding no body.

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

Barra de navegação responsiva

Para implementar uma barra de navegação responsiva colapsável, coloque em volta do conteúdo da barra de navegação em uma div container, .nav-collapse.collapse, e adicione um botão alternador na barra de navegação, .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar é usado como alternador para conteúdo de barra de navegação colapsável -->
      <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>

      <!-- Tenha certeza de deixar a marca se você quer que ela seja mostrada -->
      <a class="brand" href="#">Nome do projeto</a>

      <!-- Tudo que você queira escondido em 940px ou menos, coloque aqui -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

Variação invertida

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

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

Exemplos

Um único exemplo mostra como pode ser mostrado entre múltiplas páginas

<ul class="breadcrumb">
  <li><a href="#">Início</a> <span class="divider">/</span></li>
  <li><a href="#">Biblioteca</a> <span class="divider">/</span></li>
  <li class="active">Dados</li>
</ul>

Paginação padrão

Paginação simples inspirado pelo Rdio, ótima para aplicação e resultados de busca. O bloco maior é difícil de perder, facilmente escalável, e provê grandes áreas de clique

<div class="pagination">
  <ul>
    <li><a href="#">Prev</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="#">Next</a></li>
  </ul>
</div>

Opções

Desabilitar e ativar estados

Links são customizados em diferentes circunstâncias. Use .disabled para links não clicáveis e .active para indicar a página corrente

<div class="pagination ">
  <ul>
    <li class="disabled"><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

Alinhamento

Adicione um ou duas classes opcionais para modificar o alinhamento dos links de paginação: .pagination-centered e .pagination-right.

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

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

Paginador

Links de próximo e anterior para implementação de paginações simples com marcação leve e estilos leves. É ótimo para sites simples como blogs ou revistas digitais

Exemplo padrão

Por padrão, o paginador centraliza 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 em seus lados

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Mais antigos</a>
  </li>
  <li class="next">
    <a href="#">Mais novos &rarr;</a>
  </li>
</ul>

Estado de opcional desabilitado

Links de paginação também usam a classe utilitária .disabled para a paginação

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Mais antigos</a>
  </li>
  ...
</ul>

Labels(rótulos)

Badges

Unidade herói

Um componente flexível e leve de showcase. Funciona bem para sites de marketing e de conteúdo pesado

<div class="hero-unit">
  <h1>Cabeçalho</h1>
  <p>Linha de tag</p>
  <p>
    <a class="btn btn-primary btn-large">
      Aprenda mais
    </a>
  </p>
</div>

Cabeçalho de página

Use um simples h1 para apropriadamente dar um espaço nas seções segmentadas de conteúdo em uma página. É possível utilizar o padrão h1 com small, o elemento em si mais 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, os Thumbnails do Bootstrap são desenhados para serem exibidos em imagens com links com o mínimo de markup possível.

Altamente customizável

Com um pouco a mais de markup, é possível adicionar qualquer tipo de conteúdo html, como cabeçalho, parágrafos, ou até mesmo botões nas miniaturas

Por que usar miniaturas

As miniaturas (previamente .media-grid até a versão 1.4) são ótimos para grids de fotos ou vídeos, imagens em resultados de busca, detalhes de produtos, portfolios e muito mais. Eles podem ser links ou conteúdo estático

marcação simples e flexível

A marcação da miniatura é simplesmente uma ul com qualquer número de elementos li. É também super flexível, permitindo para qualquer tipo de conteúdo com um pouco mais de markup para colocar no seu conteúdo

use tamanho das colunas do grid

Por último, os componentes de miniatura usam o grid já existente —como .span2 ou .span3— para controlar as dimensões da miniatura

Marcação

Como mencionado antes, a marcação necessária para as miniaturas é leve e direta. Dê uma olhada na configuração padrão para imagens linkadas

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Para conteúdo personalizado nas miniaturas, a marcação muda um pouco. Para permitir elementos bloco em qualquer lugar, nós trocamos a tag <a> para uma div <div> assim:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
      <h3>Rótulo para a miniatura</h3>
      <p>Texto do thumbnail...</p>
    </div>
  </li>
  ...
</ul>

Mais exemplos

Explore todas opções com as várias classes do grid disponível para você. Você pode também misturar e encaixar diferentes tamanhos.

Alerta padrão

Coloque qualquer texto em volta de um botão de fechar em um .alert para uma mensagem de alerta básico

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Advertência!</strong> Melhor checar você mesmo, você não está parecendo bem
</div>

Botões de fechar

Browsers mobile e opera, com complemento ao atributo data-dismiss="alert", requer um href="#" para alertas quando usando uma tag <a>

<a href="#" class="close" data-dismiss="alert">×</a>

Alternativamente, você pode usar um elemento <button> com o atributo data, que nós optamos para fazer em nossa documentação. quando usando <button>, você deve incluir type="button" ou seu formulário pode não ser enviado

<button type="button" class="close" data-dismiss="alert">×</button>

Alertas via javascript

Use um alerts jQuery plugin para rapidamente fechar alertas

Opções

Para mensagens longas, aumente o padding no topo e no bottom do alerta colocando em volta adicionando .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Advertência!</h4>
  Melhor checar você mesmo, você não está...
</div>

Alternatvas contextuais

Adicionando classes opcionais para mudar conotação dos alertas

Erro ou perigo

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

Sucesso

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

Informação

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

Exemplos e marcação

Básico

Barra de progresso padrão com um gradiente vertical

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Zebrada

Use um gradiente para criar um efeito de zebra. Não disponível no IE7-8.

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

Animado

Adicione um .active ao .progress-striped para animar a zebra da esquerda para direita. Não disponível em todas versões do IE

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

Stacked

Place multiple bars into the same .progress to stack them.

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

Opções

Cores adicionais

Barras de progresso use algumas das classes de botões e alertas para estilos consistentes

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <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-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Barras zebradas

Similar as cores sólidas, nós zebramos as barras de progresso

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success 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 a browser

Barra de progresso usa gradientes CSS3, transitions, e as animações são obtidas com todos os seus efeitos. Estas funcionalidades não são suportadas no IE7-9 ou versões mais antigas de Firefox.

Versione anteriores ao Internet Explorer 10 e Opera 12 não suporta animação

Wells

Use o well como um efeito simples em um elemento para dar um efeito sobreposto

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

Classes opcionais

Controlando padding e bordas arredondadas com duas classes opcionais modificáveis

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

Ícone de fechar

Use uma classe close genérica para rejeitar o conteúdo como modais e alertas

<button class="close">&times;</button>

Dispositivos iOS requerem um href="#" para eventos de clique se você usar preferencialmente como âncora

<a class="close" href="#">&times;</a>

Classes de ajuda

Classes simples, focada para telas menores

.pull-left

Flutuar um elemento a esquerda

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Flutuar um elemento na direita

class="pull-right"

.pull-right {
  float: right;
}

.muted

Mudar uma cor do elemento para #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Aplique um clear no float em qualquer elemento

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}