Ebook com as classes mais comuns do Bootstrap. Uma espécie de "Cheat Sheet", para ajudar naqueles momentos que esquecemos algo. Cito as classes da Grid, Botões, Imagens, Cores, Floats, Classes de esconder e mostrar.

1. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Classes do Bootstrap
O Sistema de Grid – “row” e “col”
.row vai sempre dentro de um .container (fixo) ou .container-fluid (fluido 100%)
Colunas
Classes A partir de Largura
.col-xs-* Todos tamanhos Total
.col-sm-* >768px 750px
.col-md-* >992px 970px
.col-lg-* >1200px 1170px
* (1 a 12)
Jogando colunas para direita ou esquerda
.col-xs-offset-* .col-sm-offset-* .col-md-offset-* .col-lg-offset*
.col-xs-push-* .col-sm-push-* .col-md-push-* .col-lg-push-*
Botões
.btn .btn-default
.btn .btn-primary
.btn .btn-info
.btn .btn-success
.btn .btn-warning
.btn . btn-danger
.btn .btn-link (para um button ficar como link)

2. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Exemplos:
<!—Botão Default -->
<button type="button" class="btn btn-default">Default</button>
<!-- Botão Primário-->
<button type="button" class="btn btn-primary">Primary</button>
<!—Botão de Sucesso ou Ação Positiva-->
<button type="button" class="btn btn-success">Success</button>
<!—Botão Contextual para alertas informacionais -->
<button type="button" class="btn btn-info">Info</button>
<!—Botão de ação com cuidado -->
<button type="button" class="btn btn-warning">Warning</button>
<!—Botão de ação perigosa ou negativa-->
<button type="button" class="btn btn-danger">Danger</button>
<!—Retira cores (link simples), porém mantendo as funcionalidades do Button-->
<button type="button" class="btn btn-link">Link</button>
Tamanhos de Botões
.btn-lg
.btn-sm

3. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
.btn-xs
Botão que ocupa todo o espaço do elemento que o contém
.btn-block
Imagens
Para que uma imagem seja responsiva adicionar a classe: “.img-responsive“
Formas das Imagens
.img-rounded (para imagem com cantos arredondados)
.img-circle (para imagens circulares)

4. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
.img-thumbnail (para imagens com uma borda dupla arredondada)
Cores contextuais
Ajudam a mudar o fundo do elemento para indicar algum tipo de informação especial
Similar às classes dos botões
.bg-primary, .bg-succes, .bg-info, .bg-warning, .bg-danger
Floats rápidos
Para criar um float left e float right em um element
.pull-left, .pull-right
Centralizando blocos de conteúdo
.center-block

5. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Escondendo e mostrando elementos
.show, .hidden
Classes utilitárias para responsividade
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
.visible-xs-* Visible Hidden Hidden Hidden
.visible-sm-* Hidden Visible Hidden Hidden
.visible-md-* Hidden Hidden Visible Hidden
.visible-lg-* Hidden Hidden Hidden Visible
.hidden-xs Hidden Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible
.hidden-md Visible Visible Hidden Visible
.hidden-lg Visible Visible Visible Hidden

6. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Componentes
Dropdown
Código Exemplo:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Ação</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Ação</a></li>
</ul>
</div>

7. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Grupo de Botões
Código Exemplo
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Esquerdo</button>
<button type="button" class="btn btn-default">Meio</button>
<button type="button" class="btn btn-default">Direito</button>
</div>
Botões Dropdown
Código Exemplo
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Ação</a></li>
<li><a href="#">Ação</a></li>
<li><a href="#">Ação</a></li>
<li class="divider"></li>
<li><a href="#"> Ação separada</a></li>
</ul>
</div>

8. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Tabs
Código Exemplo
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Portifólio</a></li>
<li role="presentation"><a href="#">Contato</a></li>
</ul>
Navbar
Código Exemplo
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#bs-example-navbar-collapse-1">
<span class="sr-only">Abrir Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Marca</a>

9. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(atual)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Ação</a></li>
<li><a href="#">Ação</a></li>
<li><a href="#">Ação</a></li>
<li class="divider"></li>
<li><a href="#">Ação separada</a></li>
<li class="divider"></li>
<li><a href="#">Outra ação separada</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Pesquisar">
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
<ul class="nav navbar-nav navbar-right">

10. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Ação</a></li>
<li><a href="#">Ação</a></li>
<li><a href="#">Ação</a></li>
<li class="divider"></li>
<li><a href="#">Ação separada</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

11. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Jumbotron
Código Exemplo
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Alerts
Código Exemplo
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

12. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Panel
Código Exemplo
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Panel com cabeçalho
Código Exemplo
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Wells
Código Exemplo
<div class="well">Look, I'm in a well!</div>

13. Rodrigo Milano - www.rodrigomilano.com.br - www.facebook.com/tutoriaismilanoweb
Se você achou este documento interessante, encaminhe-o a um colega. Se
achou algum erro, gostaria de colaborar com sugestões ou não gostou de
algo, por favor, fale comigo pelo email: webdesign@rodrigomilano.com.br
Obrigado,
Rodrigo Milano
www.rodrigomilano.com.br
www.facebook.com/tutoriaismilanoweb
br.linkedin.com/in/rodrigomilano