【02】bootstrap起步

時間 2019-11-07

標籤 bootstrap 起步欄目 Bootstarp 简体版

原文原文鏈接

起步

簡要介紹 Bootstrap，以及如何下載、使用，還有基本模版和案例，等等。

Bootstrap （當前版本 v3.3.5）提供如下幾種方式幫你快速上手，每一種方式針對具備不一樣技能等級的開發者和不一樣的使用場景。繼續閱讀下面的內容，看看哪一種方式適合你的需求吧。javascript

用於生產環境的 Bootstrap

編譯並壓縮後的 CSS、JavaScript 和字體文件。不包含文檔和源碼文件。php

下載 Bootstrapcss

Bootstrap 源碼

Less、JavaScript 和字體文件的源碼，而且帶有文檔。須要 Less 編譯器和一些設置工做。html

下載源碼前端

Sass

這是 Bootstrap 從 Less 到 Sass 的源碼移植項目，用於快速地在 Rails、Compass 或只針對 Sass 的項目中引入。java

下載 Sass 項目node

使用 Bootstrap 中文網提供的免費 CDN 加速服務（同時支持 http 和 https 協議）

Bootstrap 中文網爲 Bootstrap 專門構建了本身的免費 CDN 加速服務。基於國內雲廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN 主頁查看更多可用的工具庫。jquery

 
    <!-- 新 Bootstrap 核心 CSS 文件 --> 
   
    <linkrel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
   
    <!-- 可選的Bootstrap主題文件（通常不用引入） --> 
   
    <linkrel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
   
    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 --> 
   
    <scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 
   
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
   
    <scriptsrc="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

經過 Bower 進行安裝

還能夠經過 Bower 安裝並管理 Bootstrap 的 Less、CSS、JavaScript 和字體文件。android

複製

$ bower install bootstrap

經過 npm 進行安裝

你還能夠利用 npm 工具來安裝 Bootstrap：nginx

複製

$ npm install bootstrap

