Classes do bootstrap

650 visualizações

Publicada em

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.

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
650
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
19
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Classes do bootstrap

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

×