Dezenas de componentes reutilizáveis criados para fornecer navegação, alertas, popovers e muito mais.
Menu contextual alternável para exibir listas de links. Feito interativo com o plugin javascript suspenso .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Ação </a></li>
- <li><a tabindex = "-1" href = "#" > Outra ação </a></li>
- <li><a tabindex = "-1" href = "#" > Outra coisa aqui </a></li>
- <li class = "divisor" ></li>
- <li><a tabindex = "-1" href = "#" > Link separado </a></li>
- </ul>
Olhando apenas para o menu suspenso, aqui está o HTML necessário. Você precisa envolver o gatilho do menu suspenso e o menu suspenso dentro de .dropdown
, ou outro elemento que declare position: relative;
. Depois é só criar o cardápio.
- <div class = "dropdown" >
- <!-- Link ou botão para alternar a lista suspensa -->
- <ul class = "menu suspenso" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Ação </a></li>
- <li><a tabindex = "-1" href = "#" > Outra ação </a></li>
- <li><a tabindex = "-1" href = "#" > Outra coisa aqui </a></li>
- <li class = "divisor" ></li>
- <li><a tabindex = "-1" href = "#" > Link separado </a></li>
- </ul>
- </div>
Alinhe os menus à direita e adicione níveis adicionais de menus suspensos.
Adicionar .pull-right
a .dropdown-menu
para alinhar à direita o menu suspenso.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Adicione um nível extra de menus suspensos, aparecendo ao passar o mouse como os do OS X, com algumas adições de marcação simples. Adicione .dropdown-submenu
a qualquer li
um em um menu suspenso existente para estilo automático.
- <ul class = "menu suspenso" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "submenu suspenso" >
- <a tabindex = "-1" href = "#" > Mais opções </a>
- <ul class = "menu suspenso" >
- ...
- </ul>
- </li>
- </ul>
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.
- <div class = "paginação" >
- <ul>
- <li><a href = "#" > Anterior </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 = "#" > Próximo </a></li>
- </ul>
- </div>
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.
- <div class = "paginação" >
- <ul>
- <li class = "desativado" ><a href = "#" > Anterior </a></li>
- <li class = "ativo" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Você pode, opcionalmente, trocar âncoras ativas ou desativadas por extensões para remover a funcionalidade de clique enquanto mantém os estilos pretendidos.
- <div class = "paginação" >
- <ul>
- <li class = "desativado" ><span> Anterior </span></li>
- <li class = "ativo" ><span> 1 </span></li>
- ...
- </ul>
- </div>
Adicione uma das duas classes opcionais para alterar o alinhamento dos links de paginação: .pagination-centered
e .pagination-right
.
- <div class = "paginação centrada na paginação" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
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.
- <ul class = "pager" >
- <li><a href = "#" > Anterior </a></li>
- <li><a href = "#" > Próximo </a></li>
- </ul>
Alternativamente, você pode alinhar cada link aos lados:
- <ul class = "pager" >
- <li classe = "anterior" >
- <a href = "#" > ← Mais antigo </a>
- </li>
- <li classe = "próximo" >
- <a href = "#" > Mais recente → </a>
- </li>
- </ul>
Os links do pager também usam a .disabled
classe de utilitário geral da paginação.
- <ul class = "pager" >
- <li class = "anteriormente desativado" >
- <a href = "#" > ← Mais antigo </a>
- </li>
- ...
- </ul>
Rótulos | Marcação |
---|---|
Predefinição | <span class="label">Default</span> |
Sucesso | <span class="label label-success">Success</span> |
Aviso | <span class="label label-warning">Warning</span> |
Importante | <span class="label label-important">Important</span> |
Informações | <span class="label label-info">Info</span> |
Inverso | <span class="label label-inverse">Inverse</span> |
Nome | Exemplo | Marcação |
---|---|---|
Predefinição | 1 | <span class="badge">1</span> |
Sucesso | 2 | <span class="badge badge-success">2</span> |
Aviso | 4 | <span class="badge badge-warning">4</span> |
Importante | 6 | <span class="badge badge-important">6</span> |
Informações | 8 | <span class="badge badge-info">8</span> |
Inverso | 10 | <span class="badge badge-inverse">10</span> |
Um componente leve e flexível para mostrar o conteúdo principal do seu site. Funciona bem em sites de marketing e de conteúdo pesado.
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 = "unidade-herói" >
- <h1> Cabeçalho </h1>
- <p> Slogan </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Saber mais
- </a>
- </p>
- </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
default do small
, bem como a maioria dos outros componentes (com estilos adicionais).
- <div class = "page-header" >
- <h1> Exemplo de cabeçalho de página <small> Subtexto para cabeçalho </small></h1>
- </div>
Por padrão, as miniaturas do Bootstrap são projetadas para mostrar imagens vinculadas com marcação mínima necessária.
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.
As miniaturas (anteriormente .media-grid
até a v1.4) são ótimas para grades de fotos ou vídeos, resultados de pesquisa de imagens, produtos de varejo, portfólios e muito mais. Eles podem ser links ou conteúdo estático.
A marcação de miniaturas é simples - um ul
com qualquer número de li
elementos é tudo o que é necessário. Também é super flexível, permitindo qualquer tipo de conteúdo com um pouco mais de marcação para envolver seu conteúdo.
Por fim, o componente de miniaturas usa classes de sistema de grade existentes - como .span2
ou .span3
- para controle de dimensões de miniaturas.
Como mencionado anteriormente, a marcação necessária para miniaturas é leve e direta. Veja a configuração padrão para imagens vinculadas :
- <ul class = "miniaturas" >
- <li class = "span4" >
- <a href = "#" class = "miniatura" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
Para conteúdo HTML personalizado em miniaturas, a marcação muda um pouco. Para permitir conteúdo de nível de bloco em qualquer lugar, trocamos o <a>
por um <div>
assim:
- <ul class = "miniaturas" >
- <li class = "span4" >
- <div class = "miniatura" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Rótulo da miniatura </h3>
- <p> Legenda da miniatura... </p>
- </div>
- </li>
- ...
- </ul>
Explore todas as suas opções com as várias classes de grade disponíveis para você. Você também pode misturar e combinar tamanhos diferentes.
Enrole qualquer texto e um botão de dispensa opcional .alert
para uma mensagem de alerta de aviso básico.
- <div class = "alerta" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Aviso! </strong> Melhor verificar você mesmo, você não está parecendo muito bem.
- </div>
Os navegadores Mobile Safari e Mobile Opera, além do data-dismiss="alert"
atributo, exigem um href="#"
para dispensa de alertas ao usar uma <a>
tag.
- <a href = "#" class = "fechar" data-dismiss = "alerta" > × </a>
Alternativamente, você pode usar um <button>
elemento com o atributo data, o que optamos por fazer para nossos documentos. Ao usar <button>
, você deve incluir type="button"
ou seus formulários não podem ser enviados.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Use o plugin jQuery de alertas para dispensar alertas de forma rápida e fácil.
Para mensagens mais longas, aumente o preenchimento na parte superior e inferior do wrapper de alerta adicionando .alert-block
.
Melhor verificar você mesmo, você não está parecendo muito bem. Nulla vitae elit libero, a pharetra augue. Praesent comodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Aviso! </h4>
- Melhor verificar você mesmo, você não é...
- </div>
Adicione classes opcionais para alterar a conotação de um alerta.
- <div class = "alerta alerta-erro" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Barra de progresso padrão com um gradiente vertical.
- <div class = "progresso" >
- <div class = "bar" style = " largura : 60 %; " ></div>
- </div>
Usa um gradiente para criar um efeito listrado. Não disponível no IE7-8.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " largura : 20 %; " ></div>
- </div>
Adicione .active
a .progress-striped
para animar as listras da direita para a esquerda. Não disponível em todas as versões do IE.
- <div class = "progress progress-striped active" >
- <div class = "bar" style = " largura : 40 %; " ></div>
- </div>
Coloque várias barras no mesmo .progress
para empilhá-las.
- <div class = "progresso" >
- <div class = "bar bar-success" style = " largura : 35 %; " ></div>
- <div class = "bar bar-warning" style = " largura : 20 %; " ></div>
- <div class = "bar bar-danger" style = " largura : 10 %; " ></div>
- </div>
As barras de progresso usam algumas das mesmas classes de botão e alerta para estilos consistentes.
- <div class = "progress progress-info" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progresso progresso-sucesso" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-perigo" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Semelhante às cores sólidas, temos variadas barras de progresso listradas.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress progress-sucesso progress-striped" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-danger progress-striped" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
As barras de progresso usam gradientes, transições e animações CSS3 para obter todos os seus efeitos. Esses recursos não são compatíveis com o IE7-9 ou versões anteriores do Firefox.
As versões anteriores ao Internet Explorer 10 e Opera 12 não suportam animações.
Use o poço como um efeito simples em um elemento para dar a ele um efeito de inserção.
- <div class = "bem" >
- ...
- </div>
Controle de preenchimento e cantos arredondados com duas classes de modificadores opcionais.
- <div class = "bem bem grande" >
- ...
- </div>
- <div class = "bem bem-pequeno" >
- ...
- </div>
Use o ícone de fechamento genérico para dispensar conteúdo como modais e alertas.
- <button class = "fechar" > × </button>
Dispositivos iOS requerem um href="#" para eventos de clique se você preferir usar uma âncora.
- <a class = "close" href = "#" > × </a>
Aulas simples e focadas para pequenos ajustes de exibição ou comportamento.
Flutuar um elemento para a esquerda
- class = "puxar para a esquerda"
- . puxar - esquerda {
- flutuar : esquerda ;
- }
Flutuar um elemento à direita
- class = "puxar para a direita"
- . puxar - direito {
- flutuar : direita ;
- }
Alterar a cor de um elemento para#999
- classe = "silenciado"
- . silenciado {
- cor : #999;
- }
Limpe o float
em qualquer elemento
- class = "clearfix"
- . correção clara {
- * zoom : 1 ;
- &: antes ,
- &: depois de {
- exibição : mesa ;
- conteúdo : "" ;
- }
- &: depois de {
- claro : ambos ;
- }
- }