## 一、什么是 Bootstrap？ Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。 ## 二、為什么使用 Bootstrap？ * **移動設備優先**：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設備優先的樣式。 * **瀏覽器支持**：所有的主流瀏覽器都支持 Bootstrap。 * **容易上手**：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。 * **響應式設計**：Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。  * 它為開發人員創建接口提供了一個簡潔統一的解決方案。 * 它包含了功能強大的內置組件，易于定制。 * 它還提供了基于 Web 的定制。 * 它是開源的。 ## 三、Bootstrap 包的內容 * **基本結構**：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。 * **CSS**：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。 * **組件**：Bootstrap 包含了十幾個可重用的組件，用于創建圖像、下拉菜單、導航、警告框、彈出框等等。 * **JavaScript 插件**：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。 * **定制**：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。 ## 四、Boostrap 網格系統 Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。 ### 1、簡介 柵格系統用于通過一系列的行（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-*`不存在， 也影響大屏幕設備。 ### 2、媒體查詢 在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值。 ``` /* 超小屏幕（手機，小于 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } ``` ### 3、柵格參數 通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。  ### 4、實例：從堆疊到水平排列 使用單一的一組`.col-md-*`柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ”`.row`內。  ``` <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> ``` ### 5、實例：移動設備和桌面屏幕 是否不希望在小屏幕設備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即`.col-xs-*`和`.col-md-*`。請看下面的實例，研究一下這些是如何工作的。  ~~~html <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> ~~~