Além do scaffolding, os elementos HTML básicos são estilizados e aprimorados com classes extensíveis para fornecer uma aparência nova e consistente.
Toda a grade tipográfica é baseada em duas variáveis Less em nosso arquivo variables.less: @baseFontSize
e @baseLineHeight
. O primeiro é o tamanho da fonte base usado e o segundo é a altura da linha base.
Usamos essas variáveis e um pouco de matemática para criar as margens, preenchimentos e alturas de linha de todos os nossos tipos e muito mais.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
Elemento | Uso | Opcional |
---|---|---|
<strong> |
Para enfatizar um trecho de texto com | Nenhum |
<em> |
Para enfatizar um trecho de texto com estresse | Nenhum |
<abbr> |
Envolve abreviações e acrônimos para mostrar a versão expandida ao passar o mouse | Incluir opcional title para texto expandido |
<address> |
Para obter informações de contato de seu ancestral mais próximo ou de todo o trabalho | Preserve a formatação terminando todas as linhas com<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Nota: Sinta-se à vontade para usar <b>
e <i>
em HTML5, mas seu uso mudou um pouco. <b>
destina-se a destacar palavras ou frases sem transmitir importância adicional, enquanto <i>
é principalmente para voz, termos técnicos, etc.
Aqui estão dois exemplos de como a <address>
tag pode ser usada:
As abreviações são estilizadas com texto em maiúsculas e uma borda inferior pontilhada clara. Eles também têm um cursor de ajuda ao passar o mouse para que os usuários tenham uma indicação extra de que algo será mostrado ao passar o mouse.
HTML é a melhor coisa desde o pão fatiado.
Uma abreviação da palavra atributo é attr .
Elemento | Uso | Opcional |
---|---|---|
<blockquote> |
Elemento em nível de bloco para citar conteúdo de outra fonte | Adicionar .pull-left e .pull-right classes para opções flutuantes |
<small> |
Elemento opcional para adicionar uma citação voltada para o usuário, normalmente um autor com título de trabalho | Coloque o <cite> ao redor do título ou nome da fonte |
Para incluir uma citação em bloco, envolva <blockquote>
qualquer HTML como a citação. Para cotações diretas, recomendamos um <p>
.
Inclua um <small>
elemento opcional para citar sua fonte e você receberá um travessão —
antes dele para fins de estilo.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Alguém famoso </small>
- </blockquote>
As cotações de bloco padrão são estilizadas da seguinte forma:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Alguém famoso em Body of work
Para flutuar sua blockquote para a direita, adicione class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Alguém famoso em Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
Envolva trechos de código embutidos com <code>
.
- Por exemplo , a seção < code> </ code > deve ser encapsulada como inline .
Use <pre>
para várias linhas de código. Certifique-se de transformar quaisquer acentos circunflexos em seus caracteres unicode para renderização adequada.
<p>Exemplo de texto aqui...</p>
- <pré>
- <p>Exemplo de texto aqui...</p>
- </pre>
Nota: Certifique-se de manter o código dentro das <pre>
tags o mais próximo possível da esquerda; ele irá renderizar todas as guias.
Pegue o mesmo <pre>
elemento e adicione duas classes opcionais para renderização aprimorada.
- <p> Texto de exemplo aqui... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Exemplo de texto aqui...</p>
- </pre>
Baixe google-code-prettify e veja o leia-me de como usar.
Marcação | Descrição |
---|---|
<table> |
Elemento de encapsulamento para exibir dados em formato tabular |
<thead> |
Elemento de contêiner para linhas de cabeçalho de tabela ( <tr> ) para rotular colunas de tabela |
<tbody> |
Elemento de contêiner para linhas de tabela ( <tr> ) no corpo da tabela |
<tr> |
Elemento de contêiner para um conjunto de células de tabela ( <td> ou <th> ) que aparece em uma única linha |
<td> |
Célula de tabela padrão |
<th> |
Célula de tabela especial para rótulos de coluna (ou linha, dependendo do escopo e posicionamento) Deve ser usado em um <thead> |
<caption> |
Descrição ou resumo do que a tabela contém, especialmente útil para leitores de tela |
- <tabela>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
Nome | Classe | Descrição |
---|---|---|
Predefinição | Nenhum | Sem estilos, apenas colunas e linhas |
Básico | .table |
Apenas linhas horizontais entre as linhas |
Delimitado | .table-bordered |
Arredonda os cantos e adiciona borda externa |
Faixa de zebra | .table-striped |
Adiciona cor de fundo cinza claro a linhas ímpares (1, 3, 5, etc.) |
Condensado | .table-condensed |
Corta o preenchimento vertical pela metade, de 8px para 4px, dentro de todos td e th elementos |
As tabelas são estilizadas automaticamente com apenas algumas bordas para garantir a legibilidade e manter a estrutura. Com 2.0, a .table
classe é obrigatória.
- < classe da tabela = "tabela" >
- …
- </table>
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
1 | Marca | Otto | CSS |
2 | Jacó | Thornton | Javascript |
3 | Stu | Dente | HTML |
Fique um pouco extravagante com suas mesas adicionando listras de zebra - basta adicionar a .table-striped
classe.
Nota: As tabelas sprited usam o :nth-child
seletor CSS e não estão disponíveis no IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
1 | Marca | Otto | CSS |
2 | Jacó | Thornton | Javascript |
3 | Stu | Dente | HTML |
Adicione bordas ao redor de toda a mesa e cantos arredondados para fins estéticos.
- <table class = "table table-bordered" >
- …
- </table>
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jacó | Thornton | Javascript |
3 | Stu | Dente | |
3 | Brosef | Stálin | HTML |
Torne suas tabelas mais compactas adicionando a .table-condensed
classe para cortar o preenchimento das células da tabela pela metade (de 8px para 4px).
- <table class = "table table-condensed" >
- …
- </table>
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
1 | Marca | Otto | CSS |
2 | Jacó | Thornton | Javascript |
3 | Stu | Dente | HTML |
Sinta-se à vontade para combinar qualquer uma das classes de tabela para obter aparências diferentes, utilizando qualquer uma das classes disponíveis.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
1 | Marca | Otto | CSS |
2 | Jacó | Thornton | Javascript |
3 | Stu | Dente | HTML |
4 | Brosef | Stálin | HTML |
A melhor parte dos formulários no Bootstrap é que todas as suas entradas e controles ficam ótimas, não importa como você os construa em sua marcação. Nenhum HTML supérfluo é necessário, mas fornecemos os padrões para quem precisar.
Layouts mais complicados vêm com classes sucintas e escalonáveis para facilitar o estilo e a vinculação de eventos, para que você tenha cobertura em todas as etapas.
Bootstrap vem com suporte para quatro tipos de layouts de formulário:
Diferentes tipos de layouts de formulário exigem algumas alterações na marcação, mas os próprios controles permanecem e se comportam da mesma forma.
Os formulários do Bootstrap incluem estilos para todos os controles de formulário básico, como entrada, área de texto e seleção que você esperaria. Mas também vem com vários componentes personalizados, como entradas anexadas e pré-anexadas e suporte para listas de caixas de seleção.
Estados como erro, aviso e sucesso são incluídos para cada tipo de controle de formulário. Também estão incluídos estilos para controles desabilitados.
Bootstrap fornece marcação e estilos simples para quatro estilos de formulários web comuns.
Nome | Classe | Descrição |
---|---|---|
Vertical (padrão) | .form-vertical (não requerido) |
Rótulos empilhados alinhados à esquerda sobre controles |
Em linha | .form-inline |
Etiqueta alinhada à esquerda e controles de bloco em linha para estilo compacto |
Procurar | .form-search |
Entrada de texto extra-arredondada para uma estética de pesquisa típica |
Horizontal | .form-horizontal |
Flutuar rótulos alinhados à esquerda e à direita na mesma linha que os controles |
Com a v2.0, temos padrões mais leves e inteligentes para estilos de formulário. Sem marcação extra, apenas controles de formulário.
Refletindo os estilos padrão do WebKit, basta adicionar .form-search
campos de pesquisa arredondados extras.
As entradas são em nível de bloco para iniciar. Para .form-inline
e .form-horizontal
, usamos inline-block.
São mostrados à esquerda todos os controles de formulário padrão que suportamos. Aqui está a lista com marcadores:
Até a v1.4, os estilos de formulário padrão do Bootstrap usavam o layout horizontal. Com o Bootstrap 2, removemos essa restrição para ter padrões mais inteligentes e escaláveis para qualquer formulário.
O Bootstrap apresenta estilos para foco e disabled
estados suportados pelo navegador. Removemos o Webkit padrão outline
e aplicamos um box-shadow
em seu lugar para :focus
.
Também inclui estilos de validação para erros, avisos e sucesso. Para usar, adicione a classe de erro ao arquivo .control-group
.
- <conjunto de campos
- class = "erro do grupo de controle" >
- …
- </fieldset>
Grupos de entrada — com texto anexado ou anexado — fornecem uma maneira fácil de fornecer mais contexto para suas entradas. Ótimos exemplos incluem o sinal @ para nomes de usuário do Twitter ou $ para finanças.
Até a v1.4, o Bootstrap exigia marcação extra em torno de caixas de seleção e rádios para empilhá-los. Agora, é uma simples questão de repetir o <label class="checkbox">
que envolve o <input type="checkbox">
.
Caixas de seleção e rádios em linha também são suportados. Basta adicionar .inline
a qualquer .checkbox
ou .radio
e pronto.
Para usar entradas prefixadas ou anexadas em um formulário embutido, certifique-se de colocar .add-on
e input
na mesma linha, sem espaços.
Para adicionar texto de ajuda para suas entradas de formulário, inclua texto de ajuda embutido <span class="help-inline">
ou um bloco de texto de ajuda <p class="help-block">
após o elemento de entrada.
:after
. Nos documentos, mostramos uma cor de fundo vermelho claro ao passar o mouse para destacar o tamanho do ícone.
Em vez de tornar cada ícone uma solicitação extra, nós os compilamos em um sprite - um monte de imagens em um arquivo que usa CSS para posicionar as imagens com background-position
. Este é o mesmo método que usamos no Twitter.com e funcionou bem para nós.
Todas as classes de ícones são prefixadas com .icon-
namespace e escopo adequados, assim como nossos outros componentes. Isso ajudará a evitar conflitos com outras ferramentas.
A Glyphicons nos concedeu o uso do conjunto Halflings em nosso kit de ferramentas de código aberto, desde que forneçamos um link e crédito aqui nos documentos. Por favor, considere fazer o mesmo em seus projetos.
Com a v2.0.0, optamos por usar uma <i>
tag para todos os nossos ícones, mas eles não têm classe de caso - apenas um prefixo compartilhado. Para usar, coloque o seguinte código em qualquer lugar:
- <i class = "icon-search" ></i>
Há também estilos disponíveis para ícones invertidos (brancos), prontos com uma classe extra:
- <i class = "icon-search icon-white" ></i>
Existem 120 classes para escolher para seus ícones. Basta adicionar uma <i>
tag com as classes certas e pronto. Você pode encontrar a lista completa em sprites.less ou aqui neste documento.
Ícones são ótimos, mas onde alguém os usaria? Aqui estão algumas ideias:
Essencialmente, em qualquer lugar que você possa colocar uma <i>
tag, você pode colocar um ícone.
Use-os em botões, grupos de botões para uma barra de ferramentas, navegação ou entradas de formulário pré-anexadas.