Títulos

<h1>Todos os cabeçalhos HTML <h6>estão disponíveis.

h1. Cabeçallho 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5

h6. Título 6

Cópia do corpo

O padrão global do Bootstrap font-sizeé 14px , com um line-heightde 20px . Isso se aplica ao <body>e a todos os parágrafos. Além disso, <p>(parágrafos) recebem uma margem inferior de metade da altura da linha (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.

Mecenas 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 do corpo do lead

Faça um parágrafo se destacar adicionando .lead.

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

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

Construído com menos

A escala tipográfica é baseada em duas variáveis LESS em 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 algumas matemáticas simples para criar as margens, preenchimentos e alturas de linha de todos os nossos tipos e muito mais. Personalize-os e o Bootstrap se adapta.

Ênfase

Faça uso das tags de ênfase padrão do HTML com estilos leves.

`<small>`

Para enfatizar inline ou blocos de texto, use a tag pequena.

Esta linha de texto deve ser tratada como letras miúdas.

<p> <small> Esta linha de texto deve ser tratada como letras miúdas. </pequeno> </p>

Audacioso

Para enfatizar um trecho de texto com um peso de fonte mais pesado.

O trecho de texto a seguir é renderizado como texto em negrito .

<strong> renderizado como texto em negrito </strong>

Itálico

Para enfatizar um trecho de texto com itálico.

O trecho de texto a seguir é renderizado como texto em itálico .

<em> renderizado como texto em itálico </em>

Atenção!Sinta-se livre para usar <b>e <i>em HTML5. <b>destina-se a destacar palavras ou frases sem transmitir importância adicional, enquanto <i>é principalmente para voz, termos técnicos, etc.

Aulas de alinhamento

Realinhe facilmente o texto aos componentes com classes de alinhamento de texto.

Texto alinhado à esquerda.

Texto alinhado ao centro.

Texto alinhado à direita.

<p class = "text-left" > Texto alinhado à esquerda. </p> 
<p class = "text-center" > Texto alinhado ao centro. </p> 
<p class = "text-right" > Texto alinhado à direita. </p>

Aulas de ênfase

Transmita significado através da cor com um punhado de classes de utilidade de ênfase.

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

Etiam porta sem maleuada 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 = "silenciado" > Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem maleuada 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 comodo luctus, nisi erat portttitor ligula. </p>

Abreviaturas

Implementação estilizada do <abbr>elemento HTML para abreviaturas e siglas para mostrar a versão expandida ao passar o mouse. As abreviações com um titleatributo têm uma borda inferior pontilhada clara e um cursor de ajuda ao passar o mouse, fornecendo contexto adicional ao passar o mouse.

`<abbr>`

Para texto expandido em foco longo de uma abreviação, inclua o titleatributo.

Uma abreviação da palavra atributo é attr .

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

`<abbr class="initialism">`

Adicione .initialisma uma abreviação para um tamanho de fonte um pouco menor.

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

<abbr title = "Linguagem de marcação de hipertexto" class = "inicialismo" > HTML </abbr>

Endereços

Apresente as informações de contato do antepassado mais próximo ou de todo o trabalho.

`<address>`

Preserve a formatação terminando todas as linhas com <br>.

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

Nome completo
[email protected]

<endereço>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suíte 600 <br>
  São Francisco, CA 94107 <br>
  <abbr title = "Telefone" > P: </abbr> (123) 456-7890 
</endereço>
 
<endereço>
  <strong> Nome Completo </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</endereço>

Citações em bloco

Para citar blocos de conteúdo de outra fonte em seu documento.

Citação de bloco padrão

Envolva <blockquote>qualquer HTML como a citação. Para cotações diretas, recomendamos um <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 em bloco

Mudanças de estilo e conteúdo para variações simples em um blockquote padrão.

Nomeando uma fonte

Adicionar <small>tag para identificar a origem. Envolva o nome do trabalho de origem em <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguém famoso em Source Title

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

Exibições alternativas

Use .pull-rightpara uma citação de bloco flutuante e alinhada à direita.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguém famoso em Source Title

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

Listas

Não ordenado

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

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

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

Encomendado

Uma lista de itens em que a ordem importa explicitamente.

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

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

Sem estilo

Remova o preenchimento padrão list-stylee à esquerda nos itens da lista (somente filhos imediatos).

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

<ul class = "sem estilo" > 
  <li> ... </li>
</ul>

Em linha

Coloque todos os itens da lista em uma única linha com inline-blockum leve preenchimento.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Descrição

Uma lista de termos com suas descrições associadas.

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.

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

Descrição horizontal

Faça termos e descrições <dl>alinhados lado a lado.

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.

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

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, <section>deve ser encapsulado como embutido.

Por exemplo , <code> & lt ; section & gt ;</ 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>

Atenção!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.

Estilos padrão

Para um estilo básico - preenchimento leve e apenas divisores horizontais - adicione a classe base .tablea qualquer arquivo <table>.

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

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

Aulas opcionais

Adicione qualquer uma das seguintes classes à .tableclasse base.

`.table-striped`

Adiciona zebra-striping a qualquer linha da tabela <tbody>através do :nth-childseletor CSS (não disponível no IE7-8).

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

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

`.table-bordered`

Adicione bordas e cantos arredondados à tabela.

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

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

`.table-hover`

Habilite um estado de foco nas linhas da tabela em um arquivo <tbody>.

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

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

`.table-condensed`

Torna as mesas mais compactas cortando o preenchimento das células pela metade.

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

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

Classes de linha opcionais

Use classes contextuais para colorir as linhas da tabela.

Classe	Descrição
`.success`	Indica uma ação bem-sucedida ou positiva.
`.error`	Indica uma ação perigosa ou potencialmente negativa.
`.warning`	Indica um aviso que pode precisar de atenção.
`.info`	Usado como uma alternativa aos estilos padrão.

#	produtos	Pagamento realizado	Status
1	TB - Mensal	01/04/2012	Aprovado
2	TB - Mensal	02/04/2012	Recusado
3	TB - Mensal	03/04/2012	Pendente
4	TB - Mensal	04/04/2012	Ligue para confirmar

...
  < tr classe = "sucesso" >
    <td> 1 < /td>
    <td>TB - Mensal</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Aprovado</ td >
  </ tr >
...

Marcação de tabela compatível

Lista de elementos HTML de tabela suportados e como eles devem ser usados.

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)
`<caption>`	Descrição ou resumo do que a tabela contém, especialmente útil para leitores de tela

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

