官方文件
需要引入的js檔案
123
1.布局容器
bootstrap需要為頁面內容和柵格系統包裹乙個.container容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種 容器類不能互相巢狀。
.container類用於固定寬度並支援響應式布局的容器。
123
...
.container-fluid類用於 100% 寬度，佔據全部視口（viewport）的容器。
123
...
bootstrap提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。
簡介柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局，你的內容就可以放入這些建立好的布局中。下面就介紹一下 bootstrap 柵格系統的工作原理：
「行（row）」必須包含在.container（固定寬度）或.container-fluid（100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
通過「行（row）」在水平方向建立一組「列（column）」。
你的內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。
類似.row和.col-xs-4這種預定義的類，可以用來快速建立柵格布局。bootstrap原始碼中定義的 mixin 也可以用來建立語義化的布局。
通過為「列（column）」設定padding屬性，從而建立列與列之間的間隔（gutter）。通過為.row元素設定負值margin從而抵消掉為.container元素設定的padding，也就間接為「行（row）」所包含的「列（column）」抵消掉了padding。
負值的margin就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。
柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個.col-xs-4來建立。
如果一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被作為乙個整體另起一行排列。
柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何.col-md-*柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何.col-lg-*不存在， 也影響大螢幕裝置。
通過研究後面的例項，可以將這些原理應用到你的**中。
例項：從堆疊到水平排列
使用單一的一組.col-md-*柵格類，就可以建立乙個基本的柵格系統，在手機和平板裝置上一開始是堆疊在一起的（超小螢幕到小螢幕這一範圍），在桌面（中等）螢幕裝置上變為水平排列。所有「列（column）必須放在 」.row內。
1234567
891011
1213
1415
1617
1819
2021
2223
2425
2627
.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-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
例項：流式布局容器
將最外面的布局元素.container修改為.container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。
12345
...
例項：移動裝置和桌面螢幕
是否不希望在小螢幕裝置上所有列都堆疊在一起？那就使用針對超小螢幕和中等螢幕裝置所定義的類吧，即.col-xs-*和.col-md-*。請看下面的例項，研究一下這些是如何工作的。
1234567
891011
1213
1415
1617
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
例項：手機、平板、桌面
在上面案例的基礎上，通過使用針對平板裝置的 .col-sm-* 類，我們來建立更加動態和強大的布局吧。
1234567
891011
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
具體的就不記了可以去官網看，加油
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
Bootstrap柵格系統
bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。頁面中的一行，比例可以自己定義，但必須保證是12列，如果缺少...
bootstrap 柵格系統
cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...