Cabeçalhos

Todos cabeçalhos, <h1> até <h6> estão disponíveis.

h1. Cabeçalho 1

h2. Cabeçalho 2

h3. Cabeçalho 3

h4. Cabeçalho 4

h5. Cabeçalho 5

h6. Cabeçalho 6

cópia do corpo

O padrão global do font-size é 14px, com um line-height de 20px. Isto é aplicado ao <body> e todos os parágrafos. E ainda, <p> (parágrafos) recebem uma margem da metade do line-height (10px por padrão).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

cópia principal do corpo

Faça um parágrafo sobressair adicionando .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Construído com o Less

A escala tipográfica é baseado em duas variáveis LESS que estão disponíveis em variables.less: @baseFontSize e @baseLineHeight. O primeiro é o font-size base e o segundo é o line-height base. Nós usamos estas variáveis e uma simples matemática para criar as margens, paddings, e line-heights para toda nossa tipografia e mais. Customize-os e o Bootstrap se adapta.

Ênfase

Faça o uso da ênfase padrão do HTML com estilos leves

`<small>`

Para desenfatizar textos em blocos ou inline, use a tag small.

This line of text is meant to be treated as fine print.

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

Negrito

Para enfatizar um pedaço de texto com uma propriedade font-weight mais pesada

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Itálicos

Para enfatizar um trecho de texto com itálico

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Atenção! Sinta-se livre para usar <b> e <i> em HTML5. <b> é feito para marcar palavras ou frases sem dar importância adicional enquanto é mais usado para <i>, termos técnicos etc.

Classes de ênfase

Um melhor significado através de cor com uma coleção de classes utilitárias

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Abreviações

A implementação HTML de <abbr> estilizada para abreviações e acrônimos para mostrar a versão expandida do hover. Abreviações com um atributo title tem uma linha clara e um cursor de ajuda, para fornecer um contexto adicional no estado hover

`<abbr>`

Para texto expandido em um hover de uma abreviação, incluindo um atributo title

Uma abreviação da palavra atributo é attr

<abbr title="attribute">attr</abbr>

`<abbr class="initialism">`

Adiciona .initialism para uma abreviação com uma fonte levemente menor

HTML É a melhor coisa desde o pão.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Endereços

Apresentar informação de contato para o ancestral mais próximo ou o corpo inteiro do documento

`<address>`

Preserva formatação terminando as linhas com <br>.

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

Nome completo
first.last@example.com

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Nome completo</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Citações

Para blocos de citação de uma outra fonte dentro do documento

Citação Padrão

Coloque em volta de um <blockquote> qualquer HTML como citação. Para citações diretas nós recomendamos o uso de <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Opções de citação

Estilizar o conteúdo para mudanças ou simples variações da citação padrão

Nomeando uma fonte

Adicione uma tag <small> para identificar a fonte. Coloque em volta do nome a fonte de trabalho em uma tag <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguém famoso in título da fonte

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Alguém famoso em <cite title="Source Title">titulo da fonte</cite></small>
</blockquote>

Telas alternadas

Use .pull-right para flutuar uma citação a direita.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguém famoso in título da fonte

<blockquote class="pull-right">
  ...
</blockquote>

Listas

Não ordenadas

Uma lista de itens em que a ordem não importa

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

<ul>
  <li>...</li>
</ul>

Ordenadas

Uma lista de itens em que a ordem importa

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Não estilizadas

Remova por padrão o list-style e padding da esquerda em uma lista de itens (ao primeiro elemento filho somente)

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

<ul class="unstyled">
  <li>...</li>
</ul>

Inline

Coloque todos itens de uma lista em uma única linha com inline-block e algum padding de leve

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="inline">
  <li>...</li>
</ul>

Descrição

Uma lista de termos com suas descrições associadas

Listas descritivas: Uma lista de descrição é perfeita para definir termos
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descrição horizontal

Fazer os termos e descrições em um <dl> alinhados lado a lado

