Glifos disponíveis

Inclui mais de 250 glifos em formato de fonte do conjunto Glyphicon Halflings. Glyphicons Halflings normalmente não estão disponíveis gratuitamente, mas seu criador os disponibilizou para o Bootstrap gratuitamente. Como agradecimento, pedimos apenas que você inclua um link para Glyphicons sempre que possível.

glyphicon glyphicon-asterisco
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-lápis
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-coração
glyphicon glyphicon-star
glyphicon glyphicon-estrela-vazio
glyphicon glyphicon-user
glyphicon glyphicon-filme
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-lixo
glyphicon glyphicon-home
glyphicon arquivo glyphicon
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon download de glyphicon
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-círculo
glyphicon glyphicon-repeat
glyphicon glyphicon-atualizar
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
Glyphicon Glyphicon-fones de ouvido
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-código de barras
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon lista de glyphicon
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-vídeo
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-ajustar
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-avanço rápido
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-esquerda
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-sinal de subtração
glyphicon glyphicon-remove-sinal
glyphicon glyphicon-ok-sign
glyphicon glyphicon-quest-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-círculo
glyphicon glyphicon-seta-esquerda
glyphicon glyphicon-seta-direita
glyphicon glyphicon-seta para cima
glyphicon glyphicon-seta para baixo
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-sinal de exclamação
glyphicon glyphicon-presente
glyphicon glyphicon-folha
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-sinal de aviso
glyphicon glyphicon-plane
glyphicon glyphicon-calendário
glyphicon glyphicon-random
glyphicon glyphicon-comentário
glyphicon glyphicon-ímã
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retuíte
glyphicon glyphicon-carrinho de compras
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificado
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-mão-direita
glyphicon glyphicon-mão-esquerda
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-círculo-seta-direita
glyphicon glyphicon-círculo-seta-esquerda
glyphicon glyphicon-círculo-seta para cima
glyphicon glyphicon-círculo-seta para baixo
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-pasta
glyphicon glyphicon-tela cheia
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-coração-vazio
glyphicon glyphicon-link
glyphicon glyphicon-telefone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-classificar-por-alfabeto
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-classificar por ordem
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-desmarcado
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-login
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nova-janela
glyphicon registro de glyphicon
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon salvo
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-disquete
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-cartão de crédito
glyphicon glyphicon-transfer
glyphicon glyphicon-talheres
Glyphicon Glyphicon-header
glyphicon compactado com glyphicon
Glyphicon Glyphicon-fone de ouvido
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torre
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-vídeo
glyphicon glyphicon-legendas
glyphicon glyphicon-som-estéreo
glyphicon glyphicon-som-dolby
glyphicon glyphicon-som-5-1
glyphicon glyphicon-som-6-1
glyphicon glyphicon-som-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-arquivo aberto
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-rei
glyphicon glyphicon-rainha
glyphicon glyphicon-peão
glyphicon glyphicon-bispo
glyphicon glyphicon-cavaleiro
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-quadro-negro
glyphicon glyphicon-cama
glyphicon glyphicon-maçã
glyphicon glyphicon-erase
glyphicon glyphicon-ampulheta
glyphicon glyphicon-lâmpada
glyphicon glyphicon-duplicate
glyphicon glyphicon-cofrinho
glyphicon glyphicon-tesoura
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rublo
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-com sabor de picolé
glyphicon glyphicon-educação
glyphicon glyphicon-opção-horizontal
glyphicon glyphicon-opção-vertical
glyphicon glyphicon-menu-hambúrguer
glyphicon glyphicon-modal-window
glyphicon glyphicon-óleo
glyphicon glyphicon-grain
glyphicon glyphicon-óculos de sol
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-texto-fundo
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triângulo-esquerda
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
Glyphicon Glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-esquerda
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Como usar

Por motivos de desempenho, todos os ícones exigem uma classe base e uma classe de ícone individual. Para usar, coloque o código a seguir em qualquer lugar. Certifique-se de deixar um espaço entre o ícone e o texto para o preenchimento adequado.

Não misture com outros componentes

As classes de ícones não podem ser combinadas diretamente com outros componentes. Eles não devem ser usados junto com outras classes no mesmo elemento. Em vez disso, adicione um aninhado <span>e aplique as classes de ícone ao arquivo <span>.

Apenas para uso em elementos vazios

