API tools faq
paste
Advertisement
yesamarcos

Bootstrap CSS

yesamarcos
Apr 7th, 2017
257
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  8. </head>
  9. <body>
  10.     <!-- Essa class "container" é a base do bootstrap e tudo começa aqui dentro -->
  11.     <div class="container">
  12.         <!-- A class "row" representa uma linha aonde serão inseridos até 12 colunas -->
  13.         <div class="row">
  14.             <!-- Esta class "col-md-12" representa 12 colunas dentro de uma linha -->
  15.             <!-- Toda vez que tiver um total de 12 "col" numa "row", tem que abrir uma nova "row" -->
  16.             <div class="col-md-12"></div>
  17.         </div>
  18.         <!-- Exemplo de um blog com barra lateral direita -->      
  19.         <div class="row">
  20.             <div class="col-md-9"></div>
  21.             <div class="col-md-3"></div>           
  22.         </div>
  23.         <!-- Exemplo de uma loja virtual com 3 colunas -->     
  24.         <div class="row">
  25.             <div class="col-md-4"></div>
  26.             <div class="col-md-4"></div>           
  27.             <div class="col-md-4"></div>           
  28.         </div>
  29.         <!-- Exemplo de uma loja virtual com 4 colunas -->     
  30.         <div class="row">
  31.             <div class="col-md-3"></div>
  32.             <div class="col-md-3"></div>           
  33.             <div class="col-md-3"></div>           
  34.             <div class="col-md-3"></div>           
  35.         </div>
  36.         <!-- Exemplo de um blog com barra lateral a esquerda -->       
  37.         <div class="row">
  38.             <div class="col-md-3"></div>
  39.             <div class="col-md-9"></div>
  40.         </div>
  41.         <!-- Se você reparar, todas as "col" dentro de uma "row" somam 12 "col". Esse é o pricípio do bootstrap. -->
  42.         <!-- Podemos também fazer resoluções combinadas. Veja abaixo: -->
  43.         <div class="row">
  44.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  45.             <!-- "col-lg-" monitores com resolução maior que 1200px - monitores mac -->
  46.             <!-- "col-md-" monitores entre 992px e 1200px - monitores normais -->
  47.             <!-- "col-sm-" monitores entre 768px e 991px - tablets -->
  48.             <!-- "col-xs-" resoluções menores que 768px - smartphones -->
  49.         </div>
  50.         <!-- Neste exemplo, vou mostrar uma apresentação de produtos numa loja virtual, -->
  51.         <!-- que vai ter 4 colunas no "lg", 3 colunas no "md", 2 colunas no "sm" e 1 coluna no "sm" -->
  52.         <div class="row">
  53.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  54.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  55.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  56.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  57.         </div>
  58.         <!-- Aqui colocamos 4 blocos porque? Porque a quantidade máxima de produtos que serão -->
  59.         <!-- mostrados é de 4 produtos na resolução "lg", as vezes cabe até 6 colunas no "lg" -->
  60.         <!-- Outros exemplos e combinações sempre somando 12 colunas -->
  61.         <!-- lg/md/sm/xs 1 - representa 1 linha com 12 blocos de 1 colunas -->
  62.         <!-- lg/md/sm/xs 2 - representa 1 linha com 6 blocos de 2 colunas -->
  63.         <!-- lg/md/sm/xs 3 - representa 1 linha com 4 blocos de 3 colunas -->
  64.         <!-- lg/md/sm/xs 4 - representa 1 linha com 3 blocos de 4 colunas -->
  65.         <!-- lg/md/sm/xs 6 - representa 1 linha com 6 blocos de 2 colunas -->
  66.         <!-- lg/md/sm/xs 12 - representa 1 linha com 1 blocos de 12 colunas -->
  67.         <div class="row">
  68.             <div class="col-md-4 col-sm-6 col-xs-12"></div>
  69.             <div class="col-md-4 col-sm-6 col-xs-12"></div>
  70.             <div class="col-md-4 col-sm-6 col-xs-12"></div>
  71.         </div>
  72.         <div class="row">
  73.             <div class="col-md-6 col-sm-6 col-xs-12"></div>
  74.             <div class="col-md-6 col-sm-6 col-xs-12"></div>
  75.         </div>
  76.         <div class="row">
  77.             <div class="col-md-3 col-sm-6 col-xs-12"></div>
  78.             <div class="col-md-3 col-sm-6 col-xs-12"></div>
  79.             <div class="col-md-3 col-sm-6 col-xs-12"></div>
  80.             <div class="col-md-3 col-sm-6 col-xs-12"></div>
  81.         </div>
  82.         <div class="row">
  83.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  84.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  85.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  86.             <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
  87.         </div>
  88.         <!-- Como pode observar, podem existir várias combinações de telas diferentes semprew somando 12 colunas. -->
  89.         <!-- O Bootstrap tem várias classes para textos, imagens, elementos html, tabelas, modais, formulários -->
  90.         <!-- Documentação: http://getbootstrap.com/css -->
  91.     </div>
  92.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  93. </body>
  94. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!