Glyphicons

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-path​​e/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.

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

Listas suspensas

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

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>

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.

Pode exigir posicionamento adicional

As listas suspensas são posicionadas automaticamente via CSS dentro do fluxo normal do documento. Isso significa que as listas suspensas podem ser cortadas pelos pais com determinadas overflowpropriedades ou aparecer fora dos limites da janela de visualização. Aborde esses problemas por conta própria à medida que eles surgirem.

.pull-rightAlinhamento obsoleto

A partir da v3.1.0, deixamos de usar os .pull-rightmenus suspensos. Para alinhar um menu à direita, use .dropdown-menu-right. Os componentes de navegação alinhados à direita na barra de navegação usam uma versão mixin dessa classe para alinhar automaticamente o menu. Para substituí-lo, use .dropdown-menu-left.

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

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>

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>

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>

Grupos de botões

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

Barra de ferramentas do botão

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.

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

Menus suspensos de botões

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

Grupos de entrada

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.

@

@example.com

$ 0,00

https://example.com/users/
<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>

Navegadores

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.

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>

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>

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>

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>

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>

Barra de navegação

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:

  1. Reduza a quantidade ou largura dos itens da barra de navegação.
  2. Oculte certos itens da barra de navegação em determinados tamanhos de tela usando classes de utilitários responsivos .
  3. 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.

Requer plug-in JavaScript

Se o JavaScript estiver desabilitado e a janela de visualização for estreita o suficiente para que a barra de navegação seja recolhida, será impossível expandir a barra de navegação e visualizar o conteúdo dentro do arquivo .navbar-collapse.

A barra de navegação responsiva requer que o plugin de recolhimento seja incluído em sua versão do Bootstrap.

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

Torne as barras de navegação acessíveis

Certifique-se de usar um <nav>elemento ou, se estiver usando um elemento mais genérico, como um <div>, adicione um role="navigation"a cada barra de navegação para identificá-lo explicitamente como uma região de referência para usuários de tecnologias assistivas.

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

Advertências para dispositivos móveis

Existem algumas ressalvas em relação ao uso de controles de formulário em elementos fixos em dispositivos móveis. Consulte nossos documentos de suporte do navegador para obter detalhes.

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>

Uso específico do contexto

Como as classes de botão padrão , .navbar-btnpode ser usado em elementos <a>e <input>. No entanto, .navbar-btnnem as classes de botão padrão devem ser usadas em <a>elementos dentro de .navbar-nav.

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.

Alinhando vários componentes à direita

Atualmente, as barras de navegação têm uma limitação com várias .navbar-rightclasses. Para espaçar o conteúdo adequadamente, usamos margem negativa no último .navbar-rightelemento. Quando há vários elementos usando essa classe, essas margens não funcionam conforme o esperado.

Revisitaremos isso quando pudermos reescrever esse componente na v4.

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

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>

Rótulos

Exemplo

Exemplo de título Novo

Exemplo de título Novo

Exemplo de título Novo

Exemplo de título Novo

Exemplo de título Novo
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 .

Distintivos

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>

Jumbotron

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>

Cabeçalho da página

Um shell simples para h1espaçar e segmentar adequadamente seções de conteúdo em uma página. Ele pode utilizar o elemento 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>

Miniaturas

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.

100% x 200

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

100% x 200

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

100% x 200

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>

Alertas

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.

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

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

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

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

Barras de progresso

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.

60% concluído
<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.

40% Concluído (sucesso)
20% concluído
60% concluído (aviso)
80% Completo (perigo)
<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.

40% Concluído (sucesso)
20% concluído
60% concluído (aviso)
80% Completo (perigo)
<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.

45% concluído
<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.

35% Concluído (sucesso)
20% Concluído (aviso)
10% Completo (perigo)
<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>

Objeto de mídia

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>

Listar grupo

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.

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

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

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

Painéis

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>

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

Incorporação responsiva

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>

Poços

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>