Bootstrap(1)

一. 导航条

• 代码

 <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand" href="#">首页</a>
   </div>

   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav">
       <li class="active"><a href="#">热门<span class="sr-only">(current)</span></a></li>
       <li><a href="#"></a></li>
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">菜单 <span class="caret"></span></a>
         <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">Separated link</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">One more separated link</a></li>
         </ul>
       </li>
     </ul>
     <form class="navbar-form navbar-left">
       <div class="form-group">
         <input type="text" class="form-control" placeholder="搜索内容....">
       </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>
     <ul class="nav navbar-nav navbar-right">
       <li><a href="#">注册</a></li>
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">help<span class="caret"></span></a>
         <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">Separated link</a></li>
         </ul>
       </li>
     </ul>
   </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->

• 效果展示

二.栅格系统、列表组

• 代码

       <a href="#" class="list-group-item">微博热度</a>
       <a href="#" class="list-group-item">热门博文</a>
       <a href="#" class="list-group-item">同城服务</a>
	   <a href="#" class="list-group-item">同城服务</a>
	   
	   
       </div>
   </div>
 </div>
 
 </div>
          
 		  <div class="col-md-7 bg-success">左</div>
 		  <div class="col-md-3 bg-info">右</div>
 	  </div>
 	  <div class="row">
 		  <div class="col-md-5 bg-info">中</div>
		    <div class="col-md-5 bg-success">中</div>
			  <div class="col-md-2 bg-info">中</div>
		  
 	  </div>
   </div>
   <div class="container">
 	  <div class="row">
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 		  <div class="col-md-1 bg-warning">md-1</div>
 	  </div>
   </div>
   <div class="container">
        	  <div class="row">
        		  <div class="col-md-1 bg-info">1</div>
        		  <div class="col-md-1 bg-warning">2</div>
        		  <div class="col-md-1 bg-info">3</div>
        		  <div class="col-md-1 bg-warning">4</div>
        		  <div class="col-md-1 bg-info">5</div>
        		  <div class="col-md-1 bg-warning">6</div>
        		  <div class="col-md-1 bg-info">7</div>
        		  <div class="col-md-1 bg-warning">8</div>
        		  <div class="col-md-1 bg-info">9</div>
        		  <div class="col-md-1 bg-warning">10</div>
        		  <div class="col-md-1 bg-info">11</div>
        		  <div class="col-md-1 bg-warning">12</div>
        	  </div>
   </div>

• 效果展示