下載

Bootstrap (當前版本 v3.3.7)提供以下幾種方式幫你快速上手,每一種方式針對具有不同技能等級的開發者和不同的使用場景。繼續閱讀下面的內容,看看哪種方式適合你的需求吧。

用于生產環境的 Bootstrap

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

下載 Bootstrap

Bootstrap 源碼

Less、JavaScript 和 字體文件的源碼,并且帶有文檔。需要 Less 編譯器和一些設置工作

下載源碼

Sass

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

下載 Sass 項目

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

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

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/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-clinpm 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 環境中運行 JSHintQUnit 自動化測試用例。

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.jsdelivr.net/npm/bootstrap@3.3.7/dist/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.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好,世界!</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/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 框架的基本用法

Starter template example

入門級模板

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

Bootstrap theme example

Bootstrap 主題

加載可選的 Bootstrap 主題,獲得增強的視覺體驗。

Multiple grids example

柵格

多個關于柵格布局方面的實例,涉及到層級(tier)、嵌套(nesting)等等。

Jumbotron example

Jumbotron

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

Narrow jumbotron example

Narrow jumbotron

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

導航條實例

Navbar example

導航條

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

Static top navbar example

靜態導航條

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

Fixed navbar example

固定位置的導航條

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

自定義組件

A one-page template example

封面圖

一個簡單、漂亮的首頁。

Carousel example

Carousel

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

Blog layout example

博客頁面

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

Dashboard example

控制臺

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

Sign-in page example

登錄頁

自定義的表單布局以及經過簡單設計的登錄表單。

Justified nav example

Justified nav

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

Sticky footer example

Sticky footer

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

Sticky footer with navbar example

Sticky footer with navbar

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

實現性案例

Non-responsive example

非響應式 Bootstrap 布局

Easily disable the responsiveness of Bootstrap per our docs.

Off-canvas navigation example

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-widthmax-widthmin-heightmax-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 使用非常小的字號來打印頁面。參見 #14868WebKit 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 類可以讓這個鏈接在獲得焦點的時候變為可見(對于使用鍵盤導航的用戶)。

<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)。這會導致視力低下和色盲用戶在使用時產生困難。這些默認顏色可能需要進行修改,以增強對比度和清晰度。

擴展閱讀

許可證 FAQ

Bootstrap 遵守 MIT 許可證進行發布,2019 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 完整的許可證包含在 項目倉庫中,請參考。