Estilos padrão

Os controles de formulário individuais recebem estilo, mas sem nenhuma classe base necessária <form>ou grandes alterações na marcação. Resulta em rótulos empilhados e alinhados à esquerda na parte superior dos controles de formulário.

<formulário>
  <fieldset>
    <legend> Legenda </legend>
    <label> Nome do rótulo </label>
    <input type = "texto" 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>  
  </fieldset>
</form>

Layouts opcionais

Incluídos no Bootstrap estão três layouts de formulário opcionais para casos de uso comuns.

Formulário de pesquisa

Adicione .form-searchao formulário e .search-queryao <input>para uma entrada de texto extra-arredondada.

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

Formulário embutido

Adicione .form-inlinepara rótulos alinhados à esquerda e controles de bloco em linha para um layout compacto.

<form class = "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>

Forma horizontal

Alinhe os rótulos à direita e flutue-os para a esquerda para fazê-los aparecer na mesma linha dos controles. Requer a maioria das alterações de marcação de um formulário padrão:

Adicionar .form-horizontalao formulário
Embrulhe rótulos e controles em.control-group
Adicionar .control-labelao rótulo
Envolva todos os controles associados .controlspara alinhamento adequado

<form class = "form-horizontal" > 
  <div class = "grupo de controle" > 
    <label class = "control-label" for = "inputEmail" > E- mail </label>  
    <div class = "controles" > 
      <input type = "texto" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "grupo de controle" > 
    <label class = "control-label" for = "inputPassword" > Senha </label>  
    <div class = "controles" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "grupo de controle" > 
    <div class = "controles" > 
      < classe de etiqueta = "caixa de seleção" > 
        <input type = "checkbox" > Lembrar de mim 
      </label>
      <button type = "submit" class = "btn" > Entrar </button>  
    </div>
  </div>
</form>

Controles de formulário compatíveis

Exemplos de controles de formulário padrão suportados em um layout de formulário de exemplo.

Entradas

Controle de formulário mais comum, campos de entrada baseados em texto. Inclui suporte para todos os tipos de HTML5: texto, senha, datetime, datetime-local, date, month, time, week, number, email, url, search, tel e color.

Requer o uso de um especificado typeem todos os momentos.

<input type = "texto" placeholder = "Inserção de texto" >

Área de texto

Controle de formulário que suporta várias linhas de texto. Altere rowso atributo conforme necessário.

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

Caixas de seleção e rádios

