Escala tipográfica

Toda a grade tipográfica é baseada em duas variáveis ​​Less em nosso arquivo variables.less: @baseFontSizee @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.

Texto do corpo do exemplo

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.

Usando ênfase

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.

Endereços de exemplo

Aqui estão dois exemplos de como a <address>tag pode ser usada:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Nome completo
[email protected]

Exemplos de abreviaturas

As abreviações com um titleatributo têm uma borda inferior pontilhada clara e um cursor de ajuda ao passar o mouse. Isso dá aos usuários uma indicação extra de que algo será mostrado ao passar o mouse.

Adicione a initialismclasse a uma abreviação para aumentar a harmonia tipográfica, dando a ela um tamanho de texto um pouco menor.

HTML é a melhor coisa desde o pão fatiado.

Uma abreviação da palavra atributo é attr .

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

Não ordenado

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem em massa
• Facilisis em pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Ultricies Purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Sem estilo

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem em massa
• Facilisis em pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Ultricies Purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Encomendado

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem em massa
4. Facilisis em pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Descrição

<dl>

Listas de descrição

Uma lista de descrição é perfeita para definir termos.

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

porta Malesuada

Etiam porta sem maleuada magna mollis euismod.

Descrição horizontal

<dl class="dl-horizontal">

Listas de descrição

Uma lista de descrição é perfeita para definir termos.

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

porta Malesuada

Etiam porta sem maleuada magna mollis euismod.

Felis euismod sempre eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

---

Atenção! As listas de descrição horizontal truncarão termos muito longos para caber na coluna da esquerda text-overflow. Em viewports mais estreitas, eles mudarão para o layout empilhado padrão.

Em linha

Envolva trechos de código embutidos com <code>.

Por exemplo , a seção < code> </ code > deve ser encapsulada como inline .  

Bloco básico

Use <pre>para várias linhas de código. Certifique-se de escapar quaisquer colchetes angulares no código 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.

Opcionalmente, você pode adicionar a .pre-scrollableclasse que definirá uma altura máxima de 350px e fornecerá uma barra de rolagem do eixo y.

Google embelezar

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>

As tabelas são estilizadas automaticamente com apenas algumas bordas para garantir a legibilidade e manter a estrutura. Com 2.0, a .tableclasse é obrigatória.

< classe da tabela = "tabela" > 
  …
</table>

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

Fique um pouco extravagante com suas mesas adicionando listras de zebra - basta adicionar a .table-stripedclasse.

Nota: As tabelas distribuídas usam o :nth-childseletor CSS e não estão disponíveis no IE7-IE8.

<table class = "table table-striped" > 
  …
</table>

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

Adicione bordas ao redor de toda a mesa e cantos arredondados para fins estéticos.

<table class = "table table-bordered" > 
  …
</table>

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
	Marca	Otto	@getbootstrap
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

Torne suas tabelas mais compactas adicionando a .table-condensedclasse para cortar o preenchimento das células da tabela pela metade (de 8px para 4px).

<table class = "table table-condensed" > 
  …
</table>

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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>

	Nome completo
#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

HTML e CSS flexíveis

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.

Quatro layouts incluídos

Bootstrap vem com suporte para quatro tipos de layouts de formulário:

• Vertical (padrão)
• Procurar
• Em linha
• Horizontal

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.

Estados de controle e muito mais

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.

Forma básica

Padrões inteligentes e leves sem marcação extra.

Nome do rótulo

Exemplo de texto de ajuda em nível de bloco aqui.

Olhe para mim Enviar

<form class = "bem" > 
  <label> Nome do rótulo </label>
  <input type = "texto" class = "span3" placeholder = "Digite algo..." >   
  <span class = "help-block" > Exemplo de texto de ajuda em nível de bloco aqui. </span> 
  < classe de etiqueta = "caixa de seleção" > 
    <input type = "checkbox" > Confira 
  </label>
  <button type = "submit" class = "btn" > Enviar </button>  
</form>

Formulário de pesquisa

Adicione .form-searchao formulário e .search-queryao input.

Procurar

<form class = "bem form-search" > 
  <input type = "texto" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Pesquisar </button>  
</form>

Formulário embutido

Adicione .form-inlinepara refinar o alinhamento vertical e o espaçamento dos controles de formulário.

Lembre de mim Entrar

<form class = "bem form-inline" > 
  <input type = "texto" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  < classe de etiqueta = "caixa de seleção" > 
    <input type = "checkbox" > Lembrar de mim 
  </label>
  <button type = "submit" class = "btn" > Entrar </button>  
</form>

