Layout e Grids

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Layout e Grids

Previous pageReturn to chapter overviewNext page

Resultado tela grande

 

 

bootstrap1

 

Resultado tela menor

 

 

bootstrap2

 

Resultado tela pequena

 

bootstrap3

 

Fonte

 

<!DOCTYPE html>
<head>
  <style>
      .fundo1 { background: #CCC; }
     .fundo2 { background: #CAC; }
     .fundo3 { background: #ACC; }
  </style>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
  <!-- FLUID -->
  <div class="container-fluid">
    <div class="row-fluid">
       <div class="span6 fundo1">Coluna 01</div>
       <div class="span6 fundo1">Coluna 02</div>
   </div>    
 
    <div class="row-fluid">
       <div class="span4 fundo2">Coluna A</div>
       <div class="span4 fundo2">Coluna B</div>
       <div class="span4 fundo2">Coluna C</div>
   </div>    
 
    <div class="row-fluid">
       <div class="span12 fundo3">Coluna A</div>
   </div>    
  </div>
 
  <hr/>
  
  <!-- FLUID -->
  <div class="container-fluid">
    <div class="row">
       <div class="span6 fundo1">Coluna 01</div>
       <div class="span6 fundo1">Coluna 02</div>
   </div>    
 
    <div class="row">
       <div class="span4 fundo2">Coluna A</div>
       <div class="span4 fundo2">Coluna B</div>
       <div class="span4 fundo2">Coluna C</div>
   </div>    
 
    <div class="row">
       <div class="span12 fundo3">Coluna A</div>
   </div>    
  </div>
 
  <hr/>
  
  <!-- NOT FLUID (FIXO) -->
  <div class="container">
    <div class="row">
       <div class="span6 fundo1">Coluna 01</div>
       <div class="span6 fundo1">Coluna 02</div>
   </div>    
 
    <div class="row">
       <div class="span4 fundo2">Coluna A</div>
       <div class="span4 fundo2">Coluna B</div>
       <div class="span4 fundo2">Coluna C</div>
   </div>    
 
    <div class="row">
       <div class="span12 fundo3">Coluna A</div>
   </div>    
  </div>
 
  <hr/>
 
  <!-- FLUID COM SUB-ITENS -->
  <div class="container-fluid">
    <div class="row-fluid">
       <div class="span12 fundo2">Linha unica com 2 sub-colunas
           <div class="row-fluid">
             <div class="span4 fundo1">Coluna A</div>
             <div class="span8 fundo1">Coluna B</div>
          </div>    
      </div>
   </div>    
  </div>
  
  <hr/>
  
  <!-- FLUID TAMANHO MAXIMO 12 -->
  <div class="container-fluid">
    <div class="row">
       <div class="span1 fundo3">1</div>
       <div class="span1 fundo3">2</div>
       <div class="span1 fundo3">3</div>
       <div class="span1 fundo3">4</div>
       <div class="span1 fundo3">5</div>
       <div class="span1 fundo3">6</div>
       <div class="span1 fundo3">7</div>
       <div class="span1 fundo3">8</div>
       <div class="span1 fundo3">9</div>
       <div class="span1 fundo3">10</div>
       <div class="span1 fundo3">11</div>
       <div class="span1 fundo3">12</div>
   </div>    
  </div>
</body>