響應式作為Bootstrap的一大特色。柵格系統可謂是功不可沒，既然如此，那我們就來看一下柵格系統是怎樣幫助bootstrap實現響應式布局的呢？

1、什么是柵格系統

我們能夠從Bootstrap的官網上找到比較官方的回答：Bootstrap提供了一套響應式、移動設備優先的流失柵格系統，隨著屏幕或視口(viweport)的添加，系統會自己主動分為最多12列。

它包括了易于使用的提前定義類，還有強大的mixin用于生成更具語義的布局。

這樣的說法是比較精準并且明了的。可是還能夠更通俗一點的來解釋：將視口等分12列，當中的元素占領不同的列數，當視口改變時，元素所占領的列數會對應改變。當然這是我臨時的理解。

2、一個最簡單的柵格演示樣例

我先上一段我用來做演示樣例的代碼，和對應的效果展示：

<div class="container"><div class="row part-msg"><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="顯示的圖片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="顯示的圖片片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="顯示的圖片片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="顯示的圖片片" class=" img-responsive" /></div><div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="顯示的圖片" class=" img-responsive" /></div> <div class="col-md-4 col-lg-2 col-sm-5"><img src="img/261877.jpg" alt="顯示的圖片" class=" img-responsive" /></div></div> </div>

我電腦當前的分辨率為1600*900。這是的顯示效果例如以下：

當我縮小瀏覽器大小到一定程度時。再來查看顯示效果：

然后此種情況下我繼續縮小瀏覽器視口，會發現布局會進一步的改變：

而當我進一步縮小視口的時候，圖片布局也對應的發生了改變，從而顯示了終結效果：

看到了這種效果，和我最簡單的描寫敘述，如今預計會有一個最大的疑惑，縮小到什么程度才會有對應的效果呢，柵格系統在這里是怎么表現的呢？

3、演示樣例代碼分析

首先，在代碼的最外層有一個<div class="container"></div>,作為一個div出現。我們非常easy想到，它是一個獨立的模塊。而它詳細的表現形式呢。我們來看下對應樣式表中的設置：

.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;} }

這里我們在container里看到了一個熟悉的代碼：margin-right:auto;margin-left:auto;這不由讓我想起了我們最經常使用的margin:0px auto；就是居中效果。而在這里相同依據屏幕大小設定的它的固定寬度。當然，我們相同要注意一點。這里是沒有設置高度的，假設用來布局的話，高度的問題還須要注意協調，這個后面再說。

而我們在這個地方看到了三個用來做界限切割的視口尺寸：768px、992px、1200px。那這三個尺寸是不是與我之前的操作有對應的關系呢，答案是肯定的，就是由于它的關系。

我們來看官網在這里的解釋：

我們在代碼編寫中也用到了對應的class屬性:col-md-、col-lg-、col-sm-、col-xs-等等，而這里的md則是middle，lg代表了large，sm代表了small，xs也就代表了“更小。極小”的意思吧。這時候我們再來看上面的代碼是不是很基礎，可謂是簡單至極。

可是另一個細節我們絕對是不能夠忽視的，那就是<div class="row"></div>的存在。它的存在意義是什么呢？

假設出現row、column的字眼，最先想起來的是什么，對了，就是table，表格中才有行列，而這也就是我們的網格系統了，既然有了col-。那怎么能少的了row。并且列也僅僅能在行中體現，行的以下僅僅能是列，而對應行的對應列才是一個詳細的單元格，才干寫內容，而這里的row也僅僅能被放置在container或者container-fluid之內。

至于對于行和列的設定，我們能夠來看下樣式表里的定義：

.row {margin-right: -15px;margin-left: -15px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left; } .col-xs-12 {width: 100%; } .col-xs-11 {width: 91.66666667%; } .col-xs-10 {width: 83.33333333%; } .col-xs-9 {width: 75%; } .col-xs-8 {width: 66.66666667%; } .col-xs-7 {width: 58.33333333%; } .col-xs-6 {width: 50%; } .col-xs-5 {width: 41.66666667%; } .col-xs-4 {width: 33.33333333%; } .col-xs-3 {width: 25%; } .col-xs-2 {width: 16.66666667%; } .col-xs-1 {width: 8.33333333%; }

看到這里的.row的設置，發現了什么呢，還記得.container的設置么。padding:0px 15px;而這里的margin卻是-15px啊。

就這樣，最簡單的柵格系統就完畢了，突然感覺好高大上...



轉載于:https://www.cnblogs.com/claireyuancy/p/6817236.html

總結

以上是生活随笔為你收集整理的积跬步，聚小流------Bootstrap学习记录(3)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。