Listas descritivas: Uma lista de descrição é perfeita para definir termos
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Atenção! Listas de descrição horizontal irá truncar termos que são muito longos para encaixar na esquerda da coluna fixa text-overflow. Em resoluções menores, eles irão mudar para o padrão de layout estagnado

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.

Por exemplo, <code><section></code> deve ser colocado inline

Basic block

Use <pre> para múltiplas linhas de código, certifique-se de escapar qualquer caractere especial para renderizar corretamente

<p>Texto de exemplo aqui</p>

<pre>
  &lt;p&gt;Texto de exemplo aqui&lt;/p&gt;
</pre>

Atenção! Certifique-se de manter o código dentro de uma tag <pre> tão perto da esquerda quando possível, pois ela irá renderizar todas tabs

Você pode opcionalmente adicionar a classe .pre-scrollable que irá escolher um max-height of 350px e provê uma barra de progresso no eixo y

Estilos padrão

Para estilização básica—padding leve e somente um divisor horizontal—adicione a classe base .table para qualquer <table>.

#	Primeiro name	Último nome	Nome do usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Classes opcionais

Adicione qualquer uma das seguintes classes a classe base .table

`.table-striped`

Adicione tabelas zebradas dentro de uma tag <tbody> via um seletor CSS :nth-child (não disponível no IE7-IE8)

#	Primeiro name	Último nome	Nome do usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

`.table-ordered`

Adicione bordas e bordas arredondadas para a tabela

#	Primeiro name	Último nome	Nome do usuário
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

`.table-hover`

Habilite um estado de hover em linhas dentro de <tbody>.

#	Primeiro name	Último nome	Nome do usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

`.table-condensed`

Tornar a tabela mais compacta cortando o padding da célula pela metade

#	Primeiro name	Último nome	Nome do usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Classes opcionais de linha

Use classes contextuais para cores das linhas da tabela

Classe	Descrição
`.success`	Indica uma ação positiva com sucesso
`.error`	Indica uma ação negativa e potencialmente perigosa
`.warning`	Indica um aviso que pode precisar de atenção
`.info`	Usar uma alternativa ao estilo padrão

#	Produto	Pagamento feito	Status
1	TB - Monthly	01/04/2012	Approved
2	TB - Monthly	02/04/2012	Declined
3	TB - Monthly	03/04/2012	Pending
4	TB - Monthly	04/04/2012	Call in to confirm

...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Marcaçãod e tabela suportada

Lista de elementos HTML suportados e como eles devem ser usados

Tag	Descrição
`<table>`	Colocando elementos para exibir dados em um formato tabular
`<thead>`	Elemento principal para linhas da tabela (`<tr>`) para rotular colunas da tabela
`<tbody>`	Elemento principal para linhas da tabela (`<tr>`) no corpo da tabela
`<tr>`	Elemento principal para uma coleção de células (`&td;tr>`) ou (`<th>`) para aparecer em uma única linha
`<td>`	Célula da tabela padrão
`<th>`	Célula de tabela especial para coluna (ou linha, dependendo do lugar que é colocado) Deve ser usado dentro de um `<thead>`
`<caption>`	Descrição ou sumário do que a tabela possui, especialmente útil para leitores de tela

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Estilos padrão

Controles de formulários individuais recebem estilização, mas sem nenhuam classe base no elemento <form> ou mudanças grandes na marcação. Resultados são estagnados, alinhados a esquerda e rótulos no topo dos controles de formulário

<form>
  <fieldset>
    <legend>Legenda</legend>
    <label>Nome do título</label>
    <input type="text" placeholder="Digite algo...">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
      <input type="checkbox"> Olha eu
    </label>
    <button type="submit" class="btn">Enviar</button>
  </fieldset>
</form>

Layout opcionais

Incluído com o Bootstrap três layouts de formulários para usos comuns

Formulário de busca

Adicione .form-search para o formulário e .search-query para o <input> para um input de texto com arredondamento extra.

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Busca</button>
</form>

