Componentes

Dezenas de componentes reusáveis construídos para prover navegação, alertas, popovers e mais

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>

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

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

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