Bootstrap 框架 柵格布局系統設計原理

如果你是初次接觸bootstrap，你一定會為它的柵格布局感到敬佩。事實上，這個布局系統提供了一套響應式的布局解決方案。

既然這麼好用，那他是如何用css來實現的呢？

首先使用這個布局之前要定義一下**：

這行**如果不懂，可以搜尋一下，總之大致意思就是，被定義的元素的內邊距和邊框不再會增加它的寬度，不加入的話排版會有問題。

不過，bootstrap自己當然已經加入了，如果你是使用整個bootstrap框架，那你可以無視這裡，只是讓你明白需要乙個這個。

這裡實現了依據不同的寬度進行改變：

.container @media (min-width: 768px) }

@media (min-width: 992px) }
@media (min-width: 1200px) }
.container-fluid 

為什麼要padding 15px呢？

我覺得應該是為了如果你在容器 container 裡面寫其他東西，不至於挨邊。影響美觀。

最簡單的莫過於的 row 了。 

是不是感覺不錯：

.row

不過要注意的一點是，bootstrap實現了更好的響應式布局，列的種類是有很多種的。

.col-xs-* 針對超小螢幕 手機（<768px）

.col-sm-* 

小螢幕 平板 (≥768px)

.col-md-* 中等螢幕 桌面顯示器 (≥992px)(柵格引數)

.col-lg-* 針對特大的（≥

1200px）

這些是什麼意思？如何使用的呢？假設你寫如下**: 

<

div 
class
="col-sm-10 col-md-8"
>
div>
<
div 
class
="col-sm-3 col-md-4"
>
div>

說白了。就是在不同的寬度裡面bootstrap將幫助你選擇不同的類，你可以用這些類定義你想在不同寬度的介面排版。

col-xs-*的：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2,

/*後面**省略，選擇了所有的列，所有不同的列型別全部都有這樣的有這樣
*/.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 .col-xs-12 .col-xs-11 .col-xs-10 .col-xs-9 .col-xs-8 .col-xs-7 .col-xs-6 .col-xs-5 .col-xs-4 .col-xs-3 .col-xs-2 .col-xs-1 

@media (min-width: 1200px)

不過方便你研究，**也順便貼上。

.col-sm-* 

小螢幕 平板 (≥768px)

：.col-md-* 中等螢幕 桌面顯示器 (≥992px)(柵格引數)：

.col-lg就不貼了，差不多都是。

效果圖：

雖然說介紹了布局的基本原理，講得應該算是很詳細了。至少能寫出這麼多東西來。

不過 bootstrap 的布局可不止這些，你有沒有發現 .col-md-offset-* .col-md-push-* 這些類。用這些可以進行很好的細節的排版，不過在這裡就不講了，畢竟這篇文章不是寫如何使用 bootstrap 的，而是讓你理解 bootstrap 布局的實現原理。

密碼: ywd9

Bootstrap柵格布局

bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局，你的內容就...

Bootstrap柵格布局

1 柵格系統 布局 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。我在這裡是把bootstrap中的柵格系統叫做布局。它就是通過一系列的行 row 與列 column 的組合建立頁面布局，然後你的內容就可以...

bootstrap柵格系統布局

學習筆記 一 移動裝置優先 在html5 的專案中，我們做了移動端的專案。它有乙份非常重要的meta，用於設定螢幕和裝置等寬以及是否執行使用者縮放，及縮放比例的問題。分別為 螢幕寬度和裝置一致 初始縮放比例 最大縮放比例和禁止使用者縮放 二 布局容器 bootstrap 需要為頁面內容和柵格系統包裹...