ASP.NETMVC5+EF6+Bootstrap3(7)Bootstrap的柵格系統(tǒng)_html/css

上一節(jié)：ASP.NET MVC5 + EF6 入門教程 (6) View中的Razor使用

源碼下載：點我下載

要做一個完整的系統(tǒng)，除了需要MVC這樣的B/S框架及EF這樣的數(shù)據(jù)庫訪問技術(shù)之外，一個簡潔、美觀、大方的UI框架也是必不可少的。

話不多說，有請今天的主角登場！！

看看它的自我介紹，是不是很?。沒錯，這個介紹一點都不夸張。

回想起第一次工作中用Bootstrap做了一個專題網(wǎng)站，我們外籍老板就說了一個字：Amazing！

從來沒有一款UI框架可以給我如此震撼，如此耳目一新的感覺。

再上一個應(yīng)用了Bootstrap的網(wǎng)站主頁：

回到正題，其實在我們的教學(xué)項目中已經(jīng)默認(rèn)包含了Bootstrap3的UI框架，請看解決方案資源管理器的Content和Scripts文件夾：

其中bootstrap.css和bootstrap.min.css的功能是完全一樣的。只是bootstrap.css格式整齊，適合查看編輯。bootstrap.min.css去掉了沒用的格式上的東西，體積小頁面載入速度快。bootstrap.js和bootstrap.min.js也是這個關(guān)系。

下面進(jìn)入正題，介紹Bootstrap的柵格系統(tǒng)。

什么是柵格系統(tǒng)？先來個實例。

在解決方案資源管理器 Views\First\Index.cshtml文件中，刪除掉原有代碼，寫入下面代碼。

 @Styles.Render("~/Content/css")  .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-3 .col-md-3 .col-md-3 .col-md-3 .col-md-6 .col-md-6 .col-md-12 @Scripts.Render("~/bundles/jquery") 

點擊在瀏覽器中查看按鈕，可以看到如下結(jié)果。下圖中一行一行、一列一列的東西就是柵格。上面代碼中@Styles.Render("~/Content/css")的作用是引入Content文件夾下的所有css文件。中的代碼是為了清晰的顯示出如下所示的柵格效果。而下面的

看上面代碼，除了md之外還有l(wèi)g、sm、xs。現(xiàn)在我們來執(zhí)行這個頁面改變寬度來看看是什么效果。

寬度1222px所有行沒有豎直排列。

寬度1080px,lg行豎直排列。這是因為lg行的臨界寬度是1200px，小于此寬度即會豎直排列。大于這個臨界值的屏幕被定義為大桌面顯示器，因此標(biāo)有l(wèi)g的柵格就會在大桌面顯示器中水平排列而在小于它的顯示器中豎直排列。

繼續(xù)縮到901px，md行也豎直排列，其臨界寬度為992px。992px到1200px的屏幕被定義為桌面顯示器，即標(biāo)有md的柵格在大于等于桌面顯示器寬度時水平顯示，而小于它時豎直排列。

接著縮到640px，sm行也豎直排列，其臨界寬度為768px。768px到992px的屏幕被定義為平板，因此有sm標(biāo)記的柵格在大于等于平板寬度的屏幕中水平顯示而在小于平板的屏幕中豎直排列。

接著再縮小屏幕寬度的話，帶有xs標(biāo)記的柵格也不會豎直排列。屏幕寬度小于768px的屏幕被定義為手機。因此標(biāo)有xs的柵格在任何屏幕中都會水平排列。

再次強調(diào)一下，這種根據(jù)屏幕寬度變化排列方式的柵格是為了使顯示的內(nèi)容在各種屏幕中都能有足夠的顯示寬度，不會被擠得太窄。

說完.col-md-1這類元素，我們再看看其它元素。

包裹這些.col-md-1的列元素的是形如的行元素。每一個行元素可以被若干個列數(shù)和為12的列元素填滿。

要形成一個完整的柵格系統(tǒng)，在幾個行元素之外還需要一個容器。這個容器有兩種，一種是container一種是container-fluid。

將上面的Index.cshtml文件的...的內(nèi)容替換成下面內(nèi)容：

 .col-sm-6 .col-sm-6 .col-md-4 .col-md-4 .col-md-4 
 .col-sm-6 .col-sm-6 .col-md-4 .col-md-4 .col-md-4 

運行頁面得到結(jié)果如下。container的每列寬度及整體寬度是一個固定值而container-fluid的寬度是100%隨其所在的父元素的寬度的變化而變化，其每列的寬度自然是總寬度的十二分之一。

當(dāng)一行的列數(shù)和多余或少于12會怎樣呢？運行下面柵格。

 .col-xs-4 .col-xs-3 .col-xs-4 .col-xs-5 .col-xs-2 .col-xs-5 .col-xs-3 

運行結(jié)果如下：

第一行一共7列后面5列空缺，可以看到當(dāng)列數(shù)不足12時，柵格從左往右排列，不夠的會空出來。第二行一共19列，多出來的部分另起了一行依然是從左往右拍，看起來跟一個新行沒有區(qū)別。

每一個柵格默認(rèn)都是左對齊，從左向右依次排列，是不是有點死板。Ok，我們來用列偏移，把他們放到我們想要的位置，做個金字塔怎么樣？

代碼如下：

 .col-md-1 .col-md-offset-5 .col-md-3 .col-md-offset-4 .col-md-5 .col-md-offset-3 .col-md-7 .col-md-offset-2 .col-md-9 .col-md-offset-1 

代碼中col-md-offset-2的意思是向右平移2列，所以第一行列寬1向右平移5列，第二行列寬3向右平移4列，依次類推。效果如下圖：

只能向右平移？這不能滿足我。我們得要柵格變換像洗牌一樣唰唰唰打亂，看代碼：

 1 2 3 4 5 6 1 2 3 4 5 6 

看結(jié)果：

從代碼上看第一行和第二行div的順序都是123456，怎么第二行就被洗牌了？那就多虧了push和pull。例如第一行1在第一列，而在第二行它被推到了第五列，因為1的div中有push-4把它推了4列。同理在第一行里的6在第六列在第二行里跑到了第四列，因為它被拉回去兩列即pull-2。其他的同理。

其實柵格不僅可以來回動，還能像洋蔥一樣一層層嵌套。就是col里放row，row里放col，col里再放row...

示例代碼如下：

 Level 1 Level 1 Level 1 Level 1 Level 2 Level 2 Level 2 Level 2 Level 3 Level 3 Level 3 Level 3 

結(jié)果如下：

至此，Bootstrap柵格系統(tǒng)已被玩壞。小弟也已精疲力盡。

各位大俠給幾個推薦和留言打賞吧？

上一節(jié)：ASP.NET MVC5 + EF6 入門教程 (6) View中的Razor使用

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com