Formulário inline

Adicione .form-inline para rótulos alinhados a esquerda e controles inline-block para um layout compacto

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Senha">
  <label class="checkbox">
    <input type="checkbox"> Lembre-se de mim
  </label>
  <button type="submit" class="btn">Entrar</button>
</form>

Formulário horizontal

Rótulos alinhados a direita e flutuados a esquerda para aparecerem na mesma linha como controles. Requer mais mudanças do padrão de marcação do formulário padrão

Adicione .form-horizontal para o formulário
Coloque em volta dos rótulos e controles um .control-group
Adicione .control-label para os rótulos
Coloque em volta de qualquer controle associado .controls para alinhamento apropriado

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Senha</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Senha">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Lembre-se de mim
      </label>
      <button type="submit" class="btn">Entrar</button>
    </div>
  </div>
</form>

Controles de formulário suportados

Exemplos de um controle de formulários suportados em um layout de exemplo

Inputs

Os controles de formulários mais comuns, campos de input baseado em texto. Inclui suporte para todos os tipos do HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel e color.

Requer o uso de um tipo type

<input type="text" placeholder="Text input">

Área de texto

Controle de formulários que suporta múltiplas linhas de texto. Mude o atributo rows quando necessário

<textarea rows="3"></textarea>

Checkbox e radio

Checkboxes são usados para selecionar várias opções em uma lista enquanto botões radio são usados para selecionar uma opção de várias

Padrão (estagnados)

<label class="checkbox">
  <input type="checkbox" value="">
  Opção 1 é isto
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Opção 1 é isto
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  A opção 2 pode ser algo mais e selecionando irá desselacionar a opção 1
</label>

checkboxes inline

Adicione a classe .inline para uma série de checkboxes ou radios para controlar a aparência na mesma linha

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Selects

Use a opção padrão para especificar um multiple="multiple" para mostrar várias opções de uma vez

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Extendendo controle de formulários

Adicione no topo de controles de browsers existentes, o Bootstrap inclui componentes de formulários bastante úteis

inputs inseridos antes ou depois

Adicione texto ou botões antes ou depois de qualquer input baseado em texto. Note que o elemento select não é suportado aqui

Opções padrão

Coloque em volta um .add-on em um input com um ou duas classes para colocar antes ou depois de um texto em um input

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Nome do usuário">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

Combinados

Use ambas classes e duas instâncias de .add-on para colocar antes ou depois em um input

<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Botões ao invés de texto

Ao invés de um <span> com texto, use um .btn para ligar um botão (ou dois) a um input

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Search</button>
  <button class="btn" type="button">Options</button>
</div>

Dropdown de botões

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Ação
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Ação
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Ação
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Ação
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

Menus Dropdown segmentados

<form>
  <div class="input-prepend">
    <div class="btn-group">...</div>
    <input type="text">
  </div>
  <div class="input-append">
    <input type="text">
    <div class="btn-group">...</div>
  </div>
</form>

Formulário de busca

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Busca</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Busca</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

Controlar tamanho

Use classes de tamanho relativo como .input-large ou deixe seus inputs com o tamanho da colunagem do grid usando as classes .span*

Input em bloco

Faça qualquer elemento <input> ou <textarea> se comportar como um elemento em bloco.

<input class="input-block-level" type="text" placeholder=".input-block-level">

Tamanho relativo

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Atenção! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

Tamanho do grid

Use .span1 até .span12 para os inputs se encaixarem aos mesmos tamanhos das colunas do grid

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

Para múltiplos inputs de grid por linha, use a classe modificadora .controls-row para espaçamento apropriado.

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

inputs não editáveis

Dados presentes em um formulário que não é editável usando marcação de formulário atual

<span class="input-xlarge uneditable-input">Some value here</span>

Ações de formulários

Termine um formulário com um grupo de ações (botões). Quando colocado em um .form-horizontal, os botões irão automaticamente identados para alinhar com os controles de formulário