As classes de ícones só devem ser usadas em elementos que não contenham conteúdo de texto e não tenham elementos filhos.

Alterando a localização da fonte do ícone

O Bootstrap assume que os arquivos de fonte do ícone estarão localizados no ../fonts/diretório, em relação aos arquivos CSS compilados. Mover ou renomear esses arquivos de fonte significa atualizar o CSS de três maneiras:

Altere as variáveis @icon-font-pathe/ou @icon-font-namenos arquivos Less de origem.
Utilize a opção de URLs relativa fornecida pelo compilador Less.
Altere os url()caminhos no CSS compilado.

Use qualquer opção que melhor se adapte à sua configuração de desenvolvimento específica.

Ícones acessíveis

Versões modernas de tecnologias assistivas anunciarão conteúdo gerado por CSS, bem como caracteres Unicode específicos. Para evitar saídas não intencionais e confusas em leitores de tela (especialmente quando os ícones são usados apenas para decoração), nós os ocultamos com o aria-hidden="true"atributo.

Se você estiver usando um ícone para transmitir significado (em vez de apenas como um elemento decorativo), certifique-se de que esse significado também seja transmitido para tecnologias assistivas – por exemplo, inclua conteúdo adicional, visualmente oculto com a .sr-onlyclasse.

Se estiver criando controles sem outro texto (como um <button>que contém apenas um ícone), você deve sempre fornecer conteúdo alternativo para identificar a finalidade do controle, para que faça sentido para os usuários de tecnologias assistivas. Nesse caso, você pode adicionar um aria-labelatributo no próprio controle.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Exemplos

Use-os em botões, grupos de botões para uma barra de ferramentas, navegação ou entradas de formulário pré-anexadas.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Um ícone usado em um alerta para transmitir que é uma mensagem de erro, com .sr-onlytexto adicional para transmitir essa dica aos usuários de tecnologias assistivas.

Digite um endereço de e-mail válido

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

Exemplo

Envolva o gatilho do menu suspenso e o menu suspenso dentro de .dropdown, ou outro elemento que declare position: relative;. Em seguida, adicione o HTML do menu.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Os menus suspensos podem ser alterados para expandir para cima (em vez de para baixo) adicionando .dropupao pai.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Alinhamento

Por padrão, um menu suspenso é posicionado automaticamente 100% na parte superior e no lado esquerdo de seu pai. Adicionar .dropdown-menu-righta .dropdown-menupara alinhar à direita o menu suspenso.

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

Cabeçalhos

Adicione um cabeçalho para rotular seções de ações em qualquer menu suspenso.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Divisor

Adicione um divisor para separar séries de links em um menu suspenso.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Itens de menu desativados

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Agrupe uma série de botões em uma única linha com o grupo de botões. Adicione um rádio JavaScript opcional e comportamento de estilo de caixa de seleção com nosso plugin de botões .

Dicas de ferramentas e popovers em grupos de botões requerem configuração especial

Ao usar dicas de ferramentas ou popovers em elementos dentro de um .btn-group, você terá que especificar a opção container: 'body'para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ou perdendo seus cantos arredondados quando a dica de ferramenta ou popover é acionado).

Certifique-se de que está correto `role`e forneça uma etiqueta

Para que tecnologias assistivas – como leitores de tela – transmitam que uma série de botões está agrupada, um roleatributo apropriado precisa ser fornecido. Para grupos de botões, isso seria role="group", enquanto as barras de ferramentas deveriam ter um role="toolbar".

Uma exceção são os grupos que contêm apenas um único controle (por exemplo, os grupos de botões justificados com <button>elementos) ou uma lista suspensa.

Além disso, grupos e barras de ferramentas devem receber um rótulo explícito, pois a maioria das tecnologias assistivas não os anunciará, apesar da presença do roleatributo correto. Nos exemplos fornecidos aqui, usamos aria-label, mas alternativas como aria-labelledbytambém podem ser usadas.

Exemplo básico

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Dimensionamento

Em vez de aplicar classes de dimensionamento de botão a cada botão em um grupo, basta adicionar .btn-group-*a cada .btn-group, inclusive ao aninhar vários grupos.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Aninhamento

Coloque um .btn-groupdentro de outro .btn-groupquando quiser menus suspensos misturados com uma série de botões.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Variação vertical

Faça um conjunto de botões aparecer empilhados verticalmente em vez de horizontalmente. Os menus suspensos de botão dividido não são suportados aqui.

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

