Você está aqui:
  1. Home
  2. CSS

CSS

Visão Geral

Tipo de documento HTML5

<!DOCTYPE html>
<html lang="pt-br">
	...
</html>

Mobile first

<!-- Ativação do zoom no touch screen -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Ou desativação do zoom no touch screen -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tipografia e links

Escolhemos a cor de fundo no corpo body.

body {
	background-color: #ffffff;
}

Usamos os atributos das fontes para a nossa base tipográfica.

$font-family-sans-serif: "Roboto", sans-serif;
$font-family-serif: "Roboto", serif;
$font-family-monospace: "Lucida Console", monospace;

Escolhemos as cores globais de link e aplicado a linha abaixo do link com :hover.

$link-color: #032241;

Containers

.container

<div class="container">
	...
</div>

.container-fluid

<div class="container-fluid">
	...
</div>

Sistema de grid

Opções de grid

Celulares (<768px) Tablets (≥768px) Desktops (≥992px) Telas grandes (≥1200px)
Funcionamento de grid Horizontal em todos os momentos Quebra para começar à horizontal acima dos pontos de interrupção
Largura de container Nenhum (automático) 750px 970px 1170px
Prefixo classe .col-xs-* .col-sm-* .col-md-* .col-lg-*
Número de colunas 12
Largura da coluna Automático ~62px ~81px ~97px
Largura de calha 20px (10px em cada lado de uma coluna)
Nestable Sim
Offsets Sim
Coluna ordenação Sim

Exemplo: Pilhas horizontais

1

1

1

1

1

1

1

1

1

1

1

1

8

4

4

4

4

6

6

<div class="row">
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
	<div class="col-md-1">1</div>
</div>
<div class="row">
	<div class="col-md-8">8</div>
	<div class="col-md-4">4</div>
</div>
<div class="row">
	<div class="col-md-4">4</div>
	<div class="col-md-4">4</div>
	<div class="col-md-4">4ssss</div>
</div>
<div class="row">
	<div class="col-md-6">6</div>
	<div class="col-md-6">6</div>
</div>

Exemplo: Linhas

12

12

<div class="container-fulid">
	<div class="row">
		<div class="col-md-12">

		</div>
	</div>
	<div class="row">
		<div class="col-md-12">

		</div>
	</div>
</div>

Exemplo: Celular, tablet e desktop

12 12 12 6

6 6 8 4

6 4 4 6

6 4 4 6

6 4 4 6 

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12 col-md-8">
			
		</div>
		<div class="col-xs-6 col-md-4">
			
		</div>
	</div>
	<div class="row">
		<div class="col-xs-6 col-sm-4">
			
		</div>
		<div class="col-xs-6 col-sm-4">
			
		</div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6 col-sm-4">
			
		</div>
	</div>
</div>

Exemplo: Quebra de coluna

18

8

12

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-18">

		</div>
		<div class="col-xs-8">

		</div>
		<div class="col-xs-12">

		</div>
	</div>
</div>

Restabelecimentos do responsivo com coluna

12 6 6 6

12 6 6 6

12 6 6 6

12 6 6 6 

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12 col-sm-6">

		</div>
		<div class="col-xs-12 col-sm-6">

		</div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-12 col-sm-6">

		</div>
		<div class="col-xs-12 col-sm-6">

		</div>
	</div>
</div>

24 10 12 12

24 10 12 12

24 12 10 12

24 12 10 12 

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-10 col-md-12">

		</div>
		<div class="col-sm-10 col-sm-offset-4 col-md-12 col-md-offset-0">

		</div>
	</div>
	<div class="row">
		<div class="col-sm-12 col-md-10 col-lg-12">

		</div>
		<div class="col-sm-12 col-md-10 col-md-offset-4 col-lg-12 col-lg-offset-0">

		</div>
	</div>
</div>

Colunas de offset

24 24 4 4

24 24 4 4

24 24 3 3

24 24 3 3

24 24 6 6 

<div class="container-fluid">
	<div class="row">
		<div class="col-md-4">

		</div>
		<div class="col-md-4 col-md-offset-4">

		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-md-offset-3">

		</div>
		<div class="col-md-3 col-md-offset-3">

		</div>
	</div>
	<div class="row">
		<div class="col-md-6 col-md-offset-3">

		</div>
	</div>
