Bootstrop的起步使用方法php
Bootstrap 中文網 爲 Bootstrap 專門構建了本身的免費 CDN 加速服務。基於國內雲廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN 主頁查看更多可用的工具庫css
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件（通常不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 以前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
還能夠經過 Bower 安裝並管理 Bootstrap 的 Less、CSS、JavaScript 和字體文件。html
$ bower install bootstrap
你還能夠利用 npm 工具來安裝 Bootstrap：前端
$ npm install bootstrap
require('bootstrap') 代碼的做用是加載 Bootstrap 的全部 jQuery 插件。其中，bootstrap 模塊自身並不導出任何內容。你能夠經過加載安裝包頂級目錄下的 /js/*.js 文件的方式手動加載單個的 Bootstrap 插件。html5
Bootstrap 的 package.json 文件包含了一些額外的元數據：node
less - Bootstrap 源碼的入口 Less 文件的路徑style - Bootstrap 的未壓縮 CSS 文件的路徑經過 Composer （中文官網：Composer 中文網）也能夠安裝 Bootstrap 安裝包，其中包括 Less、CSS、JavaScript 和 fonts 文件：jquery
$ composer require twbs/bootstrap
Bootstrap 利用 Autoprefixer 自動爲 某些 CSS 屬性添加針對特定廠商的前綴。若是你是從 Less/Sass 源碼編譯 Bootstrap 的，而且沒有使用 Bootstrap 自帶的 Gruntfile 文件，那你就必須將 Autoprefixer 集成到你的編譯工具和編譯過程當中。若是你使用的是咱們預先編譯好的 Bootstrap 文件或者使用的是咱們提供的 Gruntfile 文件，那就無需操心了，咱們已經將這些工做替你搞定了。ios
Bootstrap 提供了兩種形式的壓縮包，在下載下來的壓縮包內能夠看到如下目錄和文件，這些文件按照類別放到了不一樣的目錄內，而且提供了壓縮與未壓縮兩種版本。git
請注意，Bootstrap 的全部 JavaScript 插件都依賴 jQuery，所以 jQuery 必須在 Bootstrap 以前引入，就像在基本模版中所展現的同樣。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。github
下載壓縮包以後，將其解壓縮到任意目錄便可看到如下（壓縮版的）目錄結構：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
上面展現的就是 Bootstrap 的基本文件結構：預編譯文件能夠直接使用到任何 web 項目中。咱們提供了編譯好的 CSS 和 JS (bootstrap.*) 文件，還有通過壓縮的 CSS 和 JS (bootstrap.min.*) 文件。同時還提供了 CSS 源碼映射表 (bootstrap.*.map) ，能夠在某些瀏覽器的開發工具中使用。同時還包含了來自 Glyphicons 的圖標字體，在附帶的 Bootstrap 主題中使用到了這些圖標。
Bootstrap 源碼包含了預先編譯的 CSS、JavaScript 和圖標字體文件，而且還有 LESS、JavaScript 和文檔的源碼。具體來講，主要文件組織結構以下：
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/、js/ 和 fonts/ 目錄分別包含了 CSS、JS 和字體圖標的源碼。dist/ 目錄包含了上面所說的預編譯 Bootstrap 包內的全部文件。docs/ 包含了全部文檔的源碼文件，examples/ 目錄是 Bootstrap 官方提供的實例工程。除了這些，其餘文件還包含 Bootstrap 安裝包的定義文件、許可證文件和編譯腳本等。
Bootstrap 使用 Grunt 做爲編譯系統，而且對外提供了一些方便的方法用於編譯整個框架。下面講解的就是如何編譯源碼、運行測試用例等內容。
安裝 Grunt 前，你須要首先下載並安裝 node.js （npm 已經包含在內）。npm 是 node packaged modules 的簡稱，它的做用是基於 node.js 管理擴展包之間的依賴關係。
而後在命令行中輸入如下命令：grunt-cli ：npm install -g grunt-cli 。/bootstrap/ 根目錄，而後執行 npm install 命令。npm 將讀取 package.json 文件並自動安裝此文件中列出的全部被依賴的擴展包。上述步驟完成後，你就能夠運行 Bootstrap 所提供的各個 Grunt 命令了。
grunt dist （僅編譯 CSS 和 JavaScript 文件）從新生成 /dist/ 目錄，並將編譯壓縮後的 CSS 和 JavaScript 文件放入這個目錄中。做爲一名 Bootstrap 用戶，大部分狀況下你只須要執行這一個命令。
grunt watch （監測文件的改變，並運行指定的 Grunt 任務）監測 Less 源碼文件的改變，並自動從新將其編譯爲 CSS 文件。
grunt test （運行測試用例）在 PhantomJS 環境中運行 JSHint 和 QUnit 自動化測試用例。
grunt docs （編譯並測試文檔中的資源文件）編譯並測試 CSS、JavaScript 和其餘資源文件。在本地環境下經過 jekyll serve 運行 Bootstrap 文檔時須要用到這些資源文件。
grunt （從新構建全部內容並運行測試用例）編譯並壓縮 CSS 和 JavaScript 文件、構建文檔站點、對文檔作 HTML5 校驗、從新生成定製工具所需的資源文件等，都須要 Jekyll 工具。這些只有在你對 Bootstrap 深度研究時纔有用。
若是你在安裝依賴包或者運行 Grunt 命令時遇到了問題，請首先刪除 npm 自動生成的 /node_modules/ 目錄，而後，再次運行 npm install 命令。
使用如下給出的這份超級簡單的 HTML 模版，或者修改這些實例。咱們強烈建議你對這些實例按照本身的需求進行修改，而不要簡單的複製、粘貼。
拷貝並粘貼下面給出的 HTML 代碼，這就是一個最簡單的 Bootstrap 頁面了。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>深刻了解 Bootstrap 底層結構的關鍵部分，包括咱們讓 web 開發變得更好、更快、更強壯的最佳實踐。
Bootstrap 使用到的某些 HTML 元素和 CSS 屬性須要將頁面設置爲 HTML5 文檔類型。在你項目中的每一個頁面都要參照下面的格式進行設置。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
在 Bootstrap 2 中，咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3 中，咱們重寫了整個框架，使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式，而是直接融合進了框架的內核中。也就是說，Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落，而不是增長一個額外的文件。
爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap 排版、連接樣式設置了基本的全局樣式。分別是：
body 元素設置 background-color: #fff;@font-family-base、@font-size-base 和 @line-height-base a變量做爲排版的基本參數@link-color ，而且當連接處於 :hover 狀態時才添加下劃線這些樣式都能在 scaffolding.less 文件中找到對應的源碼。
爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。
Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套。
.container 類用於固定寬度並支持響應式佈局的容器。
<div class="container"> ... </div>
.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。
<div class="container-fluid"> ... </div>
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。
柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理：
.container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。.row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。.col-xs-4 來建立。.col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。經過研究後面的實例，能夠將這些原理應用到你的代碼中。
在柵格系統中，咱們在 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) { ... }
咱們偶爾也會在媒體查詢代碼中包含 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) { ... }
經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行爲 | 老是水平排列 | 開始是堆疊在一塊兒的，當大於這些閾值時將變爲水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
使用單一的一組 .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>
將最外面的佈局元素 .container 修改成 .container-fluid，就能夠將固定寬度的柵格佈局轉換爲 100% 寬度的佈局。
<div class="container-fluid"> <div class="row"> ... </div> </div>
是否不但願在小屏幕設備上全部列都堆疊在一塊兒？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-* 和 .col-md-*。請看下面的實例，研究一下這些是如何工做的。
<!-- 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>
在上面案例的基礎上，經過使用針對平板設備的 .col-sm-* 類，咱們來建立更加動態和強大的佈局吧。
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
若是在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將做爲一個總體單元被另起一行排列。
<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>
即使有上面給出的四組柵格class，你也難免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的狀況。爲了克服這一問題，建議聯合使用 .clearfix 和 響應式工具類。
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
除了列在分界點清除響應， 您可能須要 重置偏移, 後推或前拉某個列。請看此柵格實例。
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>
使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
經過使用 .col-md-push-* 和 .col-md-pull-* 類就能夠很容易的改變列（column）的順序。
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
除了用於快速佈局的預約義柵格類，Bootstrap 還包含了一組 Less 變量和 mixin 用於幫你生成簡單、語義化的佈局。
經過變量來定義列數、槽（gutter）寬、媒體查詢閾值（用於肯定合適讓列浮動）。咱們使用這些變量生成預約義的柵格類，如上所示，還有以下所示的定製 mixin。
@grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px;
mixin 用來和柵格變量一同使用，爲每一個列（column）生成語義化的 CSS 代碼。
// Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } // Negative margin nested rows out to align the content of columns .row { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } } // Generate the extra small columns .make-xs-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small columns .make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small column offsets .make-sm-column-offset(@columns) { @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { @media (