Dezenas de componentes reutilizáveis são integrados ao Bootstrap para fornecer navegação, alertas, popovers e muito mais.
Paginação ultra simplista e com estilo minimalista 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.
Os links são personalizáveis e funcionam em várias circunstâncias com a classe certa. .disabled
para links não clicáveis e .active
para a página atual.
Adicione uma das duas classes opcionais para alterar o alinhamento dos links de paginação: .pagination-centered
e .pagination-right
.
O componente de paginação padrão é flexível e funciona em várias variações.
Envolto em um <div>
, a paginação é apenas um <ul>
.
- <div class = "paginação" >
- <ul>
- <li><a href = "#" > Anterior </a></li>
- <li class = "ativo" >
- <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>
O componente pager é um conjunto de links para implementações de paginação simples com marcação leve e estilos ainda mais 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>
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> |
O Bootstrap fornece um componente leve e flexível chamado unidade hero para exibir conteúdo em seu site. Funciona bem em sites de marketing e de conteúdo pesado.
Enrole seu conteúdo em um div
gosto assim:
- <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>
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.
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-haeder" >
- <h1> Exemplo de cabeçalho de página </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 = "span3" >
- <a href = "#" class = "miniatura" >
- <img src = "https://placehold.it/260x180" 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 = "span3" >
- <div class = "miniatura" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Rótulo da miniatura </h5>
- <p> Legenda da miniatura aqui... </p>
- </div>
- </li>
- ...
- </ul>
Com o Bootstrap 2, simplificamos a classe base: .alert
em vez de .alert-message
. Também reduzimos a marcação mínima necessária - não <p>
é necessário por padrão, apenas o <div>
.
Para um componente mais durável com menos código, removemos a aparência diferenciada de alertas de bloco, mensagens que vêm com mais preenchimento e normalmente mais texto. A classe também mudou para .alert-block
.
O Bootstrap vem com um ótimo plugin jQuery que suporta mensagens de alerta, tornando o descarte rápido e fácil.
Enrole sua mensagem e um ícone de fechamento opcional em um div com classe simples.
- <div class = "alerta" >
- <a class = "fechar" data-dismiss = "alerta" > × </a>
- <strong> Aviso! </strong> Melhor verificar você mesmo, você não está parecendo muito bem.
- </div>
Estenda facilmente a mensagem de alerta padrão com duas classes opcionais: .alert-block
para mais controles de preenchimento e texto e .alert-heading
para um título correspondente.
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" >
- <a class = "fechar" data-dismiss = "alerta" > × </a>
- <h4 class = "alert-heading" > Atenção! </h4>
- Melhor verificar você mesmo, você não é...
- </div>
- <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 = "barra"
- estilo = " largura : 60 %; " ></div>
- </div>
Usa um gradiente para criar um efeito listrado.
- <div class = "progress progress-info
- listrado de progresso" >
- <div class = "barra"
- estilo = " largura : 20 %; " ></div>
- </div>
Pega o exemplo listrado e o anima.
- <div class = "progresso-perigo-progresso
- ativo com faixa de progresso" >
- <div class = "barra"
- estilo = " largura : 40 %; " ></div>
- </div>
As barras de progresso utilizam alguns dos mesmos nomes de classe dos botões e alertas para estilos semelhantes.
.progress-info
.progress-success
.progress-danger
Alternativamente, você pode personalizar os arquivos LESS e rolar suas próprias cores e tamanhos.
As barras de progresso usam transições CSS3, portanto, se você ajustar dinamicamente a largura via javascript, ela será redimensionada suavemente.
Se você usar a .active
classe, suas .progress-striped
barras de progresso animarão as listras da esquerda para a direita.
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-8 ou versões anteriores do Firefox.
O Opera não suporta animações neste momento.
Use o poço como um efeito simples em um elemento para dar a ele um efeito de inserção.
- <div class = "bem" >
- ...
- </div>
Use o ícone de fechamento genérico para dispensar conteúdo como modais e alertas.
- <a class = "fechar" > × </a>