Grupos de botões justificados

Faça com que um grupo de botões se estique em tamanhos iguais para abranger toda a largura de seu pai. Também funciona com menus suspensos de botões dentro do grupo de botões.

Manipulando bordas

Devido ao HTML e CSS específicos usados para justificar botões (nomeadamente display: table-cell), as bordas entre eles são duplicadas. Em grupos de botões regulares, margin-left: -1pxé usado para empilhar as bordas em vez de removê-las. Porém, marginnão funciona com display: table-cell. Como resultado, dependendo de suas personalizações no Bootstrap, você pode remover ou recolorir as bordas.

IE8 e fronteiras

O Internet Explorer 8 não renderiza bordas em botões em um grupo de botões justificado, seja ligado <a>ou <button>elementos. Para contornar isso, envolva cada botão em outro .btn-group.

Consulte #12476 para obter mais informações.

Com `<a>`elementos

Basta envolver uma série de .btns em .btn-group.btn-group-justified.

Deixei Meio Certo

Deixei Meio

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Links que funcionam como botões

Se os <a>elementos forem usados para atuar como botões – acionando a funcionalidade na página, em vez de navegar para outro documento ou seção na página atual – eles também devem receber um arquivo role="button".

Com `<button>`elementos

Para usar grupos de botões justificados com <button>elementos, você deve agrupar cada botão em um grupo de botões . A maioria dos navegadores não aplica corretamente nosso CSS para justificação de <button>elementos, mas como oferecemos suporte a menus suspensos de botão, podemos contornar isso.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Use qualquer botão para acionar um menu suspenso, colocando-o dentro de um .btn-groupe fornecendo a marcação de menu adequada.

Dependência de plug-in

Os botões suspensos exigem que o plug -in suspenso seja incluído na sua versão do Bootstrap.

Menus suspensos de botão único

Transforme um botão em uma alternância suspensa com algumas alterações básicas de marcação.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Menus suspensos de botão dividido

Da mesma forma, crie listas suspensas de botão dividido com as mesmas alterações de marcação, apenas com um botão separado.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dimensionamento

As listas suspensas de botões funcionam com botões de todos os tamanhos.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Variação de dropup

Acione menus suspensos acima dos elementos adicionando .dropupao pai.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Estenda os controles de formulário adicionando texto ou botões antes, depois ou em ambos os lados de qualquer arquivo <input>. Use .input-groupcom um .input-group-addonou .input-group-btnpara preceder ou anexar elementos a um único arquivo .form-control.

`<input>`Apenas textuais

Evite usar <select>elementos aqui, pois eles não podem ser totalmente estilizados em navegadores WebKit.

Evite usar <textarea>elementos aqui, pois seu rowsatributo não será respeitado em alguns casos.

Dicas de ferramentas e popovers em grupos de entrada requerem configuração especial

Ao usar dicas de ferramentas ou popovers em elementos dentro de um .input-group, você terá que especificar a opção container: 'body'para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ou perdendo seus cantos arredondados quando a dica de ferramenta ou popover é acionado).

Não misture com outros componentes

Não misture grupos de formulários ou classes de colunas de grade diretamente com grupos de entrada. Em vez disso, aninhe o grupo de entrada dentro do grupo de formulários ou elemento relacionado à grade.

Sempre adicione marcadores

Os leitores de tela terão problemas com seus formulários se você não incluir um rótulo para cada entrada. Para esses grupos de entrada, certifique-se de que qualquer rótulo ou funcionalidade adicional seja transmitido às tecnologias assistivas.

A técnica exata a ser usada (elementos visíveis <label>, <label>elementos ocultos usando a .sr-onlyclasse ou uso do atributo aria-label, aria-labelledby, ou atributo) aria-describedbye quais informações adicionais precisarão ser transmitidas variam dependendo do tipo exato de widget de interface que você está implementando. Os exemplos nesta seção fornecem algumas abordagens sugeridas para casos específicos.titleplaceholder

Exemplo básico

Coloque um complemento ou botão em cada lado de uma entrada. Você também pode colocar um em ambos os lados de uma entrada.

Não oferecemos suporte a vários complementos ( .input-group-addonou .input-group-btn) em um único lado.

Não oferecemos suporte a vários controles de formulário em um único grupo de entrada.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Dimensionamento