</div>

Colunas de nesting

12 12 9 9
8 6 6 6
4 6 6 6

Tipografia

Cabeçalhos

Texto texto

Texto texto

Texto texto

Texto texto

Texto texto
Texto texto
<h1>Texto texto</h1>
<h2>Texto texto</h2>
<h3>Texto texto</h3>
<h4>Texto texto</h4>
<h5>Texto texto</h5>
<h6>Texto texto</h6>

Texto texto Texto texto

Texto texto Texto texto

Texto texto Texto texto

Texto texto Texto texto

Texto texto Texto texto
Texto texto Texto texto
<h1>Texto texto <small>Texto texto</small></h1>
<h2>Texto texto <small>Texto texto</small></h2>
<h3>Texto texto <small>Texto texto</small></h3>
<h4>Texto texto <small>Texto texto</small></h4>
<h5>Texto texto <small>Texto texto</small></h5>
<h6>Texto texto <small>Texto texto</small></h6>

Cópia do corpo

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>

Cópia principal do corpo

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

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

Elementos do texto em linha

Texto marcado

Texto texto texto texto texto texto texto texto texto texto texto texto.

<p>Texto texto texto texto texto texto texto texto texto texto <mark>texto texto</mark>.</p>

Texto excluído

Texto texto texto texto texto texto texto texto texto texto.

<p><del>Texto texto texto texto texto texto texto texto texto texto.</del></p>

Texto tachado

Texto texto texto texto texto texto texto texto texto texto texto.

<p><s>Texto texto texto texto texto texto texto texto texto texto texto.</s></p>

Texto inserido

Texto texto texto texto texto texto texto texto texto texto texto.

<p><ins>Texto texto texto texto texto texto texto texto texto texto texto.</ins></p>

Texto sublinhado

Texto texto texto texto texto texto texto texto texto texto texto.

<p><u>Texto texto texto texto texto texto texto texto texto texto texto.</u></p>

Texto pequeno

Texto texto texto texto texto texto texto texto texto texto texto.

<p><small>Texto texto texto texto texto texto texto texto texto texto texto.</small></p>

Negrito

Texto texto texto texto texto texto texto texto texto texto texto.

<p>Texto texto texto texto texto texto texto texto texto <strong>texto texto</strong>.</p>

Itálico

Texto texto texto texto texto texto texto texto texto texto texto.

<p>Texto texto texto texto texto texto texto texto texto <em>texto texto</em>.</p>

Classes de alinhamento

Texto texto.

Texto texto.

Texto texto.

Texto texto.

Texto texto.

<p class="text-left">Texto texto.</p>
<p class="text-center">Texto texto.</p>
<p class="text-right">Texto texto.</p>
<p class="text-justify">Texto texto.</p>
<p class="text-nowrap">Texto texto.</p>

Classes de transformação

Texto texto.

Texto texto.

Texto texto.

<p class="text-lowercase">Texto texto.</p>
<p class="text-uppercase">Texto texto.</p>
<p class="text-capitalize">Texto texto.</p>

Abreviações

Padrão

Texto texto texto texto texto texto txt.

<p>Texto texto texto texto texto texto <abbr title="texto">txt</abbr>.</p>

Inicialismo

HTML is the best thing since sliced bread.

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

Endereço

Texto, texto.
Texto texto texto, 123
Texto texto texto, 123
Tel.: (12) 1234-1234
Texto texto
texto.texto@texto.com.br 
<address>
	<strong>Texto, texto.</strong><br>
	Texto texto texto, 123<br>
	Texto texto texto, 123<br>
	<abbr title="Telefone">Tel.:</abbr> (12) 1234-1234
</address>
<address>
	<strong>Texto texto</strong><br>
	<a href="mailto:#">texto.texto@texto.com.br</a>
</address>

Citações

Padrão

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

<blockquote>
	<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
</blockquote>

Opções

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto Texto Texto
<blockquote>
	<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	<footer>Texto texto texto texto <cite title="Texto Texto">Texto Texto</cite></footer>
</blockquote>

Telas alternadas

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto Texto Texto
<blockquote class="blockquote-reverse">
	<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	<footer>Texto texto texto texto <cite title="Texto Texto">Texto Texto</cite></footer>
</blockquote>

Listas

