學習筆記
一．移動裝置優先
在html5 的專案中，我們做了移動端的專案。它有乙份非常重要的meta，用於設定螢幕和裝置等寬以及是否執行使用者縮放，及縮放比例的問題。
//分別為：螢幕寬度和裝置一致、初始縮放比例、最大縮放比例和禁止使用者縮放
二．布局容器
bootstrap 需要為頁面內容和柵格系統包裹乙個.container 容器（固定寬度布局容器）container-fluid流體布局容器。由於padding 等屬性的原因，這兩種容器類不能相互巢狀。就是固定寬度容器不能和流體布局寬度也就是百分比布局容器巢狀使用。
//固定寬度（寬度固定為1200）
...//100%寬度
...
與列(column)的組合來建立頁面布局。工作原理如下：
1.「行（row）」必須包含在.container （固定寬度）或.container-fluid （100%寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
2.通過「行（row）」在水平方向建立一組「列（column）」。
3.你的內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。
4.類似.row 和.col-xs-4 這種預定義的類，可以用來快速建立柵格布局。bootstrap 原始碼中定義的mixin 也可以用來建立語義化的布局。
5.通過為「列（column）」設定padding 屬性，從而建立列與列之間的間隔（gutter）通過為.row 元素設定負值margin 從而抵消掉為.container 元素設定的padding，也就間接為「行（row）」所包含的「列（column）」抵消掉了padding。
6.負值的margin 就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。
7.柵格系統中的列是通過指定1 到12 的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個.col-xs-4 來建立。
8.如果一「行（row）」中包含了的「列（column）」大於12，多餘的「列（column）」所在的元素將被作為乙個整體另起一行排列。
9.柵格類適用於與螢幕寬度大於或等於分界點大小的裝置， 並且針對小螢幕裝置覆蓋柵格類。因此，在元素上應用任何.col-md-* 柵格類適用於與螢幕寬度大於或等於分界點大小的裝置，並且針對小螢幕裝置覆蓋柵格類。因此，在元素上應用任何.col-lg-*不存在， 也影響大螢幕裝置。
//建立乙個響應式行
...
//建立最多12 列的響應式行12
3456
78910
1112
//為了顯示明顯的css
.a
//總列數都是12，每列分配多列，超出列出自動換行顯示
1-45-8
9-12
1-89-12
柵格參數列
如上圖所示，柵格系統最外層區分了四種寬度的瀏覽器：超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而內層.container 容器的自適應寬度為：自動、750px、970px 和1170px。自動的意思為，如果你是手機螢幕，則全面獨佔一行顯示。
//四種螢幕分類全部啟用 4
4444
4444
4 44
//有時我們可以設定列偏移，讓中間保持空隙83
//也可以巢狀，嵌滿也是12 列
1-89-12
11-12
//可以把兩個列交換位置，push 向左移動，pull 向右移動93
乙個實戰例子和效果圖：
其中運用了柵格布局，將一列分成兩份沒分佔6，每份裡面用了media類，也就是以及描述，
>強大的師資力量，完美的實戰型管理課程，讓您的企業實現質的騰飛！
class=
"row"
>
class=
"col-md-6"
>
class=
"media"
>
class=
"media-left"
>
"img/tab1-1.png"
alt=
"" />
class=
"media-body"
>
class=
"media-heading"
>服務團隊
class=
"text-muted"
>其他：社會招聘的、服務水平參差不齊的普通員工！
其他：內部培養、經受過良好高階服務培訓的高標準員工！
class=
"col-md-6 col"
>
class=
"media"
>
class=
"media-left"
>
"img/tab1-2.png"
alt=
"" />
class=
"media-body"
>
class=
"media-heading"
>服務團隊
class=
"text-muted"
>其他：社會招聘的、服務水平參差不齊的普通員工！
其他：內部培養、經受過良好高階服務培訓的高標準員工！
class=
"col-md-6 col"
>
class=
"media"
>
class=
"media-left"
>
"img/tab1-3.png"
alt=
"" />
class=
"media-body"
>
class=
"media-heading"
>服務團隊
class=
"text-muted"
>其他：社會招聘的、服務水平參差不齊的普通員工！
其他：內部培養、經受過良好高階服務培訓的高標準員工！
class=
"col-md-6 col"
>
class=
"media"
>
class=
"media-left"
>
"img/tab1-4.png"
alt=
"" />
class=
"media-body"
>
class=
"media-heading"
>服務團隊
class=
"text-muted"
>其他：社會招聘的、服務水平參差不齊的普通員工！
其他：內部培養、經受過良好高階服務培訓的高標準員工！
Bootstrap柵格布局
bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局，你的內容就...
Bootstrap柵格布局
1 柵格系統 布局 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。我在這裡是把bootstrap中的柵格系統叫做布局。它就是通過一系列的行 row 與列 column 的組合建立頁面布局，然後你的內容就可以...
Bootstrap的柵格系統 基礎布局
行必須包含在.container或.container fluid裡面，前者是固定布局，後者是100 寬度布局。行的類是.row，通過行在水平方向建立一組列。內容應該放在 列 裡，並且只有列可以作為行的直接子元素。如果一行包含的列多餘12，多餘的列所在的元素就會另起一行排列。bootstrap的柵格...