Adicione as classes de dimensionamento de formulário relativo ao .input-grouppróprio e o conteúdo dentro será redimensionado automaticamente - não há necessidade de repetir as classes de tamanho de controle de formulário em cada elemento.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Caixas de seleção e complementos de rádio

Coloque qualquer caixa de seleção ou opção de rádio no complemento de um grupo de entrada em vez de texto.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Complementos de botão

Os botões nos grupos de entrada são um pouco diferentes e requerem um nível extra de aninhamento. Em vez de .input-group-addon, você precisará usar .input-group-btnpara envolver os botões. Isso é necessário devido aos estilos de navegador padrão que não podem ser substituídos.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botões com dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botões segmentados

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Vários botões

Embora você possa ter apenas um complemento por lado, você pode ter vários botões dentro de um único arquivo .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs disponíveis no Bootstrap têm marcação compartilhada, começando com a .navclasse base, bem como estados compartilhados. Troque as classes modificadoras para alternar entre cada estilo.

O uso de navs para painéis de guias requer o plug-in de guias JavaScript

Para guias com áreas tabuladas, você deve usar o plug-in JavaScript de guias . A marcação também exigirá roleatributos adicionais e ARIA – consulte a marcação de exemplo do plug-in para obter mais detalhes.

Torne os navs usados como navegação acessíveis

Se você estiver usando navs para fornecer uma barra de navegação, certifique-se de adicionar um role="navigation"ao contêiner pai mais lógico do <ul>, ou envolver um <nav>elemento em toda a navegação. Não adicione a função à <ul>própria, pois isso impediria que ela fosse anunciada como uma lista real por tecnologias assistivas.

Abas

Observe que a .nav-tabsclasse requer a .navclasse base.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Comprimidos

Pegue o mesmo HTML, mas use .nav-pills:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Os comprimidos também são empilháveis verticalmente. Basta adicionar .nav-stacked.

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

Justificado

Crie facilmente guias ou pílulas com larguras iguais aos seus pais em telas maiores que 768px com .nav-justified. Em telas menores, os links de navegação são empilhados.

Atualmente, os links de navegação da barra de navegação justificados não são suportados.

Safari e navegação justificada responsiva

A partir da v9.1.2, o Safari exibe um bug no qual redimensionar seu navegador horizontalmente causa erros de renderização na navegação justificada que são limpos na atualização. Este bug também é mostrado no exemplo de navegação justificada .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Links desativados

Para qualquer componente de navegação (guias ou pílulas), adicione links cinza e .disabledsem efeitos de foco .

A funcionalidade do link não foi afetada

Esta classe só mudará a <a>aparência do 's, não sua funcionalidade. Use JavaScript personalizado para desabilitar links aqui.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Usando 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 role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Comprimidos com dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars são metacomponentes responsivos que servem como cabeçalhos de navegação para seu aplicativo ou site. Eles começam recolhidos (e podem ser alternados) em visualizações móveis e se tornam horizontais à medida que a largura da janela de visualização disponível aumenta.

Atualmente, os links de navegação da barra de navegação justificados não são suportados.

Conteúdo transbordando

Como o Bootstrap não sabe quanto espaço o conteúdo em sua barra de navegação precisa, você pode ter problemas com o conteúdo agrupado em uma segunda linha. Para resolver isso, você pode:

Reduza a quantidade ou largura dos itens da barra de navegação.
Oculte certos itens da barra de navegação em determinados tamanhos de tela usando classes de utilitários responsivos .
Altere o ponto em que sua barra de navegação alterna entre o modo recolhido e horizontal. Personalize a @grid-float-breakpointvariável ou adicione sua própria consulta de mídia.

Alterando o ponto de interrupção da barra de navegação móvel recolhido

A barra de navegação é recolhida em sua visualização móvel vertical quando a viewport é mais estreita que @grid-float-breakpoint, e se expande em sua visualização horizontal não móvel quando a viewport tem pelo menos @grid-float-breakpointlargura. Ajuste esta variável na fonte Less para controlar quando a barra de navegação é recolhida/expandida. O valor padrão é 768px(a menor tela "pequena" ou "tablet").

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Substitua a marca da barra de navegação pela sua própria imagem, trocando o texto por um <img>. Como o .navbar-brandtem seu próprio preenchimento e altura, pode ser necessário substituir algum CSS dependendo da sua imagem.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Coloque o conteúdo do formulário .navbar-formpara alinhamento vertical adequado e comportamento recolhido em viewports estreitas. Use as opções de alinhamento para decidir onde ele reside no conteúdo da barra de navegação.