Não ordenadas

  • Texto texto
  • Texto texto
  • Texto texto
  • Texto texto
  • Texto texto
    • Texto texto
    • Texto texto
    • Texto texto
    • Texto texto
  • Texto texto
  • Texto texto
  • Texto texto
<ul>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto
		<ul>
			<li>Texto texto</li>
			<li>Texto texto</li>
			<li>Texto texto</li>
			<li>Texto texto</li>
		</ul>
	</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
</ul>

Ordenadas

  1. Texto texto
  2. Texto texto
  3. Texto texto
  4. Texto texto
    1. Texto texto
    2. Texto texto
    3. Texto texto
  5. Texto texto
  6. Texto texto
  7. Texto texto
  8. Texto texto
<ol>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto
		<ol>
			<li>Texto texto</li>
			<li>Texto texto</li>
			<li>Texto texto</li>
		</ol>
	</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
	<li>Texto texto</li>
</ol>

Não estilizadas

  • Texto 1 texto 1
  • Texto 2 texto 2
  • Texto 3 texto 3
  • Texto 4 texto 4
  • Texto 5 texto 5
    • Texto 6 texto 6
    • Texto 7 texto 7
    • Texto 8 texto 8
    • Texto 9 texto 9
  • Texto 10 texto 10
  • Texto 11 texto 11
  • Texto 12 texto 12
<ul class="list-unstyled">
	<li>Texto 1 texto 1</li>
	<li>Texto 2 texto 2</li>
	<li>Texto 3 texto 3</li>
	<li>Texto 4 texto 4</li>
	<li>Texto 5 texto 5
		<ul>
			<li>Texto 6 texto 6</li>
			<li>Texto 7 texto 7</li>
			<li>Texto 8 texto 8</li>
			<li>Texto 9 texto 9</li>
		</ul>
	</li>
	<li>Texto 10 texto 10</li>
	<li>Texto 11 texto 11</li>
	<li>Texto 12 texto 12</li>
</ul>

Em linha

  • Texto 1 texto 1
  • Texto 2 texto 2
  • Texto 3 texto 3
<ul class="list-inline">
	<li>Texto 1 texto 1</li>
	<li>Texto 2 texto 2</li>
	<li>Texto 3 texto 3</li>
</ul>

Descrição

Texto 1 texto 1 texto 1
Texto 2 texto 2 texto 2
Texto 3 texto 3 texto 3
Texto 4 texto 4 texto 4
Texto 5 texto 5 texto 5
Texto 6 texto 6 texto 6
Texto 7 texto 7 texto 7
<dl>
	<dt>Texto 1 texto 1 texto 1</dt>
	<dd>Texto 2 texto 2 texto 2</dd>
	<dt>Texto 3 texto 3 texto 3</dt>
	<dd>Texto 4 texto 4 texto 4</dd>
	<dd>Texto 5 texto 5 texto 5</dd>
	<dt>Texto 6 texto 6 texto 6</dt>
	<dd>Texto 7 texto 7 texto 7</dd>
</dl>

Descrição horizontal

Texto 1 texto 1 texto 1
Texto 2 texto 2 texto 2
Texto 3 texto 3 texto 3
Texto 4 texto 4 texto 4
Texto 5 texto 5 texto 5
Texto 6 texto 6 texto 6
Texto 7 texto 7 texto 7
Texto 8 texto 8 texto 8
Texto 9 texto 9 texto 9
<dl class="dl-horizontal">
	<dt>Texto 1 texto 1 texto 1</dt>
	<dd>Texto 2 texto 2 texto 2</dd>
	<dt>Texto 3 texto 3 texto 3</dt>
	<dd>Texto 4 texto 4 texto 4</dd>
	<dd>Texto 5 texto 5 texto 5</dd>
	<dt>Texto 6 texto 6 texto 6</dt>
	<dd>Texto 7 texto 7 texto 7</dd>
	<dt>Texto 8 texto 8 texto 8</dt>
	<dd>Texto 9 texto 9 texto 9</dd>
</dl>

Código

Em linha

Texto <div></div> texto texto. 
Texto <code>&lt;div&gt;&lt;/div&gt;</code> texto texto.

Entrada do usuário

Texto texto cd texto texto.
Texto texto ctrl + , texto texto.
Texto texto <kbd>cd</kbd> texto texto.<br>
Texto texto <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> texto texto.<br>