São mostrados à direita todos os controles de formulário padrão que suportamos. Aqui está a lista com marcadores:

• entradas de texto (texto, senha, e-mail, etc)
• caixa de seleção
• rádio
• selecionar
• seleção múltipla
• entrada de arquivo
• área de texto

Entrada de texto

Além do texto de forma livre, qualquer entrada baseada em texto HTML5 aparece assim.

Caixa de seleção

A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo

Selecionar lista

algo 2 3 4 5

Seleção múltipla

1 2 3 4 5

Entrada de arquivo

Área de texto

Salvar alterações Cancelar

Exemplo de marcação

Dado o layout de formulário de exemplo acima, aqui está a marcação associada à primeira entrada e ao grupo de controle. As classes , e são todas necessárias para o .control-groupestilo .control-label..controls

<form class = "form-horizontal" > 
  <fieldset>
    <legend> Texto da legenda </legend>
    <div class = "grupo de controle" > 
      <label class = "control-label" for = "input01" > Entrada de texto </label>  
      <div class = "controles" > 
        <input type = "texto" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Texto de ajuda de suporte </p> 
      </div>
    </div>
  </fieldset>
</form>

O Bootstrap apresenta estilos para foco e disabledestados suportados pelo navegador. Removemos o Webkit padrão outlinee aplicamos um box-shadowem seu lugar para :focus.

---

Validação de formulário

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>

Entrada focada

Entrada não editável

Algum valor aqui

Entrada desativada

Caixa de seleção desativada

Esta é uma caixa de seleção desativada

Entrada com aviso

Algo pode ter dado errado

Entrada com erro

Corrija o erro

Entrada com sucesso

Woohoo!

Selecione com sucesso

1 2 3 4 5 Woohoo!

Salvar alterações Cancelar

Prefixar e anexar entradas

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.

---

Caixas de seleção e rádios

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 .inlinea qualquer .checkboxou .radioe pronto.

---

Formulários embutidos e anexar/anexar

Para usar entradas prefixadas ou anexadas em um formulário embutido, certifique-se de colocar .add-one inputna mesma linha, sem espaços.

---

Texto de ajuda do formulário

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.

Tamanhos de grade de formulário

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Use as mesmas .span*classes do sistema de grade para tamanhos de entrada.

Tamanhos alternativos

Você também pode usar classes estáticas que não mapeiam para a grade, se adaptam aos estilos CSS responsivos ou consideram vários tipos de controles (por exemplo, inputvs. select).

Texto anexado

@

Aqui está um texto de ajuda

Texto anexado

0,00

Aqui está mais texto de ajuda

Anexar e preceder

$ 0,00

Anexar com botão

Vai!

Anexar com dois botões

Procurar Opções

Caixas de seleção embutidas

1 2 3

Caixas de seleção

A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo A opção dois também pode ser verificada e incluída nos resultados do formulário A opção três pode - sim, você adivinhou - também ser verificada e incluída nos resultados do formulário

Nota: Os rótulos cercam todas as opções para áreas de clique muito maiores e um formulário mais utilizável.

Botões do rádio

A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo A opção dois pode é outra coisa e selecioná-la irá desmarcar a opção um

Salvar alterações Cancelar

Botões para ações

Como convenção, os botões devem ser usados ​​apenas para ações, enquanto os hiperlinks devem ser usados ​​para objetos. Por exemplo, "Download" deve ser um botão, enquanto "atividade recente" deve ser um link.

Estilos de botão podem ser aplicados a qualquer coisa com a .btnclasse aplicada. No entanto, normalmente você desejará aplicá-los apenas a elementos <a>e <button>.

Compatibilidade entre navegadores

O IE9 não corta gradientes de fundo em cantos arredondados, então o removemos. Relacionado, o IE9 altera buttonelementos desabilitados, tornando o texto cinza com uma sombra de texto desagradável que não podemos corrigir.

Vários tamanhos

Gosta de botões maiores ou menores? Adicione .btn-large, .btn-small, ou .btn-minipara dois tamanhos adicionais.

Ação primária Ação

Ação primária Ação

Ação primária Ação

Estado desativado

Para botões desabilitados, adicione a .disabledclasse aos links e o disabledatributo aos <button>elementos.

Link principal Link

Botão principal Botão

Atenção! Usamos .disabledcomo uma classe utilitária aqui, semelhante à .activeclasse comum, portanto, nenhum prefixo é necessário.

Uma aula, várias tags

Use a .btnclasse em um elemento <a>, <button>ou <input>.

Link Botão

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" >  
  Botão