require('bootstrap') 代碼的做用是加載 Bootstrap 的全部 jQuery 插件。其中，bootstrap 模塊自身並不導出任何內容。你能夠經過加載安裝包頂級目錄下的 /js/*.js 文件的方式手動加載單個的 Bootstrap 插件。

Bootstrap 的 package.json 文件包含了一些額外的元數據：

less - Bootstrap 源碼的入口 Less 文件的路徑
style - Bootstrap 的未壓縮 CSS 文件的路徑

經過 Composer 進行安裝

經過 Composer （中文官網：Composer 中文網）也能夠安裝 Bootstrap 安裝包，其中包括 Less、CSS、JavaScript 和 fonts 文件：

複製

$ composer require twbs/bootstrap

編譯 Less/Sass 源碼須要注意的事項

Bootstrap 利用 Autoprefixer 自動爲某些 CSS 屬性添加針對特定廠商的前綴。若是你是從 Less/Sass 源碼編譯 Bootstrap 的，而且沒有使用 Bootstrap 自帶的 Gruntfile 文件，那你就必須將 Autoprefixer 集成到你的編譯工具和編譯過程當中。若是你使用的是咱們預先編譯好的 Bootstrap 文件或者使用的是咱們提供的 Gruntfile 文件，那就無需操心了，咱們已經將這些工做替你搞定了。

Bootstrap 提供了兩種形式的壓縮包，在下載下來的壓縮包內能夠看到如下目錄和文件，這些文件按照類別放到了不一樣的目錄內，而且提供了壓縮與未壓縮兩種版本。

Bootstrap 插件所有依賴 jQuery

請注意，Bootstrap 的全部 JavaScript 插件都依賴 jQuery，所以 jQuery 必須在 Bootstrap 以前引入，就像在基本模版中所展現的同樣。在 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

預編譯版

下載壓縮包以後，將其解壓縮到任意目錄便可看到如下（壓縮版的）目錄結構：

複製

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 源碼

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

安裝 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 命令

`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 頁面了。

Bootlint

Bootlint 是 Bootstrap 官方所支持的 HTML 檢測工具。在使用了 Bootstrap 的頁面上（沒有對 Bootstrap 作修改和擴展的狀況下），它能自動檢查某些常見的 HTML 錯誤。純粹的 Bootstrap 組件須要固定的 DOM 結構。Bootlint 就能檢測你的頁面上的這些「純粹」的 Bootstrap 組件是否符合 Bootstrap 的 HTML 結構規則。建議將 Bootlint 加入到你的開發工具中，這樣就能幫你在項目開發中避免一些簡單的錯誤影響你的開發進度。

Bootstrap 有成熟、強大的社區。若是你但願隨時獲取 Bootstrap 的最新消息，請關注如下社區資源。

閱讀並訂閱 Bootstrap 官方博客。
經過 IRC （irc.freenode.net 服務器）與其餘 Bootstrap 粉絲交流，咱們在 ##bootstrap 頻道。
若是使用 Bootstrap 過程當中遇到問題，請在 StackOverflow 上交流。請搜索 twitter-bootstrap-3 關鍵詞。
對於爲 Bootstrap 修改或添加功能的開發者，若是須要將本身修改的版本發佈到 npm 或其餘分發渠道時，應當爲本身的包添加 bootstrap 關鍵字，以便你們可以經過關鍵字瞭解你所發佈的東西。
參觀其餘同窗基於 Bootstrap 構建的網站，請進這裏：Bootstrap 優站精選.

你還能夠在 Twitter 上關注英文官方帳號 @getbootstrap ，這裏有最新的八卦和有趣的視頻。（ :( 原來和技術不沾邊啊！）

中國用戶請關注咱們的官方微博帳號：@Bootstrap中文網。咱們按期分享新技術和新資訊。

Bootstrap 會自動幫你針對不一樣的屏幕尺寸調整你的頁面，使其在各個尺寸的屏幕上表現良好。下面咱們列出瞭如何禁用這一特性，就像這個非響應式佈局實例頁面同樣。

禁止響應式佈局有以下幾步：

移除此 CSS 文檔中提到的設置瀏覽器視口（viewport）的標籤：<meta>。
經過爲 .container 類設置一個 width 值從而覆蓋框架的默認 width 設置，例如 width: 970px !important; 。請確保這些設置所有放在默認的 Bootstrap CSS 文件的後面。注意，若是你把它放到媒體查詢中，也能夠略去!important 。
若是使用了導航條，須要移除全部導航條的摺疊和展開行爲。
對於柵格佈局，額外增長 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。不要擔憂，針對超小屏幕設備的柵格系統可以在全部分辨率的環境下展開。

針對 IE8 仍然須要額外引入 Respond.js 文件（因爲仍然利用了瀏覽器對媒體查詢（media query）的支持，所以還須要作處理）。這樣就禁用了 Bootstrap 對移動設備的響應式支持。

禁止響應式特性的 Bootstrap 模版

咱們已經按照上面的步驟製做了一份案例。仔細閱讀其源碼並對照上面的步驟實踐一下吧。

非響應式佈局實例

從 v2.x 版本升級到 v3.x 版本

你在找從老版本升級到 Bootstrap v3.x 版本的方法嗎？請查看咱們整理的升級指南吧。

Bootstrap 的目標是在最新的桌面和移動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會致使某些組件表現出的樣式有些不一樣，可是功能是完整的。

被支持的瀏覽器

特別注意，咱們堅定支持這些瀏覽器的最新版本。在 Windows 平臺，咱們支持 Internet Explorer 8-11。請看下面列出的詳細信息。

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	支持	支持	N/A	不支持	N/A
iOS	支持	N/A		不支持	支持
Mac OS X	支持	支持		支持	支持
Windows	支持	支持	支持	支持	不支持

Bootstrap 在 Chromium 和 Linux 版 Chrome、Linux 版 Firefox 和 Internet Explorer 7 上的表現也是很不錯的，雖然咱們不對其進行官方支持。

瀏覽器 bug 列表中列出了影響 Bootstrap 正常功能的瀏覽器 bug。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支持的，然而，你要知道，不少 CSS3 屬性和 HTML5 元素 -- 例如，圓角矩形和投影 -- 是確定不被支持的。另外， Internet Explorer 8 須要 Respond.js 配合才能實現對媒體查詢（media query）的支持。

Feature	Internet Explorer 8	Internet Explorer 9
`border-radius`	不支持	支持
`box-shadow`	不支持	支持
`transform`	不支持	支持, with `-ms` prefix
`transition`	不支持
`placeholder`	不支持

請參考 Can I use... 以獲取詳細的 CSS3 和 HTML5 特性在各個瀏覽器上的支持狀況。

Internet Explorer 8 與 Respond.js

在開發環境和生產（線上）環境須要支持 Internet Explorer 8 時，請務必注意下面給出的警告。

Respond.js 與跨域（cross-domain） CSS 的問題

若是 Respond.js 和 CSS 文件被放在不一樣的域名或子域名下面（例如，使用CDN）時須要一些額外的設置。請參考Respond.js 文檔獲取詳細信息。

Respond.js 與 `file://` 協議

因爲瀏覽器的安全機制，Respond.js 不能在經過 file:// 協議（打開本地HTML文件所用的協議）訪問的頁面上發揮正常的功能。若是須要測試 IE8 下面的響應式特性，務必經過 http 協議訪問頁面（例如搭建 apache、nginx 等）。請參考Respond.js 文檔獲取更多信息。

Respond.js 與 `@import` 指令

Respond.js 不支持經過 @import 指令所引入的 CSS 文件。例如，Drupal 通常被配置爲經過 @import 指令引入CSS文件，Respond.js 對其將沒法起到做用。請參考 Respond.js 文檔獲取更多信息。

Internet Explorer 8 與 box-sizing 屬性

當 box-sizing: border-box; 與 min-width、max-width、min-height 或 max-height 一同使用時，IE8 不能徹底支持 box-sizing 屬性。因爲此緣由，從 Bootstrap v3.0.1 版本開始，咱們再也不爲 .container 賦予 max-width 屬性。

Internet Explorer 8 與 @font-face

當 @font-face 與 :before 在 IE8 下共同使用時會出現問題。因爲 Bootstrap 對 Glyphicons 的樣式設置使用了這一組合方式，若是某個頁面被瀏覽器緩存了，而且此頁面不是經過點擊「刷新」按鈕或經過 iframe 加載的，那麼就會致使字體文件還沒有加載的狀況下就開始繪製此頁面。當鼠標滑過頁面（body）時，頁面上的某些圖標就會顯現，鼠標滑過其餘沒有顯現的圖標時，這些圖標就能顯示出來了。請參考 issue #13863 瞭解詳細信息。

IE 兼容模式

Bootstrap 不支持 IE 古老的兼容模式。爲了讓 IE 瀏覽器運行最新的渲染模式下，建議將此 <meta> 標籤加入到你的頁面中：

複製

<meta http-equiv="X-UA-Compatible" content="IE=edge">

按 F12 鍵打開 IE 的調試工具，就能夠看到 IE 當前的渲染模式是什麼。

此 meta 標籤被包含在了全部 Bootstrap 文檔和實例頁面中，爲的就是在每一個被支持的 IE 版本中擁有最好的繪製效果。

請參考這個發表在 StackOverflow 上的問題。

國產瀏覽器高速模式

國內瀏覽器廠商通常都支持兼容模式（即 IE 內核）和高速模式（即 webkit 內核），不幸的是，全部國產瀏覽器都是默認使用兼容模式，這就形成因爲低版本 IE （IE8 及如下）內核讓基於 Bootstrap 構建的網站展示效果很糟糕的狀況。幸運的是，國內瀏覽器廠商逐漸意識到了這一點，某些廠商已經開始有所做爲了！

將下面的 <meta> 標籤加入到頁面中，可讓部分國產瀏覽器默認採用高速模式渲染頁面：

複製

<meta name="renderer" content="webkit">

目前只有360瀏覽器支持此 <meta> 標籤。但願更多國內瀏覽器儘快採起行動、儘快進入高速時代！

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 並無對 屏幕的寬度 和 視口（viewport）的寬度 進行區分，這就致使 Bootstrap 中的媒體查詢並不能很好的發揮做用。爲了解決這個問題，你能夠引入下面列出的這段 CSS 代碼暫時修復此問題：

複製

@-ms-viewport       { width: device-width; }

然而，這樣作並不能對 Windows Phone 8 Update 3 (a.k.a. GDR3) 版本以前的設備起做用，因爲這樣作將致使 Windows Phone 8 設備按照桌面瀏覽器的方式呈現頁面，而不是較窄的「手機」呈現方式，爲了解決這個問題，還須要加入如下 CSS 和 JavaScript 代碼來化解此問題。

複製

@-webkit-viewport   { width: device-width; }@-moz-viewport      { width: device-width; }@-ms-viewport       { width: device-width; }@-o-viewport        { width: device-width; }@viewport           { width: device-width; }

複製

// Copyright 2014-2015 Twitter, Inc.// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)if (navigator.userAgent.match(/IEMobile\/10\.0/)) {var msViewportStyle = document.createElement('style')msViewportStyle.appendChild(document.createTextNode('@-ms-viewport{width:auto!important}'))document.querySelector('head').appendChild(msViewportStyle)}

請查看 Windows Phone 8 and Device-Width 以瞭解更多信息。

做爲提醒，咱們將上面的代碼加入到了全部 Bootstrap 文檔和實例頁面中。

Safari 對百分比數字湊整的問題

OS X 上搭載的 v7.1 之前 Safari 和 iOS v8.0 上搭載的 Safari 瀏覽器的繪製引擎對於處理 .col-*-1 類所對應的很長的百分比小數存在 bug。也就是說，若是你在一行（row）之中定義了12個單獨的列（.col-*-1），你就會看到這一行比其餘行要短一些。除了升級 Safari/iOS 外，有如下幾種方式來應對此問題：

爲最後一列添加 .pull-right 類，將其暴力向右對齊
手動調整百分比數字，讓其針對Safari表現更好（這比第一種方式更困難）

模態框、導航條和虛擬鍵盤

超出範圍和滾動

<body> 元素在 iOS 和 Android 上對 overflow: hidden 的支持頗有限。結果就是，在這兩種設備上的瀏覽器中，當你滾動屏幕超過模態框的頂部或底部時，<body> 中的內容將開始隨着滾動。

虛擬鍵盤

還有，若是你正在使用 fixed 定位的導航條或在模態框上面使用輸入框，還會遇到 iOS 在頁面繪製上的 bug，當觸發虛擬鍵盤以後，其不會更新 fixed 定位的元素的位置。這裏有幾種解決方案，包括將 fixed 定位轉變爲 position: absolute定位，或者啓動一個定時器手工修正組件的位置。這些沒有加入 Bootstrap 中，所以，須要由你本身選擇最好的解決方案並加入到你的應用中。

導航條上的下拉菜單

在 iOS 設備上，因爲導航組件（nav）的複雜的 z-indexing 屬性，.dropdown-backdrop 元素並未被使用。所以，爲了關閉導航條上的下拉菜單，必須直接點擊下拉菜單上的元素（或者任何其餘可以觸發 iOS 上 click 事件的元素）。

瀏覽器的縮放功能

頁面縮放功能不可避免的會將某些組件搞得亂七八糟，不光是 Bootstrap ，整個互聯網上的全部頁面都是這樣。針對具體問題，咱們或許能夠修復它（若是有必要的話，請先搜索一下你的問題，看看是否已有解決方案，而後在向咱們提交 issue）。然而，咱們更傾向於忽略這些問題，因爲這些問題除了一些 hack 手段，通常沒有直接的解決方案。

移動設備上應用 `:hover`/`:focus`

儘管在大多數觸摸屏上沒有真正的懸停狀態，大部分移動設備瀏覽器模擬了懸停（hover）狀態並讓 :hover 狀態"多展示一下子"。換句話說，輕觸元素後開始應用 :hover 樣式，而且在用戶輕觸其餘的元素以後中止應用 :hover 樣式。在這些瀏覽器中，Bootstrap 的 :hover 狀態可能不是你所指望的。某些移動瀏覽器中的 :focus 狀態也存在一樣的問題。對於這些問題，除了徹底清除這些樣式，目前尚未簡單的解決方法。

打印

即使是在某些很現代的瀏覽器中，打印頁面功能也仍是存在不少陷阱。

舉個例子，從 Chrome v32 開始，打印一個支持媒體查詢的頁面時，無論如何設置留白，Chrome 老是使用一個遠遠小於實際頁面尺寸的視口寬度的值做爲頁面寬度。這就致使被打印的頁面老是被呈現爲在超小屏幕（extra-small）上的效果（也就是激活了 Bootstrap 針對超小屏幕的柵格排布方式）。參考 #12078 瞭解更多信息。推薦解決方案：

讓你的頁面在超小（extra-small）屏幕上看起來不那麼太差勁。
修改 @screen-* Less 變量的值，讓你的頁面老是大於 extra-small
添加額外的媒體查詢代碼，針對打印機修改柵格閾值。

另外，從Safari v8.0 開始，固定寬度的 .container 會致使 Safari 使用很是小的字號來打印頁面。參見 #14868 瞭解跟多信息。下面這段 CSS 代碼提供了一個臨時解決方案：

複製

@media print {.container {width: auto;}}

Android 系統默認瀏覽器

Android 4.1 （甚至某些較新版本）系統的默認瀏覽器被設置爲默認打開頁面的應用程序（不一樣於 Chrome）。不幸的是，通常狀況下，這些瀏覽器有不少bug以及和CSS標準不一致的地方。

選項菜單

若是 <select> 元素應用了 border-radius 和/或 border 樣式，Android 系統默認的瀏覽器將不會顯示側邊欄控件。（詳見這個 StackOverflow 上的問題。）使用下面的代碼片斷來刪除有問題的CSS而且在Android系統默認的瀏覽器上，<select> as an呈現爲無樣式元素。能夠經過檢測用戶代理（user agent）的特徵串來避免干擾 Chrome、Safari和 Mozilla 瀏覽器。

複製

<script>$(function () {var nua = navigator.userAgentvar isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)if (isAndroid) {$('select.form-control').removeClass('form-control').css('width', '100%')}})</script>

見 JS Bin 上的 demo。

W3C 頁面源碼校驗

爲了在老舊的瀏覽器上儘可能提供最好的展示，Bootstrap 針對瀏覽器使用了一些 CSS hack 手段，爲的是針對特定瀏覽器版本彌補瀏覽器自身的 bug。這些 CSS hack 手段在 CSS 校驗器那裏會被認爲是無效代碼。還有一些地方，咱們使用了某些未被徹底標準化的 CSS 特性，純粹是爲了實現漸進式加強的思路。

上面提到的這些校驗器報告的警告信息並不會對實際使用形成影響，由於非 hack 部分的 CSS 是徹底合格的，hack 部分不會對非 hack 部分的功能產生影響，這就是咱們故意無視這些校驗器警告的緣由。

一樣，咱們的 HTML 文檔中也有一些針對 Firefox bug 的 hack 代碼，在 HTML 校驗時也會被警告。

雖然咱們並不官方支持任何第三方插件，咱們仍是提供一些建議，幫你避免可能在你的項目中會出現的問題。

box-sizing 屬性

某些第三方軟件，包括 Google 地圖和 Google 定製搜索引擎都會因爲 * { box-sizing: border-box; } 的設置而產生衝突，這一設置使 padding 不影響頁面元素最終寬度的計算。更多信息請參考盒模型與尺寸計算 - CSS Tricks。

根據不一樣狀況，你可能須要根據狀況覆蓋（第1種選擇）或爲全部區域設置（第2種選擇）。

複製

/* Box-sizing resets * * 爲了不 Bootstrap 設置的全局盒模型所帶來的影響，能夠重置單個頁面元素或覆蓋整個區域的盒模型。 * 你有兩種選擇：覆蓋單個頁面元素或重置整個區域。它們均可以經過純 CSS 或 LESS 代碼的形式實現。 *//* Option 1A: 經過 CSS 代碼覆蓋單個頁面元素的盒模型 */.element {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}/* Option 1B: 經過使用 Bootstrap 提供的 LESS mixin 覆蓋單個頁面元素的盒模型 */.element {.box-sizing(content-box);}/* Option 2A: 經過 CSS 代碼重置整個區域 */.reset-box-sizing,.reset-box-sizing *,.reset-box-sizing *:before,.reset-box-sizing *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}/* Option 2B: 經過使用自定義的 LESS mixin 重置整個區域 */.reset-box-sizing {&,*,*:before,*:after {.box-sizing(content-box);}}.element {.reset-box-sizing();}

