Componentes
Mais de uma dúzia de componentes reutilizáveis criados para fornecer iconografia, listas suspensas, grupos de entrada, navegação, alertas e muito mais.
Mais de uma dúzia de componentes reutilizáveis criados para fornecer iconografia, listas suspensas, grupos de entrada, navegação, alertas e muito mais.
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.
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.
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>
.
As classes de ícones só devem ser usadas em elementos que não contenham conteúdo de texto e não tenham elementos filhos.
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:
@icon-font-path
e/ou @icon-font-name
nos arquivos Less de origem.url()
caminhos no CSS compilado.Use qualquer opção que melhor se adapte à sua configuração de desenvolvimento específica.
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-only
classe.
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-label
atributo no próprio controle.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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-only
texto 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>
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 .dropup
ao 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-right
a .dropdown-menu
para alinhar à direita o menu suspenso.
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 overflow
propriedades ou aparecer fora dos limites da janela de visualização. Aborde esses problemas por conta própria à medida que eles surgirem.
.pull-right
Alinhamento obsoletoA partir da v3.1.0, deixamos de usar os .pull-right
menus 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 .disabled
a 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 .
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).
role
e forneça uma etiquetaPara que tecnologias assistivas – como leitores de tela – transmitam que uma série de botões está agrupada, um role
atributo 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 role
atributo correto. Nos exemplos fornecidos aqui, usamos aria-label
, mas alternativas como aria-labelledby
também podem ser usadas.
Enrole uma série de botões .btn
com .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>
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>
Coloque um .btn-group
dentro de outro .btn-group
quando 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>
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>
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.
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, margin
não funciona com display: table-cell
. Como resultado, dependendo de suas personalizações no Bootstrap, você pode remover ou recolorir as bordas.
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.
<a>
elementosBasta envolver uma série de .btn
s em .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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"
.
<button>
elementosPara 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-group
e fornecendo a marcação de menu adequada.
Os botões suspensos exigem que o plug -in suspenso seja incluído em sua versão do Bootstrap.
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>
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>
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>
Acione menus suspensos acima dos elementos adicionando .dropup
ao 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-group
com um .input-group-addon
ou .input-group-btn
para preceder ou anexar elementos a um único arquivo .form-control
.
<input>
Apenas textuaisEvite usar <select>
elementos aqui, pois eles não podem ser totalmente estilizados em navegadores WebKit.
Evite usar <textarea>
elementos aqui, pois seu rows
atributo não será respeitado em alguns casos.
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 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.
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-only
classe ou uso do atributo aria-label
, aria-labelledby
, ou atributo) aria-describedby
e 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.title
placeholder
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-addon
ou .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>
Adicione as classes de dimensionamento de formulário relativo ao .input-group
pró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>
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 -->
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-btn
para 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 -->
<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 -->
<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>
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 .nav
classe base, bem como estados compartilhados. Troque as classes modificadoras para alternar entre cada estilo.
Observe que a .nav-tabs
classe requer a .nav
classe 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.
<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 .disabled
sem efeitos de foco .
<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 .
<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>
<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.
<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-brand
tem 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-form
para 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-form
compartilha grande parte de seu código .form-inline
via 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>
Adicione a .navbar-btn
classe 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-link
classe 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-left
ou . .navbar-right
Ambas 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-left
e .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-top
e inclua um .container
ou .container-fluid
para centralizar e preencher o conteúdo da barra de navegação.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Adicione .navbar-fixed-bottom
e inclua um .container
ou .container-fluid
para centralizar e preencher o conteúdo da barra de navegação.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Crie uma barra de navegação de largura total que rola com a página adicionando .navbar-static-top
e incluindo um .container
ou .container-fluid
para 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>
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 :before
e content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
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 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">«</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">»</span>
</a>
</li>
</ul>
</nav>
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-label
que <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"
.
Os links são personalizáveis para diferentes circunstâncias. Use .disabled
para links não clicáveis e .active
para indicar a página atual.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Gosta de paginação maior ou menor? Adicione .pagination-lg
ou .pagination-sm
para 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>
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.
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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Os links do pager também usam a .disabled
classe de utilitário geral da paginação.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Adicione qualquer uma das classes modificadoras mencionadas abaixo para alterar a aparência de um rótulo.
<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>
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-block
elemento (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.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Quando não houver itens novos ou não lidos, os emblemas simplesmente serão recolhidos (através do :empty
seletor de CSS), desde que não haja conteúdo dentro deles.
Os emblemas não serão recolhidos automaticamente no Internet Explorer 8 porque não há suporte para o :empty
seletor.
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.
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.
<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 .container
s e, em vez disso, adicione um .container
dentro.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Um shell simples para h1
espaçar e segmentar adequadamente seções de conteúdo em uma página. Ele pode utilizar o elemento h1
padrã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 .
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>
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.
<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.
Envolva qualquer texto e um botão de dispensa opcional em .alert
uma das quatro classes contextuais (por exemplo, .alert-success
) para mensagens básicas de alerta.
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>
Crie em qualquer alerta adicionando um .alert-dismissible
botão opcional e fechar.
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">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Certifique-se de usar o <button>
elemento com o data-dismiss="alert"
atributo data.
Use a .alert-link
classe 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>
Forneça feedback atualizado sobre o andamento de um fluxo de trabalho ou ação com barras de progresso simples e flexíveis.
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.
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 style
atributos 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.
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>
Remova a classe <span>
com .sr-only
da barra de progresso para mostrar uma porcentagem visível.
<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.
<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>
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>
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>
Adicione .active
a .progress-bar-striped
para 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>
Coloque várias barras no mesmo .progress
para 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.
A mídia padrão exibe um objeto de mídia (imagens, vídeo, áudio) à esquerda ou à direita de um bloco de conteúdo.
<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-left
e .pull-right
també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-left
e .media-right
, exceto que .media-right
devem ser colocados após o .media-body
no html.
As imagens ou outras mídias podem ser alinhadas na parte superior, central ou inferior. O padrão é o alinhamento superior.
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.
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.
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>
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).
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.
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.
<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>
Adicione o componente de emblemas a qualquer item do grupo de lista e ele será posicionado automaticamente à direita.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
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>
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 .btn
classes 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>
Adicione .disabled
a um .list-group-item
para 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>
Use classes contextuais para estilizar itens de lista, padrão ou vinculados. Também inclui .active
estado.
<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>
Adicione praticamente qualquer HTML dentro, mesmo para grupos de listas vinculadas como o abaixo.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
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.
Por padrão, tudo o .panel
que faz é aplicar alguma borda e preenchimento básicos para conter algum conteúdo.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
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-title
classe 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
.
<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.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Assim como outros componentes, torne facilmente um painel mais significativo para um contexto específico adicionando qualquer uma das classes de estado contextual.
<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>
Adicione qualquer sem borda .table
dentro de um painel para um design perfeito. Se houver um .panel-body
, adicionamos uma borda extra ao topo da tabela para separação.
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 |
<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.
# | Primeiro nome | Sobrenome | Nome de usuário |
---|---|---|---|
1 | Marca | Otto | @mdo |
2 | Jacó | Thornton | @gordo |
3 | Larry | o pássaro |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Inclua facilmente grupos de listas de largura total em qualquer 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.
<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-item
quando 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>
Use o poço como um efeito simples em um elemento para dar a ele um efeito de inserção.
<div class="well">...</div>
Controle de preenchimento e cantos arredondados com duas classes de modificadores opcionais.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>