Bloco básico

<p>Texto texto texto.</p>
<pre>&lt;p&gt;Texto texto texto.&lt;/p&gt;</pre>

Variáveis

y = mx + b

<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

Exemplo de saída

Texto texto texto texto texto texto texto texto texto texto texto.

<p><samp>Texto texto texto texto texto texto texto texto texto texto texto.</samp></p>

Tabelas

Padrão

Texto texto texto.
# Texto 1 Texto 2 Texto 3
1 Texto 1 Texto 1 Texto 1
2 Texto 2 Texto 2 Texto 2
3 Texto 3 Texto 3 Texto 3 
<table class="table">
	<caption>Texto texto texto.</caption>
	<thead>
		<tr>
			<th>#</th>
			<th>Texto 1</th>
			<th>Texto 2</th>
			<th>Texto 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Texto 1</td>
			<td>Texto 1</td>
			<td>Texto 1</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Texto 2</td>
			<td>Texto 2</td>
			<td>Texto 2</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Texto 3</td>
			<td>Texto 3</td>
			<td>Texto 3</td>
		</tr>
	</tbody>
</table>

Zebrada

# Texto 1 Texto 2 Texto 3
1 Texto 1 Texto 1 Texto 1
2 Texto 2 Texto 2 Texto 2
3 Texto 3 Texto 3 Texto 3 
<table class="table table-striped">
	<thead>
		<tr>
			<th>#</th>
			<th>Texto 1</th>
			<th>Texto 2</th>
			<th>Texto 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Texto 1</td>
			<td>Texto 1</td>
			<td>Texto 1</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Texto 2</td>
			<td>Texto 2</td>
			<td>Texto 2</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Texto 3</td>
			<td>Texto 3</td>
			<td>Texto 3</td>
		</tr>
	</tbody>
</table>

Com borda

# Texto 1 Texto 2 Texto 3
1 Texto 1 Texto 1 Texto 1
2 Texto 2 Texto 2 Texto 2
3 Texto 3 Texto 3 Texto 3 
<table class="table table-bordered">
	<thead>
		<tr>
			<th>#</th>
			<th>Texto 1</th>
			<th>Texto 2</th>
			<th>Texto 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Texto 1</td>
			<td>Texto 1</td>
			<td>Texto 1</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Texto 2</td>
			<td>Texto 2</td>
			<td>Texto 2</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Texto 3</td>
			<td>Texto 3</td>
			<td>Texto 3</td>
		</tr>
	</tbody>
</table>

Com hover

# Texto 1 Texto 2 Texto 3
1 Texto 1 Texto 1 Texto 1
2 Texto 2 Texto 2 Texto 2
3 Texto 3 Texto 3 Texto 3 
<table class="table table-hover">
	<thead>
		<tr>
			<th>#</th>
			<th>Texto 1</th>
			<th>Texto 2</th>
			<th>Texto 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Texto 1</td>
			<td>Texto 1</td>
			<td>Texto 1</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Texto 2</td>
			<td>Texto 2</td>
			<td>Texto 2</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Texto 3</td>
			<td>Texto 3</td>
			<td>Texto 3</td>
		</tr>
	</tbody>
</table>

Condensada

# Texto 1 Texto 2 Texto 3
1 Texto 1 Texto 1 Texto 1
2 Texto 2 Texto 2 Texto 2
3 Texto 3 Texto 3 Texto 3 
<table class="table table-condensed">
	<thead>
		<tr>
			<th>#</th>
			<th>Texto 1</th>
			<th>Texto 2</th>
			<th>Texto 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Texto 1</td>
			<td>Texto 1</td>
			<td>Texto 1</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Texto 2</td>
			<td>Texto 2</td>
			<td>Texto 2</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Texto 3</td>
			<td>Texto 3</td>
			<td>Texto 3</td>
		</tr>
	</tbody>
</table>

Classes contextuais

