Exemplo

Menus contextuais e alternáveis para exibir uma lista de links. Faça isto de forma interativa com dropdown JavaScript plugin.

<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

Default

Dropup

Left submenu

<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 podem também funcionar como botões radio, onde um botão somente pode estar ativo, ou checkboxes, onde qualquer número de botões podem estar ativos. Veja a documentação 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 se extender além do viewport do browser. Você precisa resolver o alinhamento manualmente ou com um 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, ou lista), adicione .disabled para links cinzas e sem efeito hover. Os links permaneceram clicáveis, entretanto, ao menos que você remova o atributo href. Alternativamente, você pode implementar um javascript customizado para prevenir 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

Adicionar menus dropdown com um título com 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

Estou na seção 1

Olá, estou na seção 2

O que há garota, estou na seção 3

<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 as abas tabeáveis são construídas com nosso leve plugin de jQuery. Leia mais sobre como trazer abas tabeáveis a vida na 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

Estou na Seção A

Olá, Estou na seção B

E ai garota, estou na Seção C

<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

Estou na Seção A

Olá, Estou na seção B

E ai garota, estou na Seção C

<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

Estou na Seção A

Olá, Estou na seção B

E ai garota, estou na Seção C

<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

Adicoinar dropdowns de dropups a navegação com um pouco de marcação através de um plugin javascript de dropdown.

<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 dropdown javascript para mais informação sobre a marcação na chamada dos dropdowns

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 collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

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

Atenção! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.

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>

Você pode opcionalmente trocar links entre ativo e desabilitado para spans e remover a funcionalidade de clique enquanto retêm os estilos desejados

<div class="pagination">
  <ul>
    <li class="disabled"><span>Prev</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Tamanhos

Paginações elegantes maiores ou menores? Adicione .pagination-large, .pagination-small, ou .pagination-mini

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </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 desabilitado opcional

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)

Labels(rótulos)	Marcação
Padrão	`<span class="label">Padrão</span>`
Sucesso	`<span class="label label-success">Sucesso</span>`
Aviso	`<span class="label label-warning">Aviso</span>`
Importante	`<span class="label label-important">Importante</span>`
Informações	`<span class="label label-info">Informações</span>`
Inverso	`<span class="label label-inverse">Inverso</span>`

Badges

Nome	Exemplo	Marcação
Padrã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 colapsável

Para fácil implementação, rótulos e emblemas irão simplesmente colapsar (via seletor CSS's :empty) quando não há nenhum conteúdo dentro

Unidade herói

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

Olá mundo!

Isto é uma simples unidade herói, um componente para chamar uma atenção extra para informações adicionais

Aprenda mais

<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 <small>Subtexto para os cabeçalhos</small></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.

Miniaturas com bordas internas

Há uma maneira alternativa de estilizar bordas usando um pequeno truque para simular bordas internas. Para aplicar esta borda adicione a classe inner-border dentro de uma tag a.

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

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

Rótulo para a 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 para a 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 para a 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 (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

Advertência! Melhor checar você mesmo, você não está parecendo bem

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

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

Advertência!

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

<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

Oh spnap! Mude algumas coisas e envie novamente

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

Sucesso

Muito bem Você leu esta mensagem importante com sucesso

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

Informação

Atenção! Este alerta precisa de sua atenção, mais não é o mais importante

<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

Estilos de objectos abstratos para construir vários tipos de componentes (como comentários de blogs, Tweets, etc) que necessitam de uma alinhamento a esquerda ou direita dentro de um conteúdo contextual.

Exemplo padrão

A mídia padrão permite flutuar objetos de mídia (imagens, video, audio) para a esquerda ou direita de um conteúdo em bloco

Cabeçalho da mídia

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

Cabeçalho da mídia

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="http://placehold.it/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Cabeçalho da mídia</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Lista de mídias

Com uma pitada de marcação extra, você pode usar mídia dentro de uma lista (útil para comentários ou lista de artigos).

Cabeçalho da mídia

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

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

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

Cabeçalho de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Cabeçalho da mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="http://placehold.it/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Cabeçalho da mídia</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

Olá, Eu sou um well!

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

Classes opcionais

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

Olá, Eu sou um well!

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

Olá, Eu sou um well!

<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ê prefere usar uma â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;
  }
}

Menus dropdown

Exemplo

Marcação

Opções

Alinhando os menus

Sub menus em um dropdown

Grupos de botões

Exemplos

Grupo de botão único

Grupos de botões múltiplos

Grupos de botões verticais

Checkbox e radio em diferentes sabores

Dropdown nos grupos de botões

Botões de menu dropdown

Visão geral e exemplos

Trabalha com todos tamanhos de botões

Requer Javascript

Quebrando botões dropdown

Tamanhos

Menus Dropup

Navegação: abas, pílulas e listas

Padrões leves Mesmo markup, classes diferentes

Tabs básica

Pílulas básicas

Estado desabilitado

Alinhamento do componente

Estagnadas

Tabs estagnadas

Pílulas estagnadas

Dropdowns

Tabs com dropdown

Pílulas com dropdowns

Listas de navegação

Exemplo de listas de navegação

Divisores horizontais

Navegação tabeável

Exemplo tabeável

Efeito de desaparecer gradualmente em abas

Requer plugin jQuery

Tabeável em qualquer direção

Tabs na parte inferior

Tabs na esquerda

Tabs na direita

Barra de navegação

Navegação básica

Componentes de barra de navegação

Marca

Links de navegação

Formulários

Formulário de busca

Alinhamento do componente

Usando dropdowns

Texto

Variações opcionais de exibição

Fixed to top

Fixed to bottom

Navegação do topo estática

Barra de navegação responsiva

Variação invertida

Breadcrumbs

Exemplos

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

Paginação padrão

Opções

Desabilitar e ativar estados

Tamanhos

Alinhamento

Paginador

Exemplo padrão

Links alinhados

Estado de desabilitado opcional

rótulos e emblemas

Labels(rótulos)

Badges

Facilmente colapsável

Componentes tipográficos

Unidade herói

Olá mundo!

Cabeçalho de página

Exemplo de cabeçalho de página Subtexto para os cabeçalhos