響應(yīng)式框架Bootstrap柵格系統(tǒng)的實(shí)例

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:23:31

響應(yīng)式框架Bootstrap柵格系統(tǒng)的實(shí)例

響應(yīng)式框架Bootstrap柵格系統(tǒng)的實(shí)例:實(shí)例如下： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width, i

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀響應(yīng)式框架Bootstrap柵格系統(tǒng)的實(shí)例:實(shí)例如下： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width, i

實(shí)例如下：

<!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;　　　　　　　　　　//光標(biāo)指針
 }
 .dao-styll{
 float: left;
 font-size: 16px;
 width: 329px;
 margin-left: 33px;
 margin-top: 11px;

 }
 .dao-styll li{
 float: left;
 position: relative;　　　　　　//相對(duì)定位
 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" >風(fēng)格</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">注冊(cè)</a></span>
 </div>
 </div>


 </div>
 </div>
 </div>
 </div>
 </div>

 <div class="row">
 <div class="visible-md"><h1>當(dāng)前為桌面顯示</h1></div>　　　//visible默認(rèn)占滿整行　
 <div class="visible-sm"><h1>當(dāng)前為平面顯示</h1></div>
 <div class="visible-xs"><h1>當(dāng)前為手機(jī)顯示</h1></div>
 </div>
 </div>
</body>
</html>

效果顯示圖：