classes do bootstrap
TRANSCRIPT
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: [email protected]
Obrigado,
Rodrigo Milano
www.rodrigomilano.com.br
www.facebook.com/tutoriaismilanoweb
br.linkedin.com/in/rodrigomilano