好多天沒有寫了，繼續走起
在上一篇<<旺財速啃H5框架之Bootstrap（二）>>中已經把CSS引入到頁面中，接下來開始寫頁面。
首先有些問題要先處理了，問什么你要學bootstrap？ 流行？寫網頁快？還是其它什么的？說實話，如果寫頁面很熟練的人（牛人），根本不會用任何框架寫，為什么呢，它們太臃腫了，誰寫一個頁面能把它所有的CSS都應該用上，所有的類都定義上呢？所以很多代碼對於頁面來說都是多余的，還好上線后，引入的都是資源庫，如果你有代碼精簡強迫症，那估計你要重寫（覆蓋）一些東西了（注明：其實我大部分時間都在搞后台，前台也只是略懂，高手勿噴，有講得不對的地方，大膽指正，虛心學習。）
什么是自適應？
我相信這也是你的目的，要做一個自適應的網站，手機（微小設備）、平板（小設備）、一般電腦（中型設備）、大顯示器（大型設置）等都能很好的顯示，現在一般都是如下兩種方式
第一種：不同設備各一套
第一想到的是麻煩，沒辦法，像有的網站（比如商城），網站跟手機顯示的樣式或內容有很大區別，做一套？行嗎？... 想到這里，你肯定很只能屈服了，好吧，這種我不多說。
第二種：所有設備全一套
這種你肯定看到就高興了，但這種網站要看頁面數據來，不是所有類型的網站都適合，現在CMS系統這樣做的比較多。
想到是自適應，所先在寫CSS容器的時候不能把寬度固定死，那怎么辦？肯定百分比呀。
我怎么覺得廢話有點多了，打了這么多字....開干，這里肯定只說第二種情況的
做一個自適應的導航，直接看代碼：
<!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> </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> </body> </html>
查看效果，《猛點這里》
說明：
Nav標簽定義導航，role="navigation" 告訴瀏覽器這是一個導航容器。然后在里面定義一個container-fluid，名義上為不固定（會變化）容器，1411行代碼：
.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
只定義了內邊距，外邊距自動，說明它的寬度是父容器的100%，自然會隨瀏覽器窗口大小變化而變化了。
縮小窗口看看效果：
左邊欄目圖標縮小到一定大小后就會顯示，看關鍵代碼4022行：
@media (min-width: 768px) { .navbar-toggle { display: none; } }
如果它的寬度大於768就隱藏了，反之顯示。
點擊圖標顯示下拉子導航功能，這個當然是js的效果了。
澄清一下：自適應其實就是在改變瀏覽器（設備）大小的情況下，應用不同的CSS樣式，把范圍大的寫上面，特殊的寫下面，后面的樣式覆蓋前面的，看CSS源碼里面也有大量的層級關系的定義（比如.navbar-nav .open .dropdown-menu），這就意味着dropdown-menu類父級里面必須得有open類，open父級里面必須得有navbar-nav才行，要不然並卵。也就意味着很多寫法要按要求來。
上面的案例去看一下它的應用樣式，不是好多呀，看得頭都暈，哈哈，這就是框架，把不同的設備考慮進去了，自然代碼就多啦。
有沒有人想到說麻煩，自己寫得了，對呀，高手都是自己寫的~~~，但框架那時給我們的好處就只體現在速度上了，寫網頁快。
回頭我有空從0寫一個自適應的CSS，只寫部分，讓某些童鞋知道是怎么回事就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> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分離的鏈接</a></li> <li class="divider"></li> <li><a href="#">另一個分離的鏈接</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>
查詢效果：《猛點這里》
固定功能關鍵代碼3956行：
.navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; }
position: fixed; // 相對瀏覽器進行絕對定位
如果你對定位不熟悉，點這里看看。
Bootstrap框架導航欄就寫這么點，想看更多詳細的導航欄效果，請看：http://noob.d8jd.com/noob/5/123.html
導航欄有了，接下來的部分我將介紹如何寫主體部分。
有問題大膽留言，虛心學習~~~