Como um aviso, .navbar-formcompartilha grande parte de seu código .form-inlinevia mixin. Alguns controles de formulário, como grupos de entrada, podem exigir que larguras fixas sejam exibidas corretamente em uma barra de navegação.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Sempre adicione marcadores

Os leitores de tela terão problemas com seus formulários se você não incluir um rótulo para cada entrada. Para esses formulários embutidos, você pode ocultar os rótulos usando a .sr-onlyclasse. Existem outros métodos alternativos de fornecer um rótulo para tecnologias assistivas, como o atributo aria-label, aria-labelledbyou . titleSe nenhum deles estiver presente, os leitores de tela podem recorrer ao uso do placeholderatributo, se presente, mas observe que o uso de placeholdercomo substituto de outros métodos de rotulagem não é recomendado.

Adicione a .navbar-btnclasse aos <button>elementos que não residem em a <form>para centralizá-los verticalmente na barra de navegação.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

Para pessoas que usam links padrão que não estão no componente de navegação regular da barra de navegação, use a .navbar-linkclasse para adicionar as cores apropriadas para as opções padrão e inversa da barra de navegação.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Alinhe links de navegação, formulários, botões ou texto, usando as classes de utilitário .navbar-leftou . .navbar-rightAmbas as classes adicionarão um float CSS na direção especificada. Por exemplo, para alinhar links de navegação, coloque-os em separado <ul>com a respectiva classe de utilitário aplicada.

Essas classes são versões mistas de .pull-lefte .pull-right, mas têm como escopo consultas de mídia para facilitar o manuseio dos componentes da barra de navegação em todos os tamanhos de dispositivo.

Adicione .navbar-fixed-tope inclua um .containerou .container-fluidpara centralizar e preencher o conteúdo da barra de navegação.

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

Acolchoamento corporal necessário

A barra de navegação fixa sobreporá seu outro conteúdo, a menos que você adicione paddingao topo do arquivo <body>. Experimente seus próprios valores ou use nosso snippet abaixo. Dica: Por padrão, a barra de navegação tem 50px de altura.

body { padding-top: 70px; }

Certifique-se de incluir isso após o CSS principal do Bootstrap.

Adicione .navbar-fixed-bottome inclua um .containerou .container-fluidpara centralizar e preencher o conteúdo da barra de navegação.

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

Acolchoamento corporal necessário

A barra de navegação fixa sobreporá seu outro conteúdo, a menos que você adicione paddingà parte inferior do arquivo <body>. Experimente seus próprios valores ou use nosso snippet abaixo. Dica: Por padrão, a barra de navegação tem 50px de altura.

body { padding-bottom: 70px; }

Certifique-se de incluir isso após o CSS principal do Bootstrap.

Crie uma barra de navegação de largura total que rola com a página adicionando .navbar-static-tope incluindo um .containerou .container-fluidpara centralizar e preencher o conteúdo da barra de navegação.

Ao contrário das .navbar-fixed-*classes, você não precisa alterar nenhum preenchimento no arquivo body.

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

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

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

Migalhas de pão

Indique a localização da página atual dentro de uma hierarquia de navegação.

Os separadores são adicionados automaticamente no CSS por meio de :beforee content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paginação

Forneça links de paginação para seu site ou aplicativo com o componente de paginação de várias páginas ou a alternativa de paginação mais simples .

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.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Rotulando o componente de paginação

O componente de paginação deve ser encapsulado em um <nav>elemento para identificá-lo como uma seção de navegação para leitores de tela e outras tecnologias assistivas. Além disso, como é provável que uma página já tenha mais de uma seção de navegação (como a navegação principal no cabeçalho ou uma navegação na barra lateral), é aconselhável fornecer um descritivo aria-labelque <nav>reflita sua finalidade. Por exemplo, se o componente de paginação for usado para navegar entre um conjunto de resultados de pesquisa, um rótulo apropriado poderá ser aria-label="Search results pages".

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.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Recomendamos que você troque as âncoras ativas ou desabilitadas por <span>, ou omita a âncora no caso das setas anterior/seguinte, para remover a funcionalidade de clique enquanto retém os estilos pretendidos.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Dimensionamento