As caixas de seleção são para selecionar uma ou várias opções em uma lista, enquanto os rádios são para selecionar uma opção entre muitas.

Padrão (empilhado)

< classe de etiqueta = "caixa de seleção" > 
  < tipo de entrada = "caixa de seleção" valor = "" >  
  A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo
</label>
 
< classe de etiqueta = "rádio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" marcada >     
  A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo
</label>
< classe de etiqueta = "rádio" > 
  < tipo de entrada = "radio" nome = "optionsRadios" id = "optionsRadios2" valor = "option2" >    
  A opção dois pode ser outra coisa e selecioná-la irá desmarcar a opção um
</label>

Caixas de seleção embutidas

Adicione a .inlineclasse a uma série de caixas de seleção ou rádios para que os controles apareçam 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>

Selecione% s

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

<selecione>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<selecione vários = "múltiplos" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Estendendo controles de formulário

Adicionando os controles existentes do navegador, o Bootstrap inclui outros componentes de formulário úteis.

Entradas pré-anexadas e anexadas

Adicione texto ou botões antes ou depois de qualquer entrada baseada em texto. Observe que selectos elementos não são suportados aqui.

Opções padrão

Envolva an .add-one an inputcom uma das duas classes para preceder ou anexar texto a uma entrada.

<div class = "input-prepend" > 
  <span class = "complemento" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "texto" placeholder = "Nome de usuário" >    
</div>
<div class = "input-append" > 
  < classe de entrada = "span2" id = "appendedInput" type = "texto" >   
  <span class = "complemento" > 0,00 </span> 
</div>

Combinado

Use ambas as classes e duas instâncias de .add-onpara preceder e anexar uma entrada.

<div class = "input-prepend input-append" > 
  <span class = "complemento" > $ </span> 
  < classe de entrada = "span2" id = "appendedPrependedInput" type = "texto" >   
  <span class = "complemento" > 0,00 </span> 
</div>

Botões em vez de texto

Em vez de um <span>com texto, use a .btnpara anexar um botão (ou dois) a uma entrada.

<div class = "input-append" > 
  < classe de entrada = "span2" id = "appendedInputButton" type = "texto" >   
  <button class = "btn" type = "button" > Vá! </button>  
</div>

<div class = "input-append" > 
  < classe de entrada = "span2" id = "appendedInputButtons" type = "texto" >   
  <button class = "btn" type = "button" > Pesquisar </button>  
  <button class = "btn" type = "button" > Opções </button>  
</div>

Menus suspensos de botões

<div class = "input-append" > 
  < classe de entrada = "span2" id = "appendedDropdownButton" type = "texto" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Ação
      <span class = "caret" ></span> 
    </button>
    <ul class = "menu suspenso" > 
      ...
    </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 = "menu suspenso" > 
      ...
    </ul>
  </div>
  < classe de entrada = "span2" id = "prependedDropdownButton" type = "texto" >   
</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 = "menu suspenso" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "texto" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Ação
      <span class = "caret" ></span> 
    </button>
    <ul class = "menu suspenso" > 
      ...
    </ul>
  </div>
</div>

Grupos suspensos segmentados

<formulário>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < tipo de entrada = "texto" > 
  </div>
  <div class = "input-append" > 
    < tipo de entrada = "texto" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Formulário de pesquisa

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

Dimensionamento de controle

Use classes de dimensionamento relativas como .input-largeou combine suas entradas com os tamanhos das colunas da grade usando .span*classes.

Entradas de nível de bloco

Faça qualquer elemento <input>ou <textarea>se comportar como um elemento de nível de bloco.

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

Dimensionamento relativo

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

Atenção!Em versões futuras, alteraremos o uso dessas classes de entrada relativas para corresponder aos tamanhos de nossos botões. Por exemplo, .input-largeaumentará o preenchimento e o tamanho da fonte de uma entrada.

Dimensionamento da grade

Use .span1to .span12para entradas que correspondam aos mesmos tamanhos das colunas da grade.

<input class = "span1" type = "texto" placeholder = ".span1" >   
<input class = "span2" type = "texto" placeholder = ".span2" >   
<input class = "span3" type = "texto" placeholder = ".span3" >   
<selecione a classe = "span1" > 
  ...
</select>
<selecione a classe = "span2" > 
  ...
</select>
<selecione a classe = "span3" > 
  ...
</select>

Para várias entradas de grade por linha, use a .controls-rowclasse modificadora para espaçamento adequado . Ele flutua as entradas para recolher o espaço em branco, define as margens apropriadas e limpa o float.

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

Entradas não editáveis

