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)

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

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)

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

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

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>

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>

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>

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

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>

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>

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>

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