响应式框架Bootstrap栅格系统的实例

2019-11-19 14:42:19

字体：大中小

来源：转载

供稿：网友

实例如下：

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" /> <script language="JavaScript" src="js/jquery-3.js"></script> <style type="text/css">  *{   top: 0px;   padding: 0px;   text-decoration: none;   list-style-type: none;  }  .top-styl{   height: 50px;   border: 1px solid red;   background-color: #000000;  }  .img-styl{   width: 174px;   height: 50px;   background: url("imges/logo.png")no-repeat 0px 3px;   background-size: contain;   float: left;  }  .sousuo-styl{   width: 187px;   float: left;  }  .top-search-input{   width: 150px;   padding: 0 5px;   height: 30px;   border: 0;   background: #363636;   float: left;   color: #ccc;  }  .top-search-submit{   width: 30px;   height: 30px;   border: 0;   background: green url("imges/zoom.gif")center center no-repeat;   float: left;   cursor: pointer;　　　　　　　　　　//光标指针  }  .dao-styll{   float: left;   font-size: 16px;   width: 329px;   margin-left: 33px;   margin-top: 11px;  }  .dao-styll li{   float: left;   position: relative;　　　　　　//相对定位   text-align: center;   padding: 0 7px;  }  .dao-styll >li:hover{   background-color: #999;  }  .dao-styll >li >a{   color: #FFF;   width: 100%;   height: 34px;   text-decoration: none;　　　　//取消下划线  }  .dz-styl{   float: right;   margin: -19px -9px 6px 21px;  }  .imgs-styl{   padding: 11px 0px 0px 114px;   float: right;   margin: 0px -98px -3px 8px;  }  .green-styl{   color: green;  }  .zc-styl{   color: white;  }  a{   text-decoration: none;  } </style></head><body> <div class="container-fluid"> 　　　　　　　　　　//fluid表示用 百分比  <div class="row">　　　　　　　　　　　　　　　//row 行   <div class="top-styl col-md-12">　　　　　　　　//col-md-12 每行桌面占12列    <div class="row">     <div class=" col-md-offset-1 col-md-9">　　　//col-md-offset-1 列偏移1列      <div class="row">      <div class="col-md-3 col-xs-4">       <div class="img-styl"></div>      </div>       <div class="col-md-3 ">        <div class="sousuo-styl" style="padding-left: 7px; margin: 8px auto;">         <input class="top-search-input" value="" type="text"><input          class="top-search-submit" type="submit" value="" />        </div>       </div>       <div class="col-md-4 hidden-xs" style="padding: 0px">        <ul class="dao-styll">         <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >风格</a>         </li>         <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >造型师</a></li>         <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >众分享</a>         </li>         <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的美丽衣橱</a></li>        </ul>       </div>       <div class="col-md-2">        <div class="imgs-styl">         <img src="imges/sina.gif">        </div>        <div class="dz-styl">         <span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="green-styl">登录</a> | </span><span>         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="zc-styl">注册</a></span>        </div>       </div>      </div>     </div>    </div>   </div>  </div> <div class="row">    <div class="visible-md"><h1>当前为桌面显示</h1></div>　　　//visible默认占满整行　    <div class="visible-sm"><h1>当前为平面显示</h1></div>    <div class="visible-xs"><h1>当前为手机显示</h1></div>  </div> </div></body></html>

效果显示图：