# Texto 1 Texto 2 Texto 3 Texto 4 Texto 5
1 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5
2 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5
3 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5
4 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5
5 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5
6 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 
<table class="table">
	<thead>
		<tr>
			<th>#</th>
			<th>Texto 1</th>
			<th>Texto 2</th>
			<th>Texto 3</th>
			<th>Texto 4</th>
			<th>Texto 5</th>
		</tr>
	</thead>
	<tbody>
		<tr class="active">
			<th scope="row">1</th>
			<td>Texto 1</td>
			<td>Texto 2</td>
			<td>Texto 3</td>
			<td>Texto 4</td>
			<td>Texto 5</td>
		</tr>
		<tr class="success">
			<th scope="row">2</th>
			<td>Texto 1</td>
			<td>Texto 2</td>
			<td>Texto 3</td>
			<td>Texto 4</td>
			<td>Texto 5</td>
		</tr>
		<tr class="info">
			<th scope="row">3</th>
			<td>Texto 1</td>
			<td>Texto 2</td>
			<td>Texto 3</td>
			<td>Texto 4</td>
			<td>Texto 5</td>
		</tr>
		<tr class="warning">
			<th scope="row">4</th>
			<td>Texto 1</td>
			<td>Texto 2</td>
			<td>Texto 3</td>
			<td>Texto 4</td>
			<td>Texto 5</td>
		</tr>
		<tr class="danger">
			<th scope="row">5</th>
			<td>Texto 1</td>
			<td>Texto 2</td>
			<td>Texto 3</td>
			<td>Texto 4</td>
			<td>Texto 5</td>
		</tr>
		<tr>
			<th scope="row">6</th>
			<td class="active">Texto 1</td>
			<td class="success">Texto 2</td>
			<td class="info">Texto 3</td>
			<td class="warning">Texto 4</td>
			<td class="danger">Texto 5</td>
		</tr>
	</tbody>
</table>

Responsiva

# Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6
1 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6
2 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6
3 Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6 
<div class="table-responsive">
	<table class="table">
		<thead>
			<tr>
				<th>#</th>
				<th>Texto 1</th>
				<th>Texto 2</th>
				<th>Texto 3</th>
				<th>Texto 4</th>
				<th>Texto 5</th>
				<th>Texto 6</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">1</th>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
				<td>Texto 4</td>
				<td>Texto 5</td>
				<td>Texto 6</td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
				<td>Texto 4</td>
				<td>Texto 5</td>
				<td>Texto 6</td>
			</tr>
			<tr>
				<th scope="row">3</th>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
				<td>Texto 4</td>
				<td>Texto 5</td>
				<td>Texto 6</td>
			</tr>
		</tbody>
	</table>
</div>

Formulários

Padrão

Texto 3 texto 3 texto 3

<form>
	<div class="form-group">
		<label for="texto-um">Texto 1</label>
		<input type="email" class="form-control" id="texto-um" placeholder="Texto 1">
	</div>
	<div class="form-group">
		<label for="texto-dois">Texto 2</label>
		<input type="password" class="form-control" id="texto-dois" placeholder="Texto 2">
	</div>
	<div class="form-group">
		<label for="texto-tres">Texto 3</label>
		<input type="file" id="texto-tres">
		<p class="help-block">Texto 3 texto 3 texto 3</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Texto 4
		</label>
	</div>
	<button type="submit" class="btn btn-default">Texto 5</button>
</form>

Formulário em linha

<form class="form-inline">
	<div class="form-group">
		<label for="texto-linha-um">Texto 1</label>
		<input type="text" class="form-control" id="texto-linha-um" placeholder="Texto 1">
	</div>
	<div class="form-group">
		<label for="texto-linha-dois">Texto 2</label>
		<input type="email" class="form-control" id="texto-linha-dois" placeholder="Texto 2">
	</div>
	<button type="submit" class="btn btn-default">Texto 3</button>
</form>
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="texto-linha-tres">Texto 3</label>
		<input type="email" class="form-control" id="texto-linha-tres" placeholder="Texto 3">
	</div>
	<div class="form-group">
		<label class="sr-only" for="texto-linha-quatro">Texto 4</label>
		<input type="password" class="form-control" id="texto-linha-quatro" placeholder="Texto 4">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Texto 5
		</label>
	</div>
	<button type="submit" class="btn btn-default">Texto 6</button>
</form>
Texto 8
Texto 10
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="texto-linha-sete">Texto 7</label>
		<div class="input-group">
			<div class="input-group-addon">Texto 8</div>
			<input type="text" class="form-control" id="texto-linha-sete" placeholder="Texto 9">
			<div class="input-group-addon">Texto 10</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Texto 11</button>
