上一篇<<旺財速啃H5框架之Bootstrap（三）>>已經把導航做了，接下來搭建內容框架....
對於不規整的網頁，要做成自適應就有點玩大了.... 例如下面這種版式的頁面....
對於這樣的網站，要做成自適應，那你得多花點精力了，當然我不講這個。。。
所以這里肯定是對那種“列很規律”的網站，例如cnblogs首頁的版式，分左，中，右
由於中國傳統藝術版本，或習慣什么的，很多東西都講對稱性，所以幾乎所有網站都是很規律的，說多了，直接上（這里我只寫主要CSS）
<div class="container"> <div class="row" > <div class="col left"></div> <div class="col center"></div> <div class="col right"></div> </div> </div>
Container定義了一個容器，看相關CSS定義：
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } }
在768px以上，寬度固定750px
在992px以上，寬度固定970px
在1200px以上，寬度固定1170px
可以看出在電腦上容器寬度都是固定的
如果你不想做這種固定寬度，而是全屏的頁面，那么定義container容器就不行了，外面的容器寬度就得是百分比形式。
下面我改進：
<div class="container wrap"> <div class="row" > <div class="col left"></div> <div class="col center"></div> <div class="col right"></div> </div> </div>
注意：采用的是CSS重寫（覆蓋），引入CSS的時候一定要放到bootstrap.min.css的后面
我這里就直接寫在頁面上了,看我寫的CSS樣式：
.wrap{ width:100%; /* 覆蓋container的寬度 */ } .wrap .left{ width:14%; margin-right:1%; } .wrap .center{ width:65%; } .wrap .right{ margin-left:1%; width:19%; } /* 最大寬度768的設備，只顯示中間，其它情況自己添加，注意先后順序。 */ @media (max-width: 768px) { .wrap .center{ width:100%; } .wrap .left,.wrap .right{ display:none; } }
這里我就不去詳細考慮每一個設備情況了。
完整案例來一個：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 響應式的導航欄</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style type="text/css"> .col{min-height: 580px; float: left;} .left,.right{background-color: #e6e6e6;} .center{background: #000;} .row{margin: 0;} .wrap{ width:100%; /* 覆蓋container的寬度 */ } .wrap .left{ width:14%; margin-right:1%; } .wrap .center{ width:65%; } .wrap .right{ margin-left:1%; width:19%; } /* 最大寬度768的設備，只顯示中間 */ @media (max-width: 768px) { .wrap .center{ width:100%; } .wrap .left,.wrap .right{ display:none; } } </style> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand active" href="javascript:;">教程</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="javascript:;">iOS</a></li> <li><a href="javascript:;">SVN</a></li> <li class="dropdown"> <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="javascript:;">jmeter</a></li> <li><a href="javascript:;">EJB</a></li> <li><a href="javascript:;">Jasper Report</a></li> <li class="divider"></li> <li><a href="javascript:;">分離的鏈接</a></li> <li class="divider"></li> <li><a href="javascript:;">另一個分離的鏈接</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container wrap"> <div class="row" > <div class="col left"></div> <div class="col center"></div> <div class="col right"></div> </div> </div> </body> </html>
查詢效果：《猛點這里》
改變窗口大小看效果
如果你想做得更加到位，頁面縮放后版式更加和諧，你可以更詳細的針對不同設備寫不現的樣式，但要注意先后順序哦~~~
OK，框架搭建好了，這些框架僅僅是“整體框架”，就好比房子的地基、梁柱之類的，那么接下來向里面插入“內容框架”，內容框架當然是直接或間接與內容有關系的框架
當大框架沒有固定寬度的情況下，里面的內容框架寬度能固定寬度么？要記住，外面的框架在沒有寬度的情況是會被里面的內容影響的（特別指浮動元素），塊元素的話不用設置寬度，就讓它默認為父容器的寬度就OK。
有的人發現上面有點問題：
縮小后，出現下拉導航會把下面給抵下去。。。 這種問題自己都能解決的吧，不是大問題，我也只能說，“你”太懶了，這樣學東西可不行。。。 OK~~~ ，我稍微調整一下，看下面完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 響應式的導航欄</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style type="text/css"> .col{min-height:580px; float: left;} .left,.right{background-color: #e6e6e6;} .center{background: #000;} .row{margin: 0;} .wrap{ width:100%; /* 覆蓋container的寬度 */ } .wrap .left{ width:14%; margin-right:1%; } .wrap .center{ width:65%; } .wrap .right{ margin-left:1%; width:19%; } /* 最大寬度768的設備，只顯示中間 */ @media (max-width: 768px) { .wrap .center{ width:100%; } .wrap .left,.wrap .right{ display:none; } .container-fluid{ position: relative; } .navbar-collapse{ position: absolute; width: 100%; background-color: #FFF; } } </style> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand active" href="javascript:;">教程</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="javascript:;">iOS</a></li> <li><a href="javascript:;">SVN</a></li> <li class="dropdown"> <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="javascript:;">jmeter</a></li> <li><a href="javascript:;">EJB</a></li> <li><a href="javascript:;">Jasper Report</a></li> <li class="divider"></li> <li><a href="javascript:;">分離的鏈接</a></li> <li class="divider"></li> <li><a href="javascript:;">另一個分離的鏈接</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container wrap"> <div class="row" > <div class="col left"></div> <div class="col center"></div> <div class="col right"></div> </div> </div> </body> </html>
查詢效果：《猛點這里》
相信你已經知道自適應是怎么回事了吧，是不是不用框架也能去寫了呢？ 如果不行的話，接受留級吧~~~，你的問題是不是在於：不自學、不總結、不腳踏實地、只看不練、不…只ctrl+v，不查手冊只度娘… ……………………………….不想說你了。。。
今天over~~~