Bootstrap 遵循統一的 web 標準，另外，經過作一些少許的修改，還可讓使用輔助設備（AT - ASSISTIVE TECHNOLOGY）上網的人羣訪問你的站點。

跳過導航區

若是你的導航部分包含不少連接，而且在 DOM 結構上也是排在主內容以前，那麼，建議在導航前面添加一個 Skip to main content（直接進入主內容區） 的連接（這篇文章 A11Y Project article on skip navigation links給了簡要的解釋）。經過使用 .sr-only 類可讓「Skip to main content（直接進入主內容區）」連接在視覺上是不可見的，而 .sr-only-focusable 類可讓這個連接在得到焦點的時候變爲可見（對於使用鍵盤導航的用戶）。

Due to long-standing shortcomings/bugs in Chrome (see issue 262171 in the Chromium bug tracker) and Internet Explorer (see this article on in-page links and focus order), you will need to make sure that the target of your skip link is at least programmatically focusable by adding tabindex="-1".

In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with tabindex="-1" when they are clicked with the mouse) with#content:focus { outline: none; }.

Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.

複製

<body><a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1"><!-- The main page content --></div></body>

標題嵌套

當標題嵌套時 (<h1> - <h6>)，你的文檔的主標題應該是 <h1> 標籤。隨後的標題邏輯上就應該使用 <h2> - <h6> ，這樣，屏幕閱讀器就能夠構造出頁面的內容列表了。

