顶部信息栏,显示网站标题、Logo等资

Bootstrap Layout (Fixed)

1/25/2015 Source:Backyard [comment]


Bootstrap offers two types of layout fixed ( grid ) layout and flow type ( grid ) layout.  Bootstrap grid layout is actually applied in a container (container). Fixed layout add a fixed width (width) of the vessel , flow layout add adaptive ( or called variable ) width of the container , this is the only difference between the two .

1. Fixed Layout Let's look at an example:

class="container"


Code inside

.container,
{
  width: 940px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  zoom: 1;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}
.container:after {
  clear: both;
}
  1. <body>     
  2.   <div class="container">  
  3.         <div class="row">  
  4.             <div class="span4"> span4</div>  
  5.             <div class="span8"> span8</div>  
  6.         </div>  
  7.         <div class="row">  
  8.             <div class="span4"> span4</div>  
  9.             <div class="span6"> span6</div>  
  10.             <div class="span2"> span2</div>  
  11.         </div>  
  12.   </div>  
  13. </body> 
    1. <body>     
    2.   <div class="container">  
    3.         <div class="row">  
    4.             <div class="span4"> span4</div>  
    5.             <div class="span8"> span8</div>  
    6.         </div>  
    7.         <div class="row">  
    8.             <div class="span4"> span4</div>  
    9.             <div class="span6"> span6</div>  
    10.             <div class="span2"> span2</div>  
    11.         </div>  
    12.   </div>  
    13. </body>