bootstrap3基本瞭解

 

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

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

<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可選的 Bootstrap 主題文件（通常不用引入） --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

在線練習

經過 Bower 進行安裝

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

$ bower install bootstrap

經過 npm 進行安裝

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

$ npm install bootstrap@3

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.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── 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 安裝包的定義文件、許可證文件和編譯腳本等。

編譯 CSS 和 JavaScript 文件

Bootstrap 使用 Grunt 做爲編譯系統，而且對外提供了一些方便的方法用於編譯整個框架。下面講解的就是如何編譯源碼、運行測試用例等內容。

安裝 Grunt

安裝 Grunt 前，你須要首先下載並安裝 node.js （npm 已經包含在內）。npm 是 node packaged modules 的簡稱，它的做用是基於 node.js 管理擴展包之間的依賴關係。

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

1. 在全局環境中安裝 grunt-cli ：npm install -g grunt-cli 。
2. 進入 /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 和其餘資源文件。在本地環境下經過 bundle exec 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="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --> <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>

在線練習

實例精選

如下實例所有基於前面所講的基本模板並配合 Bootstrap 的衆多組件開發而成。咱們鼓勵你根據自身項目的須要對 Bootstrap 進行定製和修改。

Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.

Bootstrap 框架的基本用法

入門級模板

只有基本的東西：引入了預編譯版的 CSS 和 JavaScript 文件，頁面只包含了一個 container 元素。

Bootstrap 主題

加載可選的 Bootstrap 主題，得到加強的視覺體驗。

柵格

多個關於柵格佈局方面的實例，涉及到層級（tier）、嵌套（nesting）等等。

Jumbotron

Build around the jumbotron with a navbar and some basic grid columns.

Narrow jumbotron

Build a more custom page by narrowing the default container and jumbotron.

導航條實例

導航條

包含導航條和一塊兒附加內容的超級基礎的模板。

靜態導航條

包含一個靜態導航條以及一些附加內容的超級基礎的模板。

固定位置的導航條

這是一個超簡單的頁面，擁有一個固定在頂部的導航條和一些演示內容。

自定義組件

封面圖

一個簡單、漂亮的首頁。

Carousel

Customize the navbar and carousel, then add some new components.

博客頁面

簡單的兩列式博客佈局，還包含了自定義的導航、頁頭、分類等元素。

控制檯

包含基本結構的後臺管理模板，還有固定的側邊欄和導航條。

登陸頁

自定義的表單佈局以及通過簡單設計的登陸表單。

Justified nav

Create a custom navbar with justified links. Heads up! Not too Safari friendly.

Sticky footer

Attach a footer to the bottom of the viewport when the content is shorter than it.

Sticky footer with navbar

Attach a footer to the bottom of the viewport with a fixed navbar at the top.

實現性案例

非響應式 Bootstrap 佈局

Easily disable the responsiveness of Bootstrap per our docs.

Offcanvas

Build a toggleable off-canvas navigation menu for use with 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 會自動幫你針對不一樣的屏幕尺寸調整你的頁面，使其在各個尺寸的屏幕上表現良好。下面咱們列出瞭如何禁用這一特性，就像這個非響應式佈局實例頁面同樣。

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

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

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

禁止響應式特性的 Bootstrap 模版

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

非響應式佈局實例

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

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

瀏覽器和設備的支持狀況

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

被支持的瀏覽器

特別注意，咱們堅定支持這些瀏覽器的最新版本。

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.

Mobile devices

Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

	Chrome	Firefox	Safari
Android	Supported	Supported	N/A
iOS	Supported	Supported	Supported

Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

	Chrome	Firefox	Internet Explorer	Opera	Safari
Mac	Supported	Supported	N/A	Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not supported

On Windows, we support Internet Explorer 8-11.

For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.

瀏覽器 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 代碼來化解此問題。

@-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> 中的內容將開始隨着滾動。See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.

iOS text fields and scrolling

As of iOS 9.3, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <input> or a <textarea>, the <body> content underneath the modal will be scrolled instead of the modal itself. See WebKit bug #153856.

虛擬鍵盤

還有，若是你正在使用 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 針對超小屏幕的柵格排布方式）。 參考 issue #12078 和 Chrome bug #273306 瞭解更多信息。 推薦解決方案：

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

另外，從Safari v8.0 開始，固定寬度的 .container 會致使 Safari 使用很是小的字號來打印頁面。參見 #14868 和 WebKit bug #138192 瞭解跟多信息。下面這段 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.userAgent var 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）。這會致使視力低下和色盲用戶在使用時產生困難。這些默認顏色可能須要進行修改，以加強對比度和清晰度。

擴展閱讀

• "HTML Codesniffer" bookmarklet for identifying accessibility issues
• Chrome's Accessibility Developer Tools extension
• Colour Contrast Analyser
• The A11Y Project
• MDN accessibility documentation

許可證 FAQ