</form>

Formulário horizontal

<form class="form-horizontal">
	<div class="form-group">
		<label for="texto-horizontal-um" class="col-sm-4 control-label">Texto 1</label>
		<div class="col-sm-20">
			<input type="email" class="form-control" id="texto-horizontal-um" placeholder="Texto 1">
		</div>
	</div>
	<div class="form-group">
		<label for="texto-horizontal-dois" class="col-sm-4 control-label">Texto 2</label>
		<div class="col-sm-20">
			<input type="password" class="form-control" id="texto-horizontal-dois" placeholder="Texto 2">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-4 col-sm-20">
			<div class="checkbox">
				<label>
					<input type="checkbox"> Texto 3
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-4 col-sm-20">
			<button type="submit" class="btn btn-default">Texto 4</button>
		</div>
	</div>
</form>

Controles de formulário suportados

Inputs

<input type="text" class="form-control" placeholder="Text input">

Área de texto

<textarea class="form-control" rows="3"></textarea>

Checkboxes

<form>
	<div class="checkbox">
		<label>
			<input type="checkbox" value="">
			Texto 1 texto 1
		</label>
	</div>
	<div class="checkbox disabled">
		<label>
			<input type="checkbox" value="" disabled>
			Texto 2 texto 2
		</label>
	</div>
</form>

Radios

<form>
	<div class="radio">
		<label>
			<input type="radio" name="opcoes" id="texto-opcao-um" value="Primeira opção" checked>
			Texto 1 texto 1
		</label>
	</div>
	<div class="radio">
		<label>
			<input type="radio" name="opcoes" id="texto-opcao-dois" value="Segunda opção">
			Texto 2 texto 2
		</label>
	</div>
	<div class="radio disabled">
		<label>
			<input type="radio" name="opcoes" id="texto-opcao-tres" value="Três opção" disabled>
			Texto 3 texto 3
		</label>
	</div>
</form>

Checkboxes em linha

<form>
	<label class="checkbox-inline">
		<input type="checkbox" id="texto-checkbox-inline-um" value="Primeira opção"> 1
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="texto-checkbox-inline-dois" value="Segunda opção"> 2
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="texto-checkbox-inline-tres" value="Terceira opção"> 3
	</label>
</form>

Radios em linha

<form>
	<label class="radio-inline">
		<input type="radio" name="opcoes-radio-inline" id="texto-radio-inline-um" value="Segunda opção"> 1
	</label>
	<label class="radio-inline">
		<input type="radio" name="opcoes-radio-inline" id="texto-radio-inline-dois" value="Primeira opção"> 2
	</label>
	<label class="radio-inline">
		<input type="radio" name="opcoes-radio-inline" id="texto-radio-inline-tres" value="Terceira opção"> 3
	</label>
</form>

Checkboxes sem texto

<form>
	<div class="checkbox">
		<label>
			<input type="checkbox" id="checkbox-sem-texto" value="Primeira opção" aria-label="Checkbox sem texto">
		</label>
	</div>
</form>

Radios sem texto

<form>
	<div class="radio">
		<label>
			<input type="radio" name="radio-sem-texto" id="radio-sem-texto-um" value="Primeira opção" aria-label="Radio sem texto">
		</label>
	</div>
</form>

Seleções

<select class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>
<select multiple class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

Controle estático

Texto texto

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label">Texto</label>
		<div class="col-sm-10">
			<p class="form-control-static">Texto texto</p>
		</div>
	</div>
	<div class="form-group">
		<label for="input-static-texto" class="col-sm-2 control-label">Texto</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="input-static-texto" placeholder="Texto">
		</div>
	</div>
</form>

Texto texto

<form class="form-inline">
	<div class="form-group">
		<label class="sr-only">Texto</label>
		<p class="form-control-static">Texto texto</p>
	</div>
	<div class="form-group">
		<label for="input-static-texto-inline" class="sr-only">Texto</label>
		<input type="password" class="form-control" id="input-static-texto-inline" placeholder="Texto">
	</div>
	<button type="submit" class="btn btn-default">Texto</button>
</form>

Estado de foco

<form>
	<input class="form-control" id="input-focus-texto" type="text" value="Texto">
</form>