Gosta de paginação maior ou menor? Adicione .pagination-lgou .pagination-smpara tamanhos adicionais.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Links alinhados

Alternativamente, você pode alinhar cada link aos lados:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Estado desativado opcional

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Exemplo

Exemplo de título Novo

<h3>Example heading <span class="label label-default">New</span></h3>

Variações disponíveis

Adicione qualquer uma das classes modificadoras mencionadas abaixo para alterar a aparência de um rótulo.

Aviso de informações de sucesso primárias padrão Perigo

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Tem toneladas de rótulos?

Problemas de renderização podem surgir quando você tem dezenas de rótulos embutidos em um contêiner estreito, cada um contendo seu próprio inline-blockelemento (como um ícone). A maneira de contornar isso é definir display: inline-block;. Para contexto e um exemplo, consulte #13219 .

Realce facilmente itens novos ou não lidos adicionando um <span class="badge">a links, navs Bootstrap e muito mais.

Caixa de entrada42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Autocolapso

Quando não houver itens novos ou não lidos, os emblemas simplesmente serão recolhidos (através do :emptyseletor de CSS), desde que não haja conteúdo dentro deles.

Compatibilidade entre navegadores

Os emblemas não serão recolhidos automaticamente no Internet Explorer 8 porque não há suporte para o :emptyseletor.

Adapta-se aos estados de navegação ativos

Estilos integrados estão incluídos para colocar crachás em estados ativos em navegações de pílulas.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Um componente leve e flexível que pode, opcionalmente, estender toda a janela de visualização para exibir o conteúdo principal do seu site.

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="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Para tornar o jumbotron de largura total e sem cantos arredondados, coloque-o fora de todos os .containers e, em vez disso, adicione um .containerdentro.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Um shell simples para h1espaçar e segmentar adequadamente seções de conteúdo em uma página. Ele pode utilizar o elemento h1padrão do 's small, assim como a maioria dos outros componentes (com estilos adicionais).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Estenda o sistema de grade do Bootstrap com o componente de miniatura para exibir facilmente grades de imagens, vídeos, texto e muito mais.

Se você estiver procurando por uma apresentação semelhante ao Pinterest de miniaturas de alturas e/ou larguras variadas, precisará usar um plug-in de terceiros, como Masonry , Isotope ou Salvattore .

Exemplo padrão

Por padrão, as miniaturas do Bootstrap são projetadas para mostrar imagens vinculadas com marcação mínima necessária.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Conteúdo personalizado

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.

Botão Botã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.

Botão Botã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.

Botão Botão

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Forneça mensagens de feedback contextuais para ações típicas do usuário com um punhado de mensagens de alerta flexíveis e disponíveis.

Exemplos

Envolva qualquer texto e um botão de dispensa opcional em .alertuma das quatro classes contextuais (por exemplo, .alert-success) para mensagens básicas de alerta.

Nenhuma classe padrão

Os alertas não possuem classes padrão, apenas classes base e modificadoras. Um alerta cinza padrão não faz muito sentido, então você precisa especificar um tipo por meio de uma classe contextual. Escolha entre sucesso, informação, aviso ou perigo.

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

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

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

Oh sôfrego! Altere algumas coisas e tente enviar novamente.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Alertas descartáveis

Crie em qualquer alerta adicionando um .alert-dismissiblebotão opcional e fechar.

Requer plug-in de alerta JavaScript

Para alertas descartáveis e totalmente funcionais, você deve usar o plug-in JavaScript de alertas .

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Garanta o comportamento adequado em todos os dispositivos

Certifique-se de usar o <button>elemento com o data-dismiss="alert"atributo data.

Links em alertas

Use a .alert-linkclasse de utilitário para fornecer rapidamente links coloridos correspondentes em qualquer alerta.

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

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

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

Oh sôfrego! Altere algumas coisas e tente enviar novamente.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Forneça feedback atualizado sobre o andamento de um fluxo de trabalho ou ação com barras de progresso simples e flexíveis.

Compatibilidade entre navegadores

As barras de progresso usam transições e animações CSS3 para obter alguns de seus efeitos. Esses recursos não são compatíveis com o Internet Explorer 9 e versões anteriores ou anteriores do Firefox. O Opera 12 não suporta animações.

Compatibilidade com a Política de Segurança de Conteúdo (CSP)

