淺談bootstrap網格系統

bootstrap提供了一套響應式，移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。
什麼是網格(grid)？
摘自維基百科：
在平面設計中，網格是一種由一系列用於組織內容的相交的直線（垂直的，水平的）組成的結構（通常是二維的），它廣泛應用於打印設計中的設計佈局和內容結構。
在網頁設計中，它是一種用於快速創建一致的佈局和有效地使用HTML和CSS的方法。
主要的作用有，讓網站易於瀏覽，並降低用戶端的負載。

什麼是bootstrap網格系統？
bootstrap包含了一個響應式的，移動設備優先的，不固定的網格系統，可以隨着設備或視口大小的增加而適當地擴展到12列。
它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。
讓我們來理解一下上面的語句。bootstrap3是移動設備優先的，在這個意義上，bootstrap代碼從小屏幕設備(比如移動設備，平板電腦)開始，然後擴展到大屏幕(比如筆記本電腦，臺式電腦)上的組件和網格。
移動設備優先策略
內容：決定什麼是最重要的。
佈局：優先設計更小的寬度。
基礎的css是移動設備優先，媒體查詢是針對平板電腦，臺式電腦。
漸進增強：
隨着屏幕大小的增加而添加元素。
響應式網格系統隨着屏幕或視口(viewprot)尺寸的增加，系統會自動分爲最多12列。

bootstrap網格系統(Grid System)的工作原理
網格系統通過一系列包含內容的行和列來創建頁面佈局，下面列出了bootstrap網格系統是如何工作的：
行必須放置在.container class內，以便獲得適當的對齊(alignment)和內邊距(padding)。
使用行來創建列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如.row和.col-xs-4，可用於快速創建網格佈局，less混合類可用於更多語義佈局。
列通過內邊距(padding)來創建列內容之間的間隙。
該內邊距是通過.rows上的外邊距(margin)取負，表示第一列和最後一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來創建。
例如，要創建三個相等的列，則使用三個，col-xs-4。
媒體查詢：
媒體查詢是非常別緻的“有條件的CSS規則”，它只適用於一些基於某些規定條件的CSS，如果滿足啊那些條件，則應用相應的樣式。
bootstrap中的媒體查詢允許您基於視口大小移動，顯示並隱藏內容。
下面的媒查詢咋less文件中使用，用來創建bootstrap網格系統中的關鍵的分界點閾值。
/超小設備(手機，小於768px)/
/bootstrap中默認情況下沒有媒體查詢/

/小型設備（平板電腦，768px 起）/
@media (min-width:@screen-sm-min){…}

/中型設備(臺式電腦，992px起)/
@media(min-width:@screen-md-min){…}

/大型設備(大臺式電腦，1200px起)/
@media(min-width:@screen-lg-min){…}

我們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小之內。
@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }

媒體查詢有兩個部分，先是一個設備規範，然後是一個大小規則。在上面的案列中，設置了下列的規則，讓我們來看下面的代碼：
@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){…}
對於所有帶有min-width：@screen-sm-min的設備，如果屏幕的寬小於@screen-sm-max，則會進行一些處理。
網格選項
下表總結了 Bootstrap 網格系統如何跨多個設備工作：
超小設備手機（<768px）小型設備平板電腦（≥768px）中型設備臺式電腦（≥992px）大型設備臺式電腦（≥1200px）
網格行爲一直是水平的以摺疊開始，斷點以上是水平的以摺疊開始，斷點以上是水平的以摺疊開始，斷點以上是水平的
最大容器寬度 None (auto) 750px 970px 1170px
Class 前綴 .col-xs- .col-sm- .col-md- .col-lg-
列數量和 12 12 12 12
最大列寬 Auto 60px 78px 95px
間隙寬度 30px（一個列的每邊分別 15px） 30px（一個列的每邊分別 15px） 30px（一個列的每邊分別 15px） 30px（一個列的每邊分別 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

基本的網格結構
下面是bootstrap網格的基本結構：

...

... 實例：堆疊的水平實例：中型和大型設備實例：手機，平板電腦，臺式電腦

響應式的列重置
以下實例包含了4個網格，但是我們在小設備瀏覽時無法確定網格的顯示的位置。
爲了解決這個問題，可以使用 .clearfix class和響應式實用工具來解決，如下面實例所示：
實例：

<div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3" 
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
            </p>
        </div>
 
        <div class="clearfix visible-xs"></div>
 
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
            </p>
        </div>
    </div>
</div>

瀏覽器上調整窗口大小查看變化，或在您手機上查看效果。
偏移列
偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支持偏移，但是它們可以簡單地通過使用一個空的單元格來實現該效果。

爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。

在下面的實例中，我們有

…

，我們將使用 .col-md-offset-3 class 來居中這個 div。

實例

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>

嵌套列
爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。
在下面的實例中，佈局有兩個列，第二列被分爲兩行四個盒子。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分爲四個盒子</h4>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

列排序
Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然後以另一種順序顯示列。
您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。
在下面的實例中，我們有兩列布局，左列很窄，作爲側邊欄。我們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。
實例：

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序後
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
</div>

各位看官，看完如果有意思的話，順便點個贊吧，給生活一點陽光，如此溫暖~

淺談bootstrap網格系統

淺談bootstrap網格系統

淺談jQuery中的callback函數

JS中var，let，const的區別是什麼？

如何使用jQuery來操縱HTML元素的內容

使用Object.setPrototypeOf()設置對象的原型

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結