Estado desativado

<form>
	<input class="form-control" id="input-disabled-texto" type="text" placeholder="Texto" disabled>
</form>

Fieldsets desativados

<form>
	<fieldset disabled>
		<div class="form-group">
			<label for="input-fieldset-disabled-texto-um">Texto 1</label>
			<input type="text" id="input-fieldset-disabled-texto-um" class="form-control" placeholder="Texto 1">
		</div>
		<div class="form-group">
			<label for="input-fieldset-disabled-texto-dois">Texto 2</label>
			<select id="input-fieldset-disabled-texto-dois" class="form-control">
				<option>Texto 3</option>
			</select>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox"> Texto 4
			</label>
		</div>
		<button type="submit" class="btn btn-primary">Texto 5</button>
	</fieldset>
</form>

Estado somente leitura

<form>
	<input class="form-control" type="text" placeholder="Texto" readonly>
</form>

Estados de validação

<form>
	<div class="form-group has-success">
		<label class="control-label" for="input-success">Texto 1</label>
		<input type="text" class="form-control" id="input-success">
	</div>
	<div class="form-group has-warning">
		<label class="control-label" for="input-warning">Texto 2</label>
		<input type="text" class="form-control" id="input-warning">
	</div>
	<div class="form-group has-error">
		<label class="control-label" for="input-error">Texto 3</label>
		<input type="text" class="form-control" id="input-error">
	</div>
	<div class="has-success">
		<div class="checkbox">
			<label>
				<input type="checkbox" id="checkbox-success" value="Primeira opção">
				Texto 1
			</label>
		</div>
	</div>
	<div class="has-warning">
		<div class="checkbox">
			<label>
				<input type="checkbox" id="checkbox-warning" value="Segunda opção">
				Texto 2
			</label>
		</div>
	</div>
	<div class="has-error">
		<div class="checkbox">
			<label>
				<input type="checkbox" id="checkbox-error" value="Terceira opção">
				Texto 3
			</label>
		</div>
	</div>
</form>

Controle de tamanho

Tamanho de altura

<form>
	<input class="form-control input-lg" type="text" placeholder=".input-lg">
	<input type="text" class="form-control" placeholder="input padrão">
	<input class="form-control input-sm" type="text" placeholder=".input-sm">
	<select class="form-control input-lg">
		<option value="">.input-lg</option>
	</select>
	<select class="form-control">
		<option value="">select padrão</option>
	</select>
	<select class="form-control input-sm">
		<option value="">.input-sm</option>
	</select>
</form>

Horizontal para o tamanho de grupos

<form class="form-horizontal">
	<div class="form-group form-group-lg">
		<label class="col-sm-2 control-label" for="input-grupo-grande">Texto texto</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="input-grupo-grande" placeholder="Input grande">
		</div>
	</div>
	<div class="form-group form-group-sm">
		<label class="col-sm-2 control-label" for="input-grupo-pequeno">Texto texto</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="input-grupo-pequeno" placeholder="Input pequeno">
		</div>
	</div>
</form>

Tamanho de coluna

<form>
	<div class="row">
		<div class="col-xs-3">
			<input type="text" class="form-control" placeholder=".col-xs-3">
		</div>
		<div class="col-xs-9">
			<input type="text" class="form-control" placeholder=".col-xs-9">
		</div>
		<div class="col-xs-12">
			<input type="text" class="form-control" placeholder=".col-xs-12">
		</div>
	</div>
</form>

Texto de ajuda

Texto texto texto texto texto texto texto texto texto texto texto texto. 
<form>
	<div class="form-group">
		<label for="input-texto-ajuda">Texto texto</label>
		<input type="text" id="input-texto-ajuda" class="form-control" aria-describedby="texto-ajuda">
	</div>
	<span id="texto-ajuda" class="help-block">Texto texto texto texto texto texto texto texto texto texto texto texto.</span>
</form>

Botões

Tags

Link 
<form>
	<a class="Pbtn btn-default" href="javascript:void(0);" role="button">Link</a>
	<button class="btn btn-default" type="submit">Botão</button>
	<input class="btn btn-default" type="button" value="Input">
	<input class="btn btn-default" type="submit" value="Enviar">
</form>

Opções

