前言
距離上次有幾天時間了，其實我這段時間也多多少少在看這塊，但是效果不好啊！
我就在那裡搗鼓搗鼓，搞了半天還是一頭霧水，可能是老夫真的老了吧，學習新東西還是不行了！
是以老夫這裡就要開始無恥了，我準備一點一點的研究之，有時候抄襲官網大家就多包涵了哦。
我最近也使用了bootstrap來布局，來搞導航。但是效果很不理想，是以我這裡先來系統的看看這兩塊，若是仍然一頭霧水的話，那麼。。。。我就再學習就完了。
好了，廢話結束，我們進入今天的學習吧。
栅格系統
說道栅格系統，我們還是先解釋一下他吧，雖然大家都知道：
栅格系統英文為“grid systems”，也有人翻譯為“網格系統”，其實是一回事。
不過從定義上說，栅格更為準确些，從維基百科查到栅格的定義為：栅格設計系統（又稱網格設計系統、
标準尺寸系統、程式版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，
其風格工整簡潔，在二戰後大受歡迎，已成為今日出版物設計的主流風格之一。
以上不是我們關注的重點，是以我們直接看bootstrap的實作吧，我們先來看看他的描述：
對于簡單的兩列式布局，建立一個 .row 容器，并在容器中加入合适數量的 .span* 列即可。
由于預設是12列的栅格，所有 .span* 列所跨越的栅格數之和最多是12(或者等于其父容器的栅格數)。
最基本的栅格系統
複制代碼
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
5 <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
6 <script src="js/bootstrap.js" type="text/javascript"></script>
7 <style type="text/css">
8 .span4 { background-color: #EEEEEE; }
9 .span8 { background-color: #EEEEEE; }
10
11 </style>
12 </head>
13 <body>
14 <div class="row">
15 <div class="span4">
16 我在左邊<br /><br /><br /></div>
17 <div class="span8">
18 我在右邊</div>
19 </div>
20 </body>
21 </html>
我學聰明了，我之前就抄了下代碼、看了下效果然後就完了，我今天聰明了！！！我絕對不會去看那5000行css代碼，于是我們來看頁面上的css吧。。。
1 .row { margin-left: -20px; }
2 .row:before, .row:after { content: ""; display: table; line-height: 0; }
3 .row:after { clear: both; }
4 .span4 { width: 228px; }
5 .row { margin-left: -20px; }
6 .row:before, .row:after { content: ""; display: table; line-height: 0; }
7 .row:after { clear: both; }
8 [class*="span"] { float: left; margin-left: 20px; min-height: 1px; }
這個span是float，按照float不應該用于布局的說法，我其實會小小的抱怨一番的，但是還是先接受之，起分别心不好。
按照他這種做法，每起一行就需要一個row容器，是以我們多搞兩列試試。
1 <body>
2 <div class="row">
3 <div class="span4">
4 我在左邊<br />
5 <br />
6 <br />
7 </div>
8 <div class="span8">
9 我在右邊</div>
10 </div>
11 <div class="row">
12 <div class="span8">
13 我在左邊<br />
14 <br />
15 <br />
16 </div>
17 <div class="span4">
20 <div class="row">
21 <div class="span6">
22 我在左邊<br />
23 <br />
24 <br />
25 </div>
26 <div class="span6">
27 我在右邊</div>
28 </div>
29 </body>
我們需要保證每一行裡面的“span”相加之和是12即可，而且他支援響應式布局的，其實說響應式布局不合适，我們來看看螢幕變小會怎樣：
1 @media (max-width: 767px) {
2 [class*="span"],
3 .uneditable-input[class*="span"],
4 .row-fluid [class*="span"] {
5 display: block;
6 float: none;
7 width: 100%;
8 margin-left: 0;
9 -webkit-box-sizing: border-box;
10 -moz-box-sizing: border-box;
11 box-sizing: border-box;
12 }
13 }
我們看到在小于一定數值的時候，span的寬度會變為100%，是以我們就不要去惹他了。。
偏移列
bootstrap定義了很多類，他的類搞得很完善了，比如我們要把列向右移動的話就可以使用.offset*。
.offset4 可以将span向右移動4個列的寬度，于是我們來試試：
嵌套列
嵌套的情況總是無處不在，我們來在第一個列裡面嵌套一番吧，嵌套也是需要row容器的：
1 <div class="row">
2 <div class="span2">
3 我在左邊<br />
4 <br />
5 <br />
6 </div>
7 <div class="span10">
8 嵌了一個套
9 <div class="row ">
10 <div class="span4">
11 我在左邊<br />
12 <br />
13 </div>
14 <div class="span6">
15 我在右邊</div>
17 </div>
18 </div>
我這樣一嵌套，結果嵌套裡面兩個又不按套路出牌了。。。這是怎麼回事呢？？？哎，我也不知道，于是來摸索下吧。
他這個span 有個margin-left: 20px 的屬性，是以導緻換行了，我以為應該會自己處理呢。。。是以這裡就用流式布局吧：
9 <div class="row-fluid ">
14 <div class="span8">
布局暫時寫到這裡，我們接下來看看導航。
導航
首先，我們來看看最基本的導航樣式：
1 <ul class="nav nav-tabs">
2 <li class="active"><a href="#">首頁</a> </li>
3 <li><a href="#">我的部落格</a></li>
4 <li><a href="#">聯系我們</a></li>
5 </ul>
于是一個導航就出來啦，我們看他看着還不錯呢！于是我們看下他的代碼，我這裡看幾個關鍵點便是：
.nav-tabs {
border-bottom: 1px solid #DDDDDD;
}
.nav-tabs > li {
margin-bottom: -1px;
.nav-tabs > li, .nav-pills > li {
float: left;
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFFF;
border-color: #DDDDDD #DDDDDD transparent;
border-image: none;
border-style: solid;
border-width: 1px;
color: #555555;
cursor: default;
.nav-tabs > li > a {
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
line-height: 20px;
padding-bottom: 8px;
padding-top: 8px;
.nav-tabs > li > a, .nav-pills > li > a {
line-height: 14px;
margin-right: 2px;
padding-left: 12px;
padding-right: 12px;
.nav > li > a {
display: block;
a {
color: #0088CC;
text-decoration: none;
這塊CSS基本可以完成功能了，但是這種導航不好看，還真不好看呢。是以我們看看其它的樣式吧：
<ul class="nav nav-pills">
隻是換了個class就改變了我們的導航，真的不錯哦，這個導航還是挺好看的。
加一個nav-stacked後又可以水準排列了，這個樣式用于手機是很不錯的
導覽列
導覽列是我們真實需要的，一般都會有個顔色很不錯的導覽列，我們來看看bootstrap的導航呢。
1 <div class="navbar">
2 <div class="navbar-inner">
3 <a class="brand" href="#">葉小钗</a>
4 <ul class="nav">
5 <li class="active"><a href="#">首頁</a></li>
6 <li><a href="#">我的部落格</a></li>
7 <li><a href="#">關于我們</a></li>
8 </ul>
9 </div>
10 </div>
這個導覽列還是挺好看的，就是感覺他有點暗淡。。。。
品牌
<aclass="brand"href="#">Project name</a>這塊地方展示的是品牌名稱
PS：他的CSS中用了大量的float: left，我怎麼感覺有點不爽呢！
分隔符
<liclass="divider-vertical"></li>
需要分隔符的地方加一個這個家夥就可以了：
結語
今天簡單的看了下導航和布局，其實兩塊地方還是有很多東西的，比如現在的導航其實還是有許多東西要自己做的。
bootstrap提供了一些很不錯的東西，能不能用好就是我們自己的事情啦。中文了大家午安。
您可以考慮給小钗發個小額微信紅包以資鼓勵
本文轉自葉小钗部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2013/06/08/3125875.html如需轉載請自行聯系原作者
![Docker：安裝Docker Compose[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)