更多信息請參考： HTML CodeSniffer and Penn State's AccessAbility.

色彩對比

當前，Bootstrap 使用的默認顏色組合的對比度（例如各類 styled button 類；一些基本代碼塊高亮代碼所用的顏色；.bg-primary 上下文背景色輔助類；和白色背景下默認的連接顏色）都比較低（低於推薦比例 4.5:1）。這會致使視力低下和色盲用戶在使用時產生困難。這些默認顏色可能須要進行修改，以加強對比度和清晰度。

擴展閱讀

Bootstrap 遵照 MIT 許可證進行發佈，2015 Twitter 版權全部。歸結爲如下幾點：

必須遵照：

Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works

賦予你的權力：

Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
Use Bootstrap in packages or distributions that you create
Modify the source code
Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license

禁止如下行爲：

Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
Hold the creators or copyright holders of Bootstrap liable
Redistribute any piece of Bootstrap without proper attribution
Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question

It does not require you to:

Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)

Bootstrap 完整的許可證包含在項目倉庫中，請參考。

咱們的社區成員已經將 Bootstrap 文檔翻譯成多種語言版本，請根據你的語言習慣選擇本身母語版本的文檔作參考。

Bootstrap 官方不託管各翻譯版本的文檔，如遇問題，請聯繫相應的維護人員。