<button type="button" class="btn btn-default">Texto 1</button>
<button type="button" class="btn btn-primary">Texto 2</button>
<button type="button" class="btn btn-success">Texto 3</button>
<button type="button" class="btn btn-info">Texto 4</button>
<button type="button" class="btn btn-warning">Texto 5</button>
<button type="button" class="btn btn-danger">Texto 6</button>
<button type="button" class="btn btn-link">Texto 7</button>

Tamanhos

<p>
	<button type="button" class="btn btn-primary btn-lg">Grande</button>
	<button type="button" class="btn btn-default btn-lg">Grande</button>
</p>
<p>
	<button type="button" class="btn btn-primary">Padrão</button>
	<button type="button" class="btn btn-default">Padrão</button>
</p>
<p>
	<button type="button" class="btn btn-primary btn-sm">Pequeno</button>
	<button type="button" class="btn btn-default btn-sm">Pequeno</button>
</p>
<p>
	<button type="button" class="btn btn-primary btn-xs">Muito Pequeno</button>
	<button type="button" class="btn btn-default btn-xs">Muito Pequeno</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Texto 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">Texto 2</button>

Estado ativo

Elemento de botão

<button type="button" class="btn btn-primary btn-lg active">Texto 1</button>
<button type="button" class="btn btn-default btn-lg active">Texto 2</button>

Elemento de âncora

Texto 1 Texto 2 
<a href="javascript:void(0);" class="btn btn-primary btn-lg active" role="button">Texto 1</a>
<a href="javascript:void(0);" class="btn btn-default btn-lg active" role="button">Texto 2</a>

Estado desativado

Elemento de botão

<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Texto 1</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Texto 2</button>

Elemento de âncora

Texto 1 Texto 2 
<a href="javascript:void(0);" class="btn btn-primary btn-lg disabled" role="button">Texto 1</a>
<a href="javascript:void(0);" class="btn btn-default btn-lg disabled" role="button">Texto 2</a>

Imagens

Imagens responsivas

ANTT 
<img src="img/paisagem800x600.jpg" class="img-responsive" alt="ANTT">

Formato de imagens

ANTT ANT ANTT 
<img src="img/Neurons 200 X 200.jpg" class="img-rounded" alt="ANTT">
<img src="img/Neurons 200 X 200.jpg" class="img-circle" alt="ANTT">
<img src="img/Neurons 200 X 200.jpg" class="img-thumbnail" alt="ANTT">

Classes auxiliares

Cores contextuais

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

<p class="text-muted">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="text-primary">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="text-success">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="text-info">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="text-warning">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="text-danger">Texto texto texto texto texto texto texto texto texto texto.</p>

Fundos contextuais

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

Texto texto texto texto texto texto texto texto texto texto.

<p class="bg-primary">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="bg-success">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="bg-info">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="bg-warning">Texto texto texto texto texto texto texto texto texto texto.</p>
<p class="bg-danger">Texto texto texto texto texto texto texto texto texto texto.</p>

Ícone 'Fechar'

<p><button type="button" class="close" aria-label="Fechar"><span aria-hidden="true">&times;</span></button></p>

Carets

<span class="caret"></span>

Flutuadores rápidos

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Blocos do Centro de conteúdo

<div class="center-block">...</div>

Clearfix

<div class="clearfix">...</div>

Mostrar e ocultar conteúdo

<div class="show">...</div>
<div class="hidden">...</div>

Leitor de tela e navegação do teclado conteúdo

<a class="sr-only sr-only-focusable" href="#conteudo">Ir para o conteúdo principal</a>

Substituição de imagem

<h1 class="text-hide">Texto texto</h1>

Utilitários responsivos

Classes (Celulares, Tablets, Desktops e Telas grandes)

Visível

.visible-xs

.visible-sm

.visible-md

.visible-lg

Invisível

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

Visível no bloco

.visible-xs-block

.visible-sm-block

.visible-md-block

.visible-lg-block

Visível em linha

.visible-xs-inline

.visible-sm-inline

.visible-md-inline

.visible-lg-inline

Visível em linha do bloco

.visible-xs-inline-block

.visible-sm-inline-block

.visible-md-inline-block

.visible-lg-inline-block

Visível para impressão

.visible-print

.visible-print-block

.visible-print-inline

.visible-print-inline-block

Invisível para impressão

.hidden-print