<div class="form-actions">
  <button type="submit" class="btn btn-primary">Salvar mudanças</button>
  <button type="button" class="btn">Cancelar</button>
</div>

Texto de ajuda

Suporte inline e bloco para texto de ajuda que aparece nos controles de formulário

Ajuda inline

<input type="text"><span class="help-inline">Inline help text</span>

Ajuda em bloco

<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Estados de controle do formuário

Dar feedback para os usuários ou visitantes com feedback básico dos estados de controle de formulário e rótulos

Focus no input

Nós removemos o estilo padrão do outline em alguns controles de formulários e aplica um box-shadow no lugar de :focus.

<input class="input-xlarge" id="focusedInput" type="text" value="Isto está focado...">

Input inválido

Inputs estilizados com o padrão do browser através de :invalid. Especifique um type e adicione o atributo required

<input class="span3" type="email" required>

Inputs desabilitados

Adicione o atributo disabled em um input para prevenir que o usuário possa digitar algo com uma aparência diferente

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Input desabilitado aqui" disabled>

Estdos de validação

O Bootstrap inclui estilos de validação para erro, avisos, informações, e mensagens de sucesso. Para usar, adicione a classe apropriada em volta do .control-group.

<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input com aviso</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Alguma coisa deu errado</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">Input com erro</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Por favor, corrija o erro</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input com sucesso</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">wowww</span>
  </div>
</div>

Default buttons

Estilos de botão podem ser aplicados para qualquer classe .btn. Entretanto, tipicamente você irá acplicar somente em elementos <a> e <button> para melhor renderização

Botões	class=""	Descrição
	`btn`	Botão padrão cinza com gradiente
	`btn btn-primary`	Provê peso extra visual e identifica a ação primária em uma coleção de botões
	`btn btn-info`	Usado como uma alternativa para os estilos padrões
	`btn btn-success`	Indica uma ação bem sucedida e positiva
	`btn btn-warning`	Indicação de cuidado deve ser feita com esta ação
	`btn btn-danger`	Indica uma ação potencialmente perigosa
	`btn btn-inverse`	Botão alternativo cinza, não ligado a uma ação semântica ou uso
	`btn btn-link`	Desenfatizar um botão por fazer parecer como link enquanto mantém o comportamento de botão

Compatibilidade Cross Browser

O IE9 não corta gradiente de fundo em bordas arredondadas, então nós removemos. Outra coisa, IE9 desabilita elementos button, renderizando um texto cinza com uma sombra no texto que não podemos corrigir.

Tamanhos de botão

Botões bonitos maiores ou menores? Adicione .btn-large, .btn-small, ou .btn-mini

<p>
  <button class="btn btn-large btn-primary" type="button">Botão grande</button>
  <button class="btn btn-large" type="button">Botão grande</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Padrão de botão</button>
  <button class="btn" type="button">Padrão de botão</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Botão pequeno</button>
  <button class="btn btn-small" type="button">Botão pequeno</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Botão miniatura</button>
  <button class="btn btn-mini" type="button">Botão miniatura</button>
</p>

Criar um botões em bloco—aqueles que se espalha para a largura completa do elemento pai — adicionando .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Botões em bloco</button>
<button class="btn btn-large btn-block" type="button">Botões em bloco</button>

Estado desabilitado

Fazer botões parecerem não clicáveis deixando mais claro em 50%

Anchor element

Adicione a classe .disabled ao <a>

Link primário Link

<a href="#" class="btn btn-large btn-primary disabled">Link primário</a>
<a href="#" class="btn btn-large disabled">Link</a>

Atenção! Nós usamos a classe .disabled como utilitária, similar a classe comum .active, então nenhum prefixo é requerido. Também, esta classe é somente estética; você deve suar um JavaScript customizado para desabilitar os links.

Button element

Adicione o atributo disabled aos botões com a tag <button>

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Botão primário</button>
<button type="button" class="btn btn-large" disabled>Botões</button>

Uma classe, múltiplas tags

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

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Botões</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Enviar">