Apresente dados em um formulário que não seja editável sem usar a marcação de formulário real.

<span class = "input-xlarge uneditable-input" > Algum valor aqui </span>

Ações do formulário

Finalize um formulário com um grupo de ações (botões). Quando colocados dentro de um .form-actions, os botões serão recuados automaticamente para alinhar com os controles do formulário.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Salvar alterações </button>  
  <button type = "button" class = "btn" > Cancelar </button>  
</div>

Texto de ajuda

Suporte em nível de bloco e em linha para texto de ajuda que aparece em torno de controles de formulário.

Ajuda em linha

<input type = "texto" ><span class = "help-inline" > Texto de ajuda embutido </span>

Bloquear ajuda

<input type = "texto" ><span class = "help-block" > Um bloco mais longo de texto de ajuda que quebra em uma nova linha e pode se estender além de uma linha. </span>

Estados de controle de formulário

Forneça feedback aos usuários ou visitantes com estados básicos de feedback sobre controles e rótulos de formulário.

Foco de entrada

Removemos os outlineestilos padrão em alguns controles de formulário e aplicamos a box-shadowem seu lugar para :focus.

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

Entradas inválidas

Estilize entradas por meio da funcionalidade padrão do navegador com :invalid. Especifique um type, adicione o requiredatributo se o campo não for opcional e (se aplicável) especifique um pattern.

Isso não está disponível nas versões do Internet Explorer 7-9 devido à falta de suporte para pseudosseletores CSS.

< classe de entrada = "span3" type = "email" obrigatório >

Entradas desativadas

Adicione o disabledatributo em uma entrada para impedir a entrada do usuário e acionar uma aparência ligeiramente diferente.

<input class = "input-xlarge" id = "disabledInput" type = "texto" placeholder = "Entrada desabilitada aqui..." desabilitada >

Estados de validação

Bootstrap inclui estilos de validação para mensagens de erro, aviso, informação e sucesso. Para usar, adicione a classe apropriada ao .control-group.

<div class = "aviso do grupo de controle" > 
  <label class = "control-label" for = "inputWarning" > Entrada com aviso </label>  
  <div class = "controles" > 
    <input type = "texto" id = "inputWarning" >  
    <span class = "help-inline" > Algo pode ter dado errado </span> 
  </div>
</div>
 
<div class = "erro do grupo de controle" > 
  <label class = "control-label" for = "inputError" > Entrada com erro </label>  
  <div class = "controles" > 
    <input type = "texto" id = "inputError" >  
    <span class = "help-inline" > Corrija o erro </span> 
  </div>
</div>
 
<div class = "informações do grupo de controle" > 
  <label class = "control-label" for = "inputInfo" > Insira com informações </label>  
  <div class = "controles" > 
    <input type = "texto" id = "inputInfo" >  
    <span class = "help-inline" > O nome de usuário já foi usado </span> 
  </div>
</div>
 
<div class = "sucesso do grupo de controle" > 
  <label class = "control-label" for = "inputSuccess" > Entrada com sucesso </label>  
  <div class = "controles" > 
    <input type = "texto" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Botões padrão

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>para obter a melhor renderização.

Botão	classe=""	Descrição
	`btn`	Botão cinza padrão com gradiente
	`btn btn-primary`	Fornece peso visual extra e identifica a ação principal em um conjunto de botões
	`btn btn-info`	Usado como uma alternativa aos estilos padrão
	`btn btn-success`	Indica uma ação bem-sucedida ou positiva
	`btn btn-warning`	Indica que deve ser tomado cuidado com esta ação
	`btn btn-danger`	Indica uma ação perigosa ou potencialmente negativa
	`btn btn-inverse`	Botão cinza escuro alternativo, não vinculado a uma ação ou uso semântico
	`btn btn-link`	Desenfatize um botão fazendo com que pareça um link enquanto mantém o comportamento do botão

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.

Tamanhos dos botões

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

<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" > Botão padrão </button>  
  <button class = "btn" type = "button" > Botão padrã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" > Minibotão </button>  
  <button class = "btn btn-mini" type = "button" > Minibotão </button>  
</p>

Crie botões de nível de bloco — aqueles que abrangem toda a largura de um pai — adicionando .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Botão de nível de bloco </button>  
<button class = "btn btn-large btn-block" type = "button" > Botão de nível de bloco </button>

Estado desativado

Faça com que os botões pareçam inacessíveis reduzindo-os em 50%.

Elemento âncora

Adicione a .disabledclasse aos <a>botões.

