1.դϵͳ 
  ÿʾ ֳ12ȷ  ڲͬĻ ָ ÿһ ռ
    һǴĻһռķԽ СĻһռķӦ
   ƫࡣ
2.դϵͳеƫ 
   <div  class="container">
         <div class="row">
             <div  class="col-md-8 bg">8</div>
             <div  class="col-md-3 col-md-offset-1 bg">3</div>
         </div>
   </div> 
3.еƶ 
  push  
  pull   
    <div  class="container">
         <div class="row">
             <div  class="col-md-6  col-md-push-6 bg"></div>
             <div  class="col-md-6 col-md-pull-6 bg"></div>
         </div>
    </div>
4.Ӧʽ 
  ڲͬĻ ԶԪؽ ʾ  
 visible-Ļ˵-Ԫʾʽ˵ 
 hidden-Ļ˵  
  Ļ˵    lg      md е    sm  С   xs  С 
 ʾʽ˵   inline  inline-block  block 
5.˵ 
  class="dropdown"   data-toggle="dropdown"
  class="caret"    class="dropdown-menu"
  
  class="dropup"   
  class="dropdown-header"
  class="dropdown-menu-right"
  class="divider"  
  class="disabled" 
  class="dropdown open" 
6. 
  6.1 
    ul    class="nav"  class="nav nav-tabs"
  6.2 ʽ
    class="nav  nav-pills nav-stacked"   
  6.3  ˵ 
       һʽ    Ȼڶ һ˵
       ѵli ˵ div   Ұ ˵ť ʹa ǩɷȽϳ
 7. 
   <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
             <span  class="navbar-brand">LINGDU.COM</span>
        </div>
        <ul class="nav navbar-nav">
             <li> <a href="#">ҳ</a> </li>
             <li> <a href="#">ʼ</a> </li>
             <li> <a href="#">Ƶ</a> </li>
             <li> <a href="#">μ</a> </li>
             <li> <a href="#"></a> </li>
        </ul>
        <div class="navbar-text navbar-left" style="font-size: 20px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
                        &nbsp;&nbsp;&nbsp;&nbsp;ʼ&nbsp;&nbsp; 
        </div>
        <form  class="navbar-form navbar-left">
             <div class="input-group">
                  <input  type="text" class="form-control">
                  <label  class="input-group-addon"></label>
             </div>
        </form>
    </div>
    
   8.ͼ
    дһդϵͳ  Ҫÿһ ʾͼƬ 
    ͼƬʾ Ҫ ڴĻ һʾ6   еĻʾ 4   СĻ ʾ3  
    СĻ ʾ 2 š
    դϵͳ +  class="thumbnail" 
  9.۵չ
   <button   class="btn btn-primary"  data-toggle="collapse" 
    data-target="#content">
        ۵չ
    </button>
    <div  id="content" class="collapse">
    <pre> 
   10.ͼƬֲ ()


            
  
  
  
  
  
  
  
  
  
  
  




 
  
  
  
  
  
  
  






  
  
  
  
  




   
        
          