Como melhor prática, tente dar o elemento ao contexto para certificar-se que irá ser bem renderizado cross-browser. Se você tem um input, use um <input type="submit"> para seus botões

Adicione classes para uma tag <img> para facilmente estilizar imagens em qualquer projeto

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Atenção! .img-rounded e .img-circle não irão funcionar no IE7-8 devido ao não suporte ao border-radius

Ícones glyphs

140 ícones em forma de sprite, disponíveis em um padrão cinza escuro e branco, provido pelo Glyphicons.

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

Glyphicons attribution

Glyphicons Halflings não são normalmente grátis, mas um arranjo entre o Bootstrap e os criadores do Glyphicons tornou isto possível e não custa nada a você como desenvolvedor. Como forma de agradecimento, nós pedimos para você incluir um link opcional de volta do Glyphicons quando aplicável

Como usar

Todos ícones requerem uma tag <i> com uma classe única, prefixada com um icon-. Para usar, coloque o código seguinte em qualquer lugar:

<i class="icon-search"></i>

Há também estilos disponíveis de ícones (brancos) invertidos, deixando pronto com uma classe extra. Nós iremos especificadamente reforçar esta classe no hover e estados de ativo para navegação e links dropdown

<i class="icon-search icon-white"></i>

Atenção! Quando usar além de strings de texto, como um botão ou links de navegação, tenha certeza de deixar um espaço depois da tag para espaçamento apropriado

Exemplos de ícones

Use-os como botões, grupos de botões para uma barra de ferramentas, navegação, ou inputs de formulários

Botões

Grupos de botões em uma barra de botões

<div class="btn-toolbar">
  <div class="btn-group">

    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>

Dropdown em um grupo de botões

Usuário

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Usuário</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Editar</a></li>
    <li><a href="#"><i class="icon-trash"></i> Apagar</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Tornar Administrador</a></li>
  </ul>
</div>

Botão pequeno

<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Navegação

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Início</a></li>
  <li><a href="#"><i class="icon-book"></i> Biblioteca</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Aplicações</a></li>
  <li><a href="#"><i class="i"></i> Outros</a></li>
</ul>

Campos de formulários

<div class="control-group">
  <label class="control-label" for="inputIcon">Endereço de email</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>

Tipografia

Cabeçalhos

h1. Cabeçalho 1

h2. Cabeçalho 2

h3. Cabeçalho 3

h4. Cabeçalho 4

h5. Cabeçalho 5

h6. Cabeçalho 6

cópia do corpo

cópia principal do corpo

Construído com o Less

Ênfase

<small>

Negrito

Itálicos

Classes de ênfase

Abreviações

<abbr>

<abbr class="initialism">

Endereços

<address>

Citações

Citação Padrão

Opções de citação

Nomeando uma fonte

Telas alternadas

Listas

Não ordenadas

Ordenadas

Não estilizadas

Inline

Descrição

Descrição horizontal

Código

Inline

Basic block

Tabelas

Estilos padrão

Classes opcionais

.table-striped

.table-ordered

.table-hover

.table-condensed

Classes opcionais de linha

Marcaçãod e tabela suportada

Formulários

Estilos padrão

Layout opcionais

Formulário de busca

Formulário inline

Formulário horizontal

Controles de formulário suportados

Inputs

Área de texto

Checkbox e radio

Padrão (estagnados)

checkboxes inline

Selects

Extendendo controle de formulários

inputs inseridos antes ou depois

Opções padrão

Combinados

Botões ao invés de texto

Dropdown de botões

Menus Dropdown segmentados

Formulário de busca

Controlar tamanho

Input em bloco

Tamanho relativo

Tamanho do grid

inputs não editáveis

Ações de formulários

Texto de ajuda

Ajuda inline

Ajuda em bloco

Estados de controle do formuário

Focus no input

Input inválido

Inputs desabilitados

Estdos de validação

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-ordered`

`.table-hover`

`.table-condensed`