Link principal Link

<a href = "#" class = "btn btn-large btn-primary desativado" > Link principal </a>  
<a href = "#" class = "btn btn-large desativado" > Link </a>

Atenção!Usamos .disabledcomo uma classe utilitária aqui, semelhante à .activeclasse comum, portanto, nenhum prefixo é necessário. Além disso, esta classe é apenas para estética; você deve usar JavaScript personalizado para desabilitar links aqui.

Elemento de botão

Adicione o disabledatributo aos <button>botões.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Botão principal </button>   
<button type = "button" class = "btn btn-large" desabilitado > Botão </button>

Uma aula, várias tags

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

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "enviar" > 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.

Adicione classes a um <img>elemento para estilizar facilmente imagens em qualquer projeto.

<img src = "..." class = "img-arredondado" >  
<img src = "..." class = "img-círculo" >  
<img src = "..." class = "img-polaroid" >

Atenção! .img-roundede .img-circlenão funcionam no IE7-8 por falta de border-radiussuporte.

Glifos de ícones

140 ícones em forma de sprite, disponíveis em cinza escuro (padrão) e branco, fornecidos pela Glyphicons .

í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

Atribuição de Glyphicons

Glyphicons Halflings normalmente não estão disponíveis gratuitamente, mas um acordo entre o Bootstrap e os criadores de Glyphicons tornou isso possível sem nenhum custo para vocês como desenvolvedores. Como agradecimento, pedimos que você inclua um link opcional para Glyphicons sempre que possível.

Como usar

Todos os ícones requerem uma <i>tag com uma classe única, prefixada com icon-. 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. Vamos aplicar especificamente essa classe em estados de foco e ativos para links de navegação e dropdown.

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

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.

Exemplos de ícones

Use-os em botões, grupos de botões para uma barra de ferramentas, navegação ou entradas de formulário pré-anexadas.

Botões

Grupo de botões em uma barra de ferramentas 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>

Lista suspensa em um grupo de botões

Do utilizador

<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 = "menu suspenso" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Editar </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Excluir </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Banir </a></li>  
    <li class = "divisor" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Tornar administrador </a></li>  
  </ul>
</div>

Tamanhos dos botões

Estrela Estrela Estrela

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

Navegação

<ul class = "nav nav-list" > 
  <li class = "ativo" ><a href = "#" ><i class = "icon-home icon-white" ></i> Página inicial </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Biblioteca </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Candidaturas </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Diversos </a></li>  
</ul>

Campos de formulário

<div class = "grupo de controle" > 
  <label class = "control-label" for = "inputIcon" > Endereço de e-mail </label>  
  <div class = "controles" > 
    <div class = "input-prepend" > 
      <span class = "complemento" ><i class = "icon-envelope" ></i></span>  
      < classe de entrada = "span2" id = "inputIcon" type = "texto" >   
    </div>
  </div>
</div>

Tipografia

Títulos

h1. Cabeçallho 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5

h6. Título 6

Cópia do corpo

Cópia do corpo do lead

Construído com menos

Ênfase

<small>

Audacioso

Itálico

Aulas de alinhamento

Aulas de ênfase

Abreviaturas

<abbr>

<abbr class="initialism">

Endereços

<address>

Citações em bloco

Citação de bloco padrão

Opções de citação em bloco

Nomeando uma fonte

Exibições alternativas

Listas

Não ordenado

Encomendado

Sem estilo

Em linha

Descrição

Descrição horizontal

Código

Em linha

Bloco básico

Tabelas

Estilos padrão

Aulas opcionais

.table-striped

.table-bordered

.table-hover

.table-condensed

Classes de linha opcionais

Marcação de tabela compatível

Formulários

Estilos padrão

Layouts opcionais

Formulário de pesquisa

Formulário embutido

Forma horizontal

Controles de formulário compatíveis

Entradas

Área de texto

Caixas de seleção e rádios

Padrão (empilhado)

Caixas de seleção embutidas

Selecione% s

Estendendo controles de formulário

Entradas pré-anexadas e anexadas

Opções padrão

Combinado

Botões em vez de texto

Menus suspensos de botões

Grupos suspensos segmentados

Formulário de pesquisa

Dimensionamento de controle

Entradas de nível de bloco

Dimensionamento relativo

Dimensionamento da grade

Entradas não editáveis

Ações do formulário

Texto de ajuda

Ajuda em linha

Bloquear ajuda

Estados de controle de formulário

Foco de entrada

Entradas inválidas

Entradas desativadas

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`