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	24
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

16

8

12

<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 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-16">16</div>
	<div class="col-md-8">8</div>
</div>
<div class="row">
	<div class="col-md-8">8</div>
	<div class="col-md-8">8</div>
	<div class="col-md-8">8</div>
</div>
<div class="row">
	<div class="col-md-12">12</div>
	<div class="col-md-12">12</div>
</div>

Exemplo: Linhas

24

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

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

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

Exemplo: Celular, tablet e desktop

24 12 16 16

12 12 8 8

12 8 8 8

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-24 col-sm-12 col-md-16">
			
		</div>
		<div class="col-xs-12 col-md-8">
			
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 col-sm-8">
			
		</div>
		<div class="col-xs-12 col-sm-8">
			
		</div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-12 col-sm-8">
			
		</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

<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 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 8 8

24 24 6 6

24 24 12 12

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

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

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

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

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

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

Colunas de nesting

24 18 18 18

16 12 12 12

8 12 12 12

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-18">
			...
			<div class="row">
				<div class="col-xs-16 col-sm-12">
					...
				</div>	
				<div class="col-xs-8 col-sm-12">
					...
				</div>
			</div>
			...
		</div>
	</div>
</div>

Coluna ordenação

1

2

3

4

<div class="container-fluid">
	<div class="row">
		<div class="col-md-2 col-md-push-18">
			1
		</div>
		<div class="col-md-4 col-md-push-12">
			2
		</div>
		<div class="col-md-6 col-md-push-2">
			3
		</div>
		<div class="col-md-8 col-md-pull-12">
			4
		</div>
	</div>
</div>

Tipografia

Cabeçalhos

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

<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.

<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.

<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

Texto texto
Texto texto
Texto texto
Texto texto
1. Texto texto
2. Texto texto
3. Texto texto
Texto texto
Texto texto
Texto texto
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

<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>

<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

<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>

<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>

Com ícones opcionais

<form>
	<div class="form-group has-success has-feedback">
		<label class="control-label" for="input-success-dois">Texto texto</label>
		<input type="text" class="form-control" id="input-success-dois" aria-describedby="input-success-status-dois">
		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		<span id="input-success-status-dois" class="sr-only">(texto)</span>
	</div>
	<div class="form-group has-warning has-feedback">
		<label class="control-label" for="input-warning-dois">Texto texto</label>
		<input type="text" class="form-control" id="input-warning-dois" aria-describedby="input-warning-status-dois">
		<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
		<span id="input-warning-status-dois" class="sr-only">(texto)</span>
	</div>
	<div class="form-group has-error has-feedback">
		<label class="control-label" for="input-error-dois">Texto texto</label>
		<input type="text" class="form-control" id="input-error-dois" aria-describedby="input-error-status-dois">
		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
		<span id="input-error-status-dois" class="sr-only">(texto)</span>
	</div>
	<div class="form-group has-success has-feedback">
		<label class="control-label" for="input-group-success-um">Texto texto</label>
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" id="input-group-success-um" aria-describedby="Texto texto">
		</div>
		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		<span id="input-group-success-um" class="sr-only">(texto)</span>
	</div>
</form>

Ícones opcionais nos Formulários horizontais e em linha

<form class="form-horizontal">
	<div class="form-group has-success has-feedback">
		<label class="control-label col-sm-3" for="input-success-tres">Texto texto</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" id="input-success-tres" aria-describedby="input-success-status-tres">
			<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
			<span id="input-success-status-tres" class="sr-only">(texto)</span>
		</div>
	</div>
	<div class="form-group has-success has-feedback">
		<label class="control-label col-sm-3" for="input-group-success-dois">Texto texto</label>
		<div class="col-sm-9">
			<div class="input-group">
				<span class="input-group-addon">@</span>
				<input type="text" class="form-control" id="input-group-success-dois" aria-describedby="input-group-success-status-dois">
			</div>
			<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
			<span id="input-group-success-status-dois" class="sr-only">(texto)</span>
		</div>
	</div>
</form>

<form class="form-inline">
	<div class="form-group has-success has-feedback">
		<label class="control-label" for="input-success-quatro">Texto texto</label>
		<input type="text" class="form-control" id="input-success-quatro" aria-describedby="input-success-status-quatro">
		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		<span id="input-success-status-quatro" class="sr-only">(texto)</span>
	</div>
</form>
<form class="form-inline">
	<div class="form-group has-success has-feedback">
		<label class="control-label" for="input-group-success-tres">Texto texto</label>
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" id="input-group-success-tres" aria-describedby="input-group-success-status-tres">
		</div>
		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		<span id="input-group-success-status-tres" class="sr-only">(texto)</span>
	</div>
</form>

Ícones opcionais com o texto oculto `.sr-only`

<div class="form-group has-success has-feedback">
	<label class="control-label sr-only" for="input-success-cinco">Texto texto</label>
	<input type="text" class="form-control" id="input-success-cinco" aria-describedby="input-success-status-cinco">
	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	<span id="input-success-status-cinco" class="sr-only">(texto)</span>
</div>
<div class="form-group has-success has-feedback">
	<label class="control-label sr-only" for="input-group-success-quatro">Texto texto</label>
	<div class="input-group">
		<span class="input-group-addon">@</span>
		<input type="text" class="form-control" id="input-group-success-quatro" aria-describedby="input-group-success-status-quatro">
	</div>
	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	<span id="input-group-success-status-quatro" class="sr-only">(texto)</span>
</div>

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

<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

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

<img src="img/logotipo-sest-senat-800-600.png" class="img-responsive" alt="SEST SENAT">

Formato de imagens

<img src="img/logotipo-sest-senat-200-200.png" class="img-rounded" alt="SEST SENAT">
<img src="img/logotipo-sest-senat-200-200.png" class="img-circle" alt="SEST SENAT">
<img src="img/logotipo-sest-senat-200-200.png" class="img-thumbnail" alt="SEST SENAT">

Classes auxiliares

Cores contextuais

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.

<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

CSS

Visão Geral

Tipo de documento HTML5

Mobile first

Tipografia e links

Containers

Sistema de grid

Opções de grid

Exemplo: Pilhas horizontais

Exemplo: Linhas

Exemplo: Celular, tablet e desktop

Exemplo: Quebra de coluna

Restabelecimentos do responsivo com coluna

Colunas de offset

Colunas de nesting

Coluna ordenação

Tipografia

Cabeçalhos

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

Cópia do corpo

Cópia principal do corpo

Elementos do texto em linha

Texto marcado

Texto excluído

Texto tachado

Texto inserido

Texto sublinhado

Texto pequeno

Negrito

Itálico

Classes de alinhamento

Classes de transformação

Abreviações

Padrão

Inicialismo

Endereço

Citações

Padrão

Opções

Telas alternadas

Listas

Não ordenadas

Ordenadas

Não estilizadas

Em linha

Descrição

Descrição horizontal

Código

Em linha

Entrada do usuário

Bloco básico

Variáveis

Exemplo de saída

Tabelas

Padrão

Zebrada

Com borda

Com hover

Condensada

Classes contextuais

Responsiva

Formulários

Padrão

Formulário em linha

Formulário horizontal

Controles de formulário suportados

Inputs

Área de texto

Checkboxes

Ícones opcionais com o texto oculto `.sr-only`