Se o seu site tiver uma Política de segurança de conteúdo (CSP) que não permite style-src 'unsafe-inline', você não poderá usar styleatributos embutidos para definir as larguras da barra de progresso, conforme mostrado em nossos exemplos abaixo. Métodos alternativos para definir as larguras que são compatíveis com CSPs estritos incluem o uso de um pouco de JavaScript personalizado (que define element.style.width) ou o uso de classes CSS personalizadas.

Exemplo básico

Barra de progresso padrão.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Com etiqueta

Remova a classe <span>com .sr-onlyda barra de progresso para mostrar uma porcentagem visível.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Para garantir que o texto do rótulo permaneça legível mesmo para porcentagens baixas, considere adicionar um min-widthà barra de progresso.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Alternativas contextuais

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Listrado

Usa um gradiente para criar um efeito listrado. Não disponível no IE9 e abaixo.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animado

Adicione .activea .progress-bar-stripedpara animar as listras da direita para a esquerda. Não disponível no IE9 e abaixo.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Empilhado

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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.

Mídia padrão

A mídia padrão exibe 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

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 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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em faucibus.

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

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

As classes .pull-lefte .pull-righttambém existem e foram usadas anteriormente como parte do componente de mídia, mas estão obsoletas para esse uso a partir da v3.3.0. Eles são aproximadamente equivalentes a .media-lefte .media-right, exceto que .media-rightdevem ser colocados após o .media-bodyno html.

Alinhamento de mídia

As imagens ou outras mídias podem ser alinhadas na parte superior, central ou inferior. O padrão é o alinhamento superior.

Mídia alinhada no topo

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Mídia alinhada ao meio

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Mídia alinhada por baixo

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Os grupos de listas são um componente flexível e poderoso para exibir não apenas listas simples de elementos, mas também listas complexas com conteúdo personalizado.

Exemplo básico

O grupo de lista mais básico é simplesmente uma lista não ordenada com itens de lista e as classes apropriadas. Construa sobre ele com as opções a seguir, ou seu próprio CSS, conforme necessário.

Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Distintivos

Adicione o componente de emblemas a qualquer item do grupo de lista e ele será posicionado automaticamente à direita.

14Cras justo odio
2Dapibus ac facilisis em
1Morbi Leo Risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Itens vinculados

Vincule itens de grupo de lista usando tags âncora em vez de itens de lista (isso também significa um pai <div>em vez de um <ul>). Não há necessidade de pais individuais em torno de cada elemento.

Cras justo odio Dapibus ac facilisis em Morbi Leo Risus Porta ac consectetur ac Vestíbulo em eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Itens de botão

Os itens do grupo de lista podem ser botões em vez de itens de lista (isso também significa um pai <div>em vez de um <ul>). Não há necessidade de pais individuais em torno de cada elemento. Não use as .btnclasses padrão aqui.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Itens desativados

Adicione .disableda um .list-group-itempara torná-lo cinza para parecer desabilitado.

Cras justo odio Dapibus ac facilisis em Morbi Leo Risus Porta ac consectetur ac Vestíbulo em eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Classes contextuais

Use classes contextuais para estilizar itens de lista, padrão ou vinculados. Também inclui .activeestado.

Dapibus ac facilisis em
Cras sit amet nibh libero
Porta ac consectetur ac
Vestíbulo em eros

Dapibus ac facilisis em Cras sit amet nibh libero Porta ac consectetur ac Vestíbulo em eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Conteúdo personalizado

Adicione praticamente qualquer HTML dentro, mesmo para grupos de listas vinculadas como o abaixo.

Listar cabeçalho do item do grupo

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Listar cabeçalho do item do grupo

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Listar cabeçalho do item do grupo

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Embora nem sempre seja necessário, às vezes você precisa colocar seu DOM em uma caixa. Para essas situações, experimente o componente de painel.

Exemplo básico

Por padrão, tudo o .panelque faz é aplicar alguma borda e preenchimento básicos para conter algum conteúdo.

Exemplo de painel básico

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Painel com título

Adicione facilmente um contêiner de título ao seu painel com o .panel-heading. Você também pode incluir qualquer <h1>- <h6>com uma .panel-titleclasse para adicionar um título pré-estilizado. No entanto, os tamanhos de fonte de <h1>- <h6>são substituídos por .panel-heading.

Para colorir corretamente os links, certifique-se de colocar os links nos títulos dentro de .panel-title.