若是你發現 Bootstrap 中文文檔中存在的問題，請發送郵件至：admin@bootcss.com

相關標籤/搜索

bootstrap+bootstrap+scss

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【02】bootstrap起步

起步

下載

用於生產環境的 Bootstrap

Bootstrap 源碼

Sass

使用 Bootstrap 中文網提供的免費 CDN 加速服務（同時支持 http 和 https 協議）

經過 Bower 進行安裝

經過 npm 進行安裝

經過 Composer 進行安裝

編譯 Less/Sass 源碼須要注意的事項

包含的內容

Bootstrap 插件所有依賴 jQuery

預編譯版

Bootstrap 源碼

編譯 CSS 和 JavaScript 文件

安裝 Grunt

而後在命令行中輸入如下命令：

可用的 Grunt 命令

grunt dist （僅編譯 CSS 和 JavaScript 文件）

grunt watch （監測文件的改變，並運行指定的 Grunt 任務）

grunt test （運行測試用例）

grunt docs （編譯並測試文檔中的資源文件）

grunt （從新構建全部內容並運行測試用例）

除錯

基本模板

工具

Bootlint

社區

禁止響應式佈局

禁止響應式佈局有以下幾步：

禁止響應式特性的 Bootstrap 模版

從 v2.x 版本升級到 v3.x 版本