</button>
< classe de entrada = "btn" tipo = "botão"  
         valor = "Entrada" >
< classe de entrada = "btn" tipo = "enviar"  
         valor = "Enviar" >

Como prática recomendada, tente corresponder o elemento ao seu contexto para garantir a renderização entre navegadores correspondente. Se você tiver um input, use um <input type="submit">para seu botão.

• ícone de vidro
• música-ícone
• pesquisa de ícone
• ícone-envelope
• ícone-coração
• ícone-estrela
• ícone-estrela-vazio
• usuário-ícone
• filme-ícone
• icon-th-large
• ícone-th
• icon-th-list
• icon-ok
• ícone-remover
• ícone-zoom-in
• ícone-zoom-out
• ícone desligado
• ícone-sinal
• ícone-engrenagem
• ícone-lixo
• ícone-home
• arquivo de ícone
• hora do ícone
• ícone-estrada
• icon-download-alt
• download de ícone
• ícone-upload
• caixa de entrada de ícones
• ícone-play-círculo
• ícone-repetir
• atualização de ícone
• icon-list-alt
• ícone de bloqueio
• ícone-bandeira
• fones de ouvido ícone

• ícone-volume-off
• icon-volume-down
• ícone de aumento de volume
• icon-qrcode
• ícone-código de barras
• ícone-tag
• tags de ícone
• livro de ícones
• ícone-marcador
• impressão de ícone
• ícone-câmera
• fonte de ícone
• ícone em negrito
• ícone-itálico
• altura-texto-ícone
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• lista de ícones
• icon-indent-left
• icon-indent-right
• ícone-facetime-vídeo
• icon-picture
• ícone-lápis
• ícone-mapa-marcador
• ajuste de ícone
• tom de ícone
• editar ícone
• compartilhar ícone
• verificação de ícone
• ícone-mover
• icon-step-backward
• ícone-retrocesso rápido

• ícone para trás
• jogo de ícones
• ícone-pausa
• ícone-parada
• avanço de ícone
• ícone-avanço rápido
• icon-step-forward
• ícone-ejetar
• ícone-chevron-esquerda
• icon-chevron-right
• ícone-mais-sinal
• sinal de menos-ícone
• ícone-remover-sinal
• icon-ok-sign
• ícone-pergunta-sinal
• icon-info-sign
• captura de tela do ícone
• ícone-remover-círculo
• ícone-ok-círculo
• ícone-ban-círculo
• ícone-seta-esquerda
• ícone-seta-direita
• ícone-seta para cima
• ícone-seta para baixo
• icon-share-alt
• ícone-resize-full
• ícone-redimensionar-pequeno
• ícone-mais
• ícone-menos
• ícone-asterisco
• ícone-exclamação-sinal
• ícone-presente
• folha de ícone
• ícone de fogo
• ícone-olho-aberto

• ícone-olho-fechado
• ícone-aviso-sinal
• plano-ícone
• ícone-calendário
• ícone aleatório
• ícone-comentário
• ícone-ímã
• icon-chevron-up
• icon-chevron-down
• ícone-retuíte
• ícone-carrinho de compras
• icon-folder-close
• ícone-pasta-abrir
• ícone-redimensionar-vertical
• icon-resize-horizontal
• ícone-hdd
• ícone do megafone
• ícone-sino
• ícone-certificado
• ícone de polegar para cima
• ícone de polegar para baixo
• ícone-mão-direita
• ícone-mão-esquerda
• ícone de mão para cima
• ícone de mão para baixo
• ícone-círculo-seta-direita
• ícone-círculo-seta-esquerda
• ícone-círculo-seta para cima
• ícone-círculo-seta para baixo
• ícone-globo
• chave de ícone
• ícone-tarefas
• filtro de ícone
• ícone-pasta
• ícone-tela cheia

Construído como um sprite

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.

Como usar

Bootstrap usa uma <i>tag para todos os í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 mesmo neste documento.

Atenção! Ao usar ao lado de strings de texto, como em botões ou links de navegação, certifique-se de deixar um espaço após a <i>tag para espaçamento adequado.

Casos de uso

Ícones são ótimos, mas onde alguém os usaria? Aqui estão algumas ideias:

• Como recursos visuais para sua navegação na barra lateral
• Para uma navegação puramente orientada por ícones
• Para botões para ajudar a transmitir o significado de uma ação
• Com links para compartilhar contexto no destino de um usuário

Essencialmente, em qualquer lugar que você possa colocar uma <i>tag, você pode colocar um ícone.

Atualizar Confira Excluir

Comente Definições Mais informações

Endereço de email