Título do painel sem título

Conteúdo do painel

Título do painel

Conteúdo do painel

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Painel com rodapé

Enrole botões ou texto secundário em .panel-footer. Observe que os rodapés do painel não herdam cores e bordas ao usar variações contextuais, pois não devem estar em primeiro plano.

Conteúdo do painel

Rodapé do painel

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternativas contextuais

Assim como outros componentes, torne facilmente um painel mais significativo para um contexto específico adicionando qualquer uma das classes de estado contextual.

Título do painel

Conteúdo do painel

Título do painel

Conteúdo do painel

Título do painel

Conteúdo do painel

Título do painel

Conteúdo do painel

Título do painel

Conteúdo do painel

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Com mesas

Adicione qualquer sem borda .tabledentro de um painel para um design perfeito. Se houver um .panel-body, adicionamos uma borda extra ao topo da tabela para separação.

Título do painel

Algum conteúdo do painel padrão aqui. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Se não houver corpo do painel, o componente se move do cabeçalho do painel para a mesa sem interrupção.

Título do painel

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Com grupos de lista

Inclua facilmente grupos de listas de largura total em qualquer painel.

Título do painel

Algum conteúdo do painel padrão aqui. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Permita que os navegadores determinem as dimensões do vídeo ou da apresentação de slides com base na largura do bloco que o contém, criando uma proporção intrínseca que será dimensionada adequadamente em qualquer dispositivo.

As regras são aplicadas diretamente aos elementos <iframe>, <embed>, <video>e <object>; opcionalmente, use uma classe descendente explícita .embed-responsive-itemquando quiser combinar o estilo de outros atributos.

Dica profissional! Você não precisa incluir frameborder="0"em seus <iframe>s, pois substituímos isso para você.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Padrão bem

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="well">...</div>

Aulas opcionais

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

Olha, eu estou em um grande poço!

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

Olha, eu estou em um pequeno poço!

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

Componentes

Glyphicons

Glifos disponíveis

Como usar

Não misture com outros componentes

Apenas para uso em elementos vazios

Alterando a localização da fonte do ícone

Ícones acessíveis

Exemplos

Listas suspensas

Exemplo

Alinhamento

Pode exigir posicionamento adicional

.pull-rightAlinhamento obsoleto

Cabeçalhos

Divisor

Itens de menu desativados

Grupos de botões

Dicas de ferramentas e popovers em grupos de botões requerem configuração especial

Certifique-se de que está correto rolee forneça uma etiqueta

Exemplo básico

Barra de ferramentas do botão

Dimensionamento

Aninhamento

Variação vertical

Grupos de botões justificados

Manipulando bordas

IE8 e fronteiras

Com <a>elementos

Links que funcionam como botões

Com <button>elementos

Menus suspensos de botões

Dependência de plug-in

Menus suspensos de botão único

Menus suspensos de botão dividido

Dimensionamento

Variação de dropup

Grupos de entrada

<input>Apenas textuais

Dicas de ferramentas e popovers em grupos de entrada requerem configuração especial

Não misture com outros componentes

Sempre adicione marcadores

Exemplo básico

Dimensionamento

Caixas de seleção e complementos de rádio

Complementos de botão

Botões com dropdowns

Botões segmentados

Vários botões

Navegadores

O uso de navs para painéis de guias requer o plug-in de guias JavaScript

Torne os navs usados ​​como navegação acessíveis

Abas

Comprimidos

Justificado

Safari e navegação justificada responsiva

Links desativados

A funcionalidade do link não foi afetada

Usando listas suspensas

Abas com menus suspensos

Comprimidos com dropdowns

Barra de navegação

Barra de navegação padrão

Conteúdo transbordando

Requer plug-in JavaScript

Alterando o ponto de interrupção da barra de navegação móvel recolhido

Torne as barras de navegação acessíveis

Imagem de marca

Formulários

Advertências para dispositivos móveis

Sempre adicione marcadores

Botões

Uso específico do contexto

Texto

Links não-nav

Alinhamento de componentes

Alinhando vários componentes à direita

Fixo para cima

Acolchoamento corporal necessário

Fixo para baixo

`.pull-right`Alinhamento obsoleto

Certifique-se de que está correto `role`e forneça uma etiqueta

Com `<a>`elementos

Com `<button>`elementos

`<input>`Apenas textuais

Torne os navs usados como navegação acessíveis