文章來源： Slark.NET-博客園http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html
上一節：ASP.NET MVC5 + EF6 入門教程 (6) View中的Razor使用
下一節：ASP.NET MVC5 + EF6 + Bootstrap3 (8) View中的HtmlHelper用法大全(上)
源碼下載：點我下載
要做一個完整的系統，除了需要MVC這樣的B/S框架及EF這樣的數據庫訪問技術之外，一個簡潔、美觀、大方的UI框架也是必不可少的。
話不多說，有請今天的主角登場！！
看看它的自我介紹，是不是很屌。沒錯，這個介紹一點都不誇張。
回想起第一次工作中用Bootstrap做了一個專題網站，我們外籍老板就說了一個字：Amazing！
從來沒有一款UI框架可以給我如此震撼，如此耳目一新的感覺。
再上一個應用了Bootstrap的網站主頁：
回到正題，其實在我們的教學項目中已經默認包含了Bootstrap3的UI框架，請看解決方案資源管理器的Content和Scripts文件夾：
其中bootstrap.css和bootstrap.min.css的功能是完全一樣的。只是bootstrap.css格式整齊，適合查看編輯。bootstrap.min.css去掉了沒用的格式上的東西，體積小頁面載入速度快。bootstrap.js和bootstrap.min.js也是這個關系。
下面進入正題，介紹Bootstrap的柵格系統。
什么是柵格系統？先來個實例。
在解決方案資源管理器 Views\First\Index.cshtml文件中，刪除掉原有代碼，寫入下面代碼。
<html> <head> @Styles.Render("~/Content/css") <style> div div div{ border:solid 1px gray; margin-top:3px; background:#cccccc; text-align:center; } </style> </head> <body style="padding:0"> <div id="width"></div> <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> <div class="row"> <div class="col-md-12">.col-md-12</div> </div> </div> @Scripts.Render("~/bundles/jquery") <script> function setWidth() { $('#width').text("Window width:" + document.body.clientWidth); } setInterval("setWidth()", 100); </script> </body> </html>
點擊在瀏覽器中查看按鈕，可以看到如下結果。下圖中一行一行、一列一列的東西就是柵格。上面代碼中@Styles.Render("~/Content/css")的作用是引入Content文件夾下的所有css文件。<style>...</style>中的代碼是為了清晰的顯示出如下所示的柵格效果。而下面的<script>...</script>是為了在頁面左上角實時顯示頁面寬度，后面會用到。
由下面的效果圖可以看出柵格一行最多為12列。我們首先關注每個格子的class的最后的數字。很顯然，1占一列，2占兩列，依次類推。一行的總和到12就能把一行12列填滿。但是不一定要填滿，可以少也可以多，后面會講到。
.col-md-1中的md是什么意思呢？它定義了一個頁面的臨界值。當頁面寬度大於這個臨界值時，一行的每一個格子會水平排列，而頁面寬度小於臨界值時格子會豎直排列。這樣的好處是使頁面可以適應不同寬度的屏幕，當屏幕寬度減小時，豎直排列以使內容不受擠壓。
是不是有點暈？來個例子。
將上面Index.cshtml的<div class="container">...</div>中的內容換成如下代碼：
<div class="container"> <div class="row"> <div class="col-lg-6">.col-lg-6</div> <div class="col-lg-6">.col-lg-6</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> </div>
看上面代碼，除了md之外還有lg、sm、xs。現在我們來執行這個頁面改變寬度來看看是什么效果。
寬度1222px所有行沒有豎直排列。
寬度1080px,lg行豎直排列。這是因為lg行的臨界寬度是1200px，小於此寬度即會豎直排列。大於這個臨界值的屏幕被定義為大桌面顯示器，因此標有lg的柵格就會在大桌面顯示器中水平排列而在小於它的顯示器中豎直排列。
繼續縮到901px，md行也豎直排列，其臨界寬度為992px。992px到1200px的屏幕被定義為桌面顯示器，即標有md的柵格在大於等於桌面顯示器寬度時水平顯示，而小於它時豎直排列。
接着縮到640px，sm行也豎直排列，其臨界寬度為768px。768px到992px的屏幕被定義為平板，因此有sm標記的柵格在大於等於平板寬度的屏幕中水平顯示而在小於平板的屏幕中豎直排列。
接着再縮小屏幕寬度的話，帶有xs標記的柵格也不會豎直排列。屏幕寬度小於768px的屏幕被定義為手機。因此標有xs的柵格在任何屏幕中都會水平排列。
再次強調一下，這種根據屏幕寬度變化排列方式的柵格是為了使顯示的內容在各種屏幕中都能有足夠的顯示寬度，不會被擠得太窄。
說完.col-md-1這類元素，我們再看看其它元素。
包裹這些.col-md-1的列元素的是形如<div class="row"></div>的行元素。每一個行元素可以被若干個列數和為12的列元素填滿。
要形成一個完整的柵格系統，在幾個行元素之外還需要一個容器。這個容器有兩種，一種是container一種是container-fluid。
將上面的Index.cshtml文件的<div class="container">...</div>的內容替換成下面內容：
<div class="container"> <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> </div> <br/> <div class="container-fluid"> <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> </div>
運行頁面得到結果如下。container的每列寬度及整體寬度是一個固定值而container-fluid的寬度是100%隨其所在的父元素的寬度的變化而變化，其每列的寬度自然是總寬度的十二分之一。
當一行的列數和多余或少於12會怎樣呢？運行下面柵格。
<div class="container"> <div class="row"> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-4">.col-xs-3</div> </div> <div class="row"> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-5">.col-xs-5</div> <div class="col-xs-2">.col-xs-2</div> <div class="col-xs-5">.col-xs-5</div> <div class="col-xs-3">.col-xs-3</div> </div> </div>
運行結果如下：
第一行一共7列后面5列空缺，可以看到當列數不足12時，柵格從左往右排列，不夠的會空出來。第二行一共19列，多出來的部分另起了一行依然是從左往右拍，看起來跟一個新行沒有區別。
每一個柵格默認都是左對齊，從左向右依次排列，是不是有點死板。Ok，我們來用列偏移，把他們放到我們想要的位置，做個金字塔怎么樣？
代碼如下：
<div class="container"> <div class="row"> <div class="col-md-1 col-md-offset-5">.col-md-1 .col-md-offset-5</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-4">.col-md-3 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-5 col-md-offset-3">.col-md-5 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-7 col-md-offset-2">.col-md-7 .col-md-offset-2</div> </div> <div class="row"> <div class="col-md-9 col-md-offset-1">.col-md-9 .col-md-offset-1</div> </div> </div>
代碼中col-md-offset-2的意思是向右平移2列，所以第一行列寬1向右平移5列，第二行列寬3向右平移4列，依次類推。效果如下圖：
只能向右平移？這不能滿足我。我們得要柵格變換像洗牌一樣唰唰唰打亂，看代碼：
<div class="container"> <div class="row"> <div class="col-md-1 ">1</div> <div class="col-md-1 ">2</div> <div class="col-md-1 ">3</div> <div class="col-md-1 ">4</div> <div class="col-md-1 ">5</div> <div class="col-md-1 ">6</div> </div> <div class="row"> <div class="col-md-1 col-md-push-4">1</div> <div class="col-md-1 col-md-push-1">2</div> <div class="col-md-1 col-md-pull-2">3</div> <div class="col-md-1 col-md-push-2">4</div> <div class="col-md-1 col-md-pull-3">5</div> <div class="col-md-1 col-md-pull-2">6</div> </div> </div>
看結果：
從代碼上看第一行和第二行div的順序都是123456，怎么第二行就被洗牌了？那就多虧了push和pull。例如第一行1在第一列，而在第二行它被推到了第五列，因為1的div中有push-4把它推了4列。同理在第一行里的6在第六列在第二行里跑到了第四列，因為它被拉回去兩列即pull-2。其他的同理。
其實柵格不僅可以來回動，還能像洋蔥一樣一層層嵌套。就是col里放row，row里放col，col里再放row...
示例代碼如下：
<div class="container"> <div class="row"> <div class="col-md-6 ">Level 1</div> <div class="col-md-6 ">Level 1</div> </div> <div class="row"> <div class="col-md-6 ">Level 1</div> <div class="col-md-6 "> Level 1<div class="row"> <div class="col-md-6 ">Level 2</div> <div class="col-md-6 ">Level 2</div> </div> <div class="row"> <div class="col-md-6 ">Level 2</div> <div class="col-md-6 "> Level 2<div class="row"> <div class="col-md-6 ">Level 3</div> <div class="col-md-6 ">Level 3</div> </div> <div class="row"> <div class="col-md-6 ">Level 3</div> <div class="col-md-6 ">Level 3</div> </div> </div> </div> </div> </div> </div>
結果如下：
至此，Bootstrap柵格系統已被玩壞。小弟也已精疲力盡。
各位大俠給幾個推薦和留言打賞吧？
上一節：ASP.NET MVC5 + EF6 入門教程 (6) View中的Razor使用
下一節：ASP.NET MVC5 + EF6 + Bootstrap3 (8) View中的HtmlHelper用法大全(上)