瀏覽器和設備的支持狀況

被支持的瀏覽器

Internet Explorer 8 和 9

Internet Explorer 8 與 Respond.js

Respond.js 與 跨域（cross-domain） CSS 的問題

Respond.js 與 file:// 協議

Respond.js 與 @import 指令

Internet Explorer 8 與 box-sizing 屬性

Internet Explorer 8 與 @font-face

IE 兼容模式

國產瀏覽器高速模式

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Safari 對百分比數字湊整的問題

模態框、導航條和虛擬鍵盤

超出範圍和滾動

虛擬鍵盤

導航條上的下拉菜單

瀏覽器的縮放功能

移動設備上應用 :hover/:focus

打印

Android 系統默認瀏覽器

選項菜單

W3C 頁面源碼校驗

對第三方組件的支持

box-sizing 屬性

可訪問性

跳過導航區

標題嵌套

色彩對比

擴展閱讀

許可證 FAQ

必須遵照：

賦予你的權力：

禁止如下行爲：

It does not require you to:

文檔翻譯

`grunt dist` （僅編譯 CSS 和 JavaScript 文件）

`grunt watch` （監測文件的改變，並運行指定的 Grunt 任務）

`grunt test` （運行測試用例）

`grunt docs` （編譯並測試文檔中的資源文件）

`grunt` （從新構建全部內容並運行測試用例）

Respond.js 與跨域（cross-domain） CSS 的問題

Respond.js 與 `file://` 協議

Respond.js 與 `@import` 指令

移動設備上應用 `:hover`/`:focus`