入門 · 引導繁體中文

Bootstrap（當前為 v3.3.7）有幾種簡單的快速入門方法，每種方法都適用於不同的技能水平和用例。通讀以了解適合您特定需求的內容。

引導程序

編譯和縮小 CSS、JavaScript 和字體。不包含任何文檔或原始源文件。

下載引導程序

源代碼

Source Less、JavaScript 和字體文件，以及我們的文檔。需要一個 Less 編譯器和一些設置。

下載源

薩斯

Bootstrap 從 Less 移植到 Sass，以便輕鬆包含在 Rails、Compass 或純 Sass 項目中。

下載薩斯

引導 CDN

jsDelivr的人們慷慨地為 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。只需使用這些Bootstrap CDN鏈接。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 插件加載到 jQuery 對像上。bootstrap模塊本身不導出任何東西。/js/*.js您可以通過加載包頂級目錄下的文件來單獨手動加載 Bootstrap 的 jQuery 插件。

Bootstrappackage.json在以下鍵下包含一些額外的元數據：

less- Bootstrap 的主要Less源文件的路徑
style- 使用默認設置預編譯的 Bootstrap 的非縮小 CSS 的路徑（無自定義）

使用 Composer 安裝

您還可以使用Composer安裝和管理 Bootstrap 的 Less、CSS、JavaScript 和字體：

$ composer require twbs/bootstrap

Less/Sass 需要自動前綴

Bootstrap 使用Autoprefixer來處理CSS 供應商前綴。如果你從它的 Less/Sass 源代碼編譯 Bootstrap 而不是使用我們的 Gruntfile，你需要自己將 Autoprefixer 集成到你的構建過程中。如果您使用預編譯的 Bootstrap 或使用我們的 Gruntfile，則無需擔心這一點，因為 Autoprefixer 已經集成到我們的 Gruntfile 中。

Bootstrap 可以兩種形式下載，您可以在其中找到以下目錄和文件，這些目錄和文件在邏輯上對公共資源進行了分組，並提供了已編譯和縮小的變體。

需要 jQuery

請注意，所有 JavaScript 插件都需要包含 jQuery，如starter 模板所示。請諮詢我們bower.json以了解支持的 jQuery 版本。

預編譯引導

下載後，解壓縮壓縮文件夾以查看（已編譯）Bootstrap 的結構。你會看到這樣的東西：

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 源代碼下載包括預編譯的 CSS、JavaScript 和字體資產，以及源 Less、JavaScript 和文檔。更具體地說，它包括以下內容和更多內容：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

、和是我們的 CSS less/、JS 和圖標字體（分別）的源代碼。該文件夾包括上面預編譯下載部分中列出的所有內容。該文件夾包含我們文檔的源代碼，以及Bootstrap 的使用。除此之外，任何其他包含的文件都提供對包、許可證信息和開發的支持。js/fonts/dist/docs/examples/

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文件並自動安裝其中列出的必要本地依賴項。

完成後，您將能夠運行從命令行提供的各種 Grunt 命令。

可用的 Grunt 命令

`grunt dist`（只需編譯 CSS 和 JavaScript）

/dist/使用已編譯和縮小的 CSS 和 JavaScript 文件重新生成目錄。作為 Bootstrap 用戶，這通常是您想要的命令。

`grunt watch`（手錶）

監視 Less 源文件，並在您保存更改時自動將它們重新編譯為 CSS。

`grunt test`（運行測試）

運行JSHint並在 PhantomJS中無頭運行QUnit測試。

`grunt docs`（構建和測試文檔資產）

構建和測試在本地運行文檔時使用的 CSS、JavaScript 和其他資產bundle exec jekyll serve。

`grunt`（絕對構建一切並運行測試）

編譯和壓縮 CSS 和 JavaScript，構建文檔網站，針對文檔運行 HTML5 驗證器，重新生成定制器資產等等。需要Jekyll。通常只有在您對 Bootstrap 本身進行黑客攻擊時才需要。

故障排除

如果您在安裝依賴項或運行 Grunt 命令時遇到問題，請先刪除/node_modules/npm 生成的目錄。然後，重新運行npm install。

從這個基本的 HTML 模板開始，或者修改這些示例。我們希望您能夠自定義我們的模板和示例，使其適應您的需求。

複製下面的 HTML 以開始使用最小的 Bootstrap 文檔。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <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="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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 的許多組件在上面的基本模板上構建。我們鼓勵您自定義和調整 Bootstrap 以滿足您個人項目的需求。

通過下載 Bootstrap 存儲庫，獲取以下每個示例的源代碼。示例可以在docs/examples/目錄中找到。

使用框架

入門模板

除了基礎知識：編譯的 CSS 和 JavaScript 以及容器。

引導主題

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

網格

具有所有四層、嵌套等的網格佈局的多個示例。

超大屏幕

使用導航欄和一些基本的網格列圍繞 jumbotron 構建。

窄大屏幕

通過縮小默認容器和 jumbotron 來構建更自定義的頁面。

導航欄在行動

導航欄

包含導航欄和一些附加內容的超級基本模板。

靜態頂部導航欄

帶有靜態頂部導航欄以及一些附加內容的超級基本模板。

固定導航欄

帶有固定頂部導航欄的超級基本模板以及一些附加內容。

自定義組件

覆蓋

用於構建簡單而漂亮的主頁的單頁模板。

旋轉木馬

自定義導航欄和輪播，然後添加一些新組件。

博客

簡單的兩列博客佈局，帶有自定義導航、標題和類型。

儀表板

帶有固定側邊欄和導航欄的管理儀表板的基本結構。

登錄頁面

用於簡單登錄表單的自定義表單佈局和設計。

合理的導航

創建帶有對齊鏈接的自定義導航欄。小心！對 Safari 不太友好。

粘性頁腳

當內容比它短時，將頁腳附加到視口的底部。

帶有導航欄的粘性頁腳

將頁腳附加到視口的底部，頂部有一個固定的導航欄。

實驗

無響應的引導程序

根據我們的文檔輕鬆禁用 Bootstrap 的響應能力。

畫布外

構建一個可切換的畫布外導航菜單以與 Bootstrap 一起使用。

引導線

Bootlint是官方的 Bootstrap HTML linter工具。它會自動檢查以相當“普通”方式使用 Bootstrap 的網頁中的幾個常見 HTML 錯誤。Vanilla Bootstrap 的組件/小部件要求它們的 DOM 部分符合某些結構。Bootlint 檢查 Bootstrap 組件的實例是否具有結構正確的 HTML。考慮將 Bootlint 添加到您的 Bootstrap Web 開發工具鏈中，這樣所有常見錯誤都不會減慢您的項目開發速度。

隨時了解 Bootstrap 的最新發展，並通過這些有用的資源與社區聯繫。

閱讀並訂閱官方 Bootstrap 博客。
在##bootstrap 頻道irc.freenode.net中使用服務器中的IRC 與其他 Bootstrappers 聊天。
如需使用 Bootstrap 的幫助，請使用標籤詢問 StackOverflowtwitter-bootstrap-3。
當通過npm或類似的交付機制bootstrap分發時，開發人員應在修改或添加到 Bootstrap 功能的包上使用關鍵字，以獲得最大的可發現性。
在Bootstrap Expo上查找人們使用 Bootstrap 進行構建的鼓舞人心的示例。

您還可以在 Twitter 上關注 @getbootstrap 以獲取最新的八卦和精彩的音樂視頻。

Bootstrap 會自動調整您的頁面以適應各種屏幕尺寸。以下是禁用此功能的方法，以便您的頁面像這個非響應示例一樣工作。

禁用頁面響應的步驟

省略CSS 文檔<meta>中提到的視口
例如，使用單個寬度覆蓋每個網格層的widthon確保它位於默認 Bootstrap CSS 之後。您可以選擇避免使用媒體查詢或某些選擇器。.containerwidth: 970px !important;!important
如果使用導航欄，請刪除所有導航欄折疊和展開行為。
對於網格佈局，使用.col-xs-*類來補充或代替中型/大型。別擔心，超小的設備網格可以擴展到所有分辨率。

對於 IE8，您仍然需要 Respond.js（因為我們的媒體查詢仍然存在並且需要處理）。這會禁用 Bootstrap 的“移動站點”方面。

禁用響應的引導模板

我們已將這些步驟應用於示例。閱讀其源代碼以查看實現的具體更改。

查看無響應示例

Bootstrap 旨在在最新的桌面和移動瀏覽器中發揮最佳效果，這意味著舊版瀏覽器可能會顯示不同樣式但功能齊全的某些組件的渲染。

支持的瀏覽器

具體來說，我們支持以下瀏覽器和平台的最新版本。

不明確支持使用最新版本的 WebKit、Blink 或 Gecko 的替代瀏覽器，無論是直接還是通過平台的 Web 視圖 API。但是，Bootstrap 應該（在大多數情況下）在這些瀏覽器中也能正確顯示和運行。下面提供了更具體的支持信息。

移動設備

一般來說，Bootstrap 支持各大平台默認瀏覽器的最新版本。請注意，不支持代理瀏覽器（例如 Opera Mini、Opera Mobile 的 Turbo 模式、UC Browser Mini、Amazon Silk）。

	鉻合金	火狐	蘋果瀏覽器
安卓	支持的	支持的	不適用
iOS	支持的	支持的	支持的

桌面瀏覽器

同樣，支持大多數桌面瀏覽器的最新版本。

	鉻合金	火狐	IE瀏覽器	歌劇	蘋果瀏覽器
蘋果電腦	支持的	支持的	不適用	支持的	支持的
視窗	支持的	支持的	支持的	支持的	不支持

在 Windows 上，我們支持 Internet Explorer 8-11。

對於 Firefox，除了最新的正常穩定版本外，我們還支持最新的擴展支持版本 (ESR)版本的 Firefox。

非官方的，Bootstrap 在 Chromium 和 Chrome for Linux、Firefox for Linux 和 Internet Explorer 7 以及 Microsoft Edge 中的外觀和行為應該足夠好，儘管它們不受官方支持。

有關 Bootstrap 必須解決的一些瀏覽器錯誤的列表，請參閱我們的瀏覽器錯誤牆。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 也受支持，但是請注意，這些瀏覽器不完全支持某些 CSS3 屬性和 HTML5 元素。此外，Internet Explorer 8 需要使用Respond.js來啟用媒體查詢支持。

特徵	互聯網瀏覽器 8	互聯網瀏覽器 9
`border-radius`	不支持	支持的
`box-shadow`	不支持	支持的
`transform`	不支持	支持，帶`-ms`前綴
`transition`	不支持
`placeholder`	不支持

訪問Can I use...了解有關瀏覽器對 CSS3 和 HTML5 功能的支持的詳細信息。

Internet Explorer 8 和 Respond.js

在 Internet Explorer 8 的開發和生產環境中使用 Respond.js 時，請注意以下注意事項。

Respond.js 和跨域 CSS

將 Respond.js 與託管在不同（子）域（例如 CDN）上的 CSS 一起使用需要一些額外的設置。有關詳細信息，請參閱 Respond.js 文檔。

響應.js 和`file://`

由於瀏覽器安全規則，Respond.js 不適用於通過file://協議查看的頁面（例如打開本地 HTML 文件時）。要測試 IE8 中的響應功能，請通過 HTTP(S) 查看您的頁面。有關詳細信息，請參閱 Respond.js 文檔。

響應.js 和`@import`

Respond.js 不適用於通過@import. 特別是，已知某些 Drupal 配置使用@import. 有關詳細信息，請參閱 Respond.js 文檔。

Internet Explorer 8 和 box-sizing

與、、或box-sizing: border-box;結合使用時， IE8 不完全支持。因此，從 v3.0.1 開始，我們不再使用on s。min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 和@font-face

IE8@font-face與:before. Bootstrap 將這種組合與它的 Glyphicons 一起使用。如果頁面被緩存，並且在沒有鼠標懸停在窗口上的情況下加載（即點擊刷新按鈕或在 iframe 中加載某些內容），則頁面在字體加載之前被渲染。將鼠標懸停在頁面（正文）上會顯示一些圖標，懸停在其餘圖標上也會顯示這些圖標。有關詳細信息，請參閱問題 #13863。

IE 兼容模式

舊的 Internet Explorer 兼容模式不支持 Bootstrap。為確保您使用的是最新的 IE 呈現模式，請考慮<meta>在您的頁面中包含適當的標籤：

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

打開調試工具確認文檔模式：按下F12並勾選“文檔模式”。

此標記包含在 Bootstrap 的所有文檔和示例中，以確保在每個受支持的 Internet Explorer 版本中實現最佳呈現。

有關更多信息，請參閱此 StackOverflow 問題。

Windows 8 和 Windows Phone 8 中的 Internet Explorer 10

Internet Explorer 10 不會區分device width和viewport width，因此無法在 Bootstrap 的 CSS 中正確應用媒體查詢。通常，您只需添加一個快速的 CSS 片段來解決此問題：

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

但是，這不適用於運行早於Update 3 (aka 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/main/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 和 Device-Width。

作為提示，我們將其包含在 Bootstrap 的所有文檔和示例中作為演示。

Safari 百分比舍入

.col-*-1在 v7.1 for OS X 和 Safari for iOS v8.0 之前版本的 Safari 渲染引擎在我們的網格類中使用的小數位數方面存在一些問題。因此，如果您有 12 個單獨的網格列，您會注意到與其他列行相比，它們顯得不足。除了升級 Safari/iOS，您還有一些變通方法：

添加.pull-right到最後一個網格列以獲得右對齊
手動調整百分比以獲得 Safari 的完美舍入（比第一個選項更難）

模態、導航欄和虛擬鍵盤

溢出和滾動

overflow: hidden在 iOS 和 Android 中，對元素的支持<body>非常有限。為此，當您在任一設備的瀏覽器中滾動超過模式的頂部或底部時，<body>內容將開始滾動。請參閱Chrome 錯誤 #175502（在 Chrome v40 中修復）和WebKit 錯誤 #153852。

iOS 文本字段和滾動

從 iOS 9.3 開始，當 modal 打開時，如果滾動手勢的初始觸摸在 textual<input>或 a的邊界內<textarea>，則將滾動 modal 下面的<body>內容而不是 modal 本身。請參閱WebKit 錯誤 #153856。

虛擬鍵盤

另外，請注意，如果您使用固定導航欄或在模式中使用輸入，iOS 有一個渲染錯誤，即在觸發虛擬鍵盤時不會更新固定元素的位置。一些解決方法包括將您的元素轉換為position: absolute或調用焦點計時器以嘗試手動更正定位。這不是由 Bootstrap 處理的，因此由您決定哪種解決方案最適合您的應用程序。

由於 z-indexing 的複雜性，該.dropdown-backdrop元素未在 iOS 上的導航中使用。因此，要關閉導航欄中的下拉菜單，您必須直接單擊下拉元素（或任何其他會在 iOS 中觸發單擊事件的元素）。

瀏覽器縮放

頁面縮放不可避免地會在某些組件中呈現渲染偽影，無論是在 Bootstrap 中還是在 Web 的其餘部分中。根據問題，我們可能能夠修復它（先搜索，然後在需要時打開問題）。然而，我們傾向於忽略這些，因為除了 hacky 變通方法之外，它們通常沒有直接的解決方案。

粘性`:hover`/`:focus`在移動設備上

儘管在大多數觸摸屏上無法實現真正的懸停，但大多數移動瀏覽器都模擬懸停支持並使其:hover“粘滯”。換句話說，:hover樣式在點擊一個元素後開始應用，只有在用戶點擊其他元素後才停止應用。這可能會導致 Bootstrap 的:hover狀態在此類瀏覽器上變得不受歡迎。一些移動瀏覽器也:focus具有類似的粘性。除了完全刪除此類樣式外，目前沒有針對這些問題的簡單解決方法。

印刷

即使在一些現代瀏覽器中，打印也可能很古怪。

特別是，從 Chrome v32 開始，無論邊距設置如何，Chrome 在打印網頁時解析媒體查詢時使用的視口寬度明顯小於物理紙張尺寸。這可能會導致 Bootstrap 的超小網格在打印時被意外激活。有關詳細信息，請參閱問題 #12078和Chrome 錯誤 #273306。建議的解決方法：

擁抱超小網格，並確保您的頁面在其下看起來可以接受。
自定義 Less 變量的值，@screen-*以便您的打印紙被認為大於特小。
添加自定義媒體查詢以僅更改打印媒體的網格大小斷點。

此外，從 Safari v8.0 開始，fixed-width.container可能會導致 Safari 在打印時使用異常小的字體大小。有關更多詳細信息，請參閱#14868和WebKit 錯誤 #138192。一種可能的解決方法是添加以下 CSS：

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

安卓股票瀏覽器

開箱即用，Android 4.1（甚至顯然是一些較新的版本）附帶了瀏覽器應用程序作為默認的網絡瀏覽器選擇（而不是 Chrome）。不幸的是，瀏覽器應用程序通常有很多錯誤和與 CSS 不一致的地方。

選擇菜單

在<select>元素上，如果應用了border-radius和/或，Android 股票瀏覽器將不會顯示側面控件border。（有關詳細信息，請參閱此 StackOverflow 問題。）使用下面的代碼片段刪除有問題的 CSS 並將其呈現<select>為 Android 股票瀏覽器上的無樣式元素。用戶代理嗅探可避免干擾 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 演示。

驗證器

為了給舊的和有問題的瀏覽器提供盡可能好的體驗，Bootstrap 在幾個地方使用CSS 瀏覽器 hack將特殊的 CSS 定位到某些瀏覽器版本，以解決瀏覽器本身的錯誤。這些 hack 可以理解地導致 CSS 驗證器抱怨它們是無效的。在一些地方，我們還使用了尚未完全標準化的前沿 CSS 功能，但這些功能純粹用於漸進增強。

這些驗證警告在實踐中並不重要，因為我們的 CSS 的非 hacky 部分確實完全驗證並且 hacky 部分不會干擾非 hacky 部分的正常運行，因此我們故意忽略這些特定警告。

由於我們包含了針對某個 Firefox 錯誤的解決方法，我們的 HTML 文檔同樣有一些瑣碎和無關緊要的 HTML 驗證警告。

雖然我們不正式支持任何第三方插件或附加組件，但我們確實提供了一些有用的建議來幫助您避免項目中的潛在問題。

盒子尺寸

一些第三方軟件，包括谷歌地圖和谷歌自定義搜索引擎，與 Bootstrap 衝突，* { box-sizing: border-box; }這是因為它padding不會影響元素的最終計算寬度。在 CSS Tricks了解更多關於盒子模型和大小的信息。

根據上下文，您可以根據需要覆蓋（選項 1）或重置整個區域的框大小（選項 2）。

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via 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: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Bootstrap 遵循常見的 Web 標準，並且可以用最少的額外工作來創建那些使用AT的人可以訪問的站點。

如果您的導航包含許多鏈接並且位於 DOM 中的主要內容Skip to main content之前，請在導航之前添加一個鏈接（有關簡單說明，請參閱此A11Y 項目關於跳過導航鏈接的文章）。使用.sr-only該類將在視覺上隱藏跳過鏈接，並且.sr-only-focusable該類將確保該鏈接在獲得焦點後變為可見（對於有視力的鍵盤用戶）。

由於 Chrome（請參閱Chromium 錯誤跟踪器中的問題 262171）和 Internet Explorer（請參閱有關頁內鏈接和焦點順序的這篇文章）中長期存在的缺點/錯誤，您需要確保跳過鏈接的目標至少可以通過添加tabindex="-1".

此外，您可能希望tabindex="-1"使用#content:focus { outline: none; }.

請注意，此錯誤還會影響您的網站可能使用的任何其他頁內鏈接，使它們對鍵盤用戶無用。您可以考慮為所有其他作為鏈接目標的命名錨點/片段標識符添加類似的權宜之計。

<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和賓夕法尼亞州立大學的 AccessAbility中了解更多信息。

顏色對比

目前，Bootstrap 中提供了一些默認的顏色組合（例如各種樣式按鈕類、一些用於基本代碼塊的代碼突出顯示顏色、.bg-primary 上下文背景助手類以及在白色背景上使用時的默認鏈接顏色）對比度低（低於推薦的 4.5:1 比例）。這可能會給視力低下或色盲的用戶帶來問題。可能需要修改這些默認顏色以增加它們的對比度和易讀性。

其他資源

它要求您：

在您的作品中使用 Bootstrap 的 CSS 和 JavaScript 文件時，請保留許可和版權聲明

它允許您：

全部或部分免費下載和使用 Bootstrap，用於個人、私人、公司內部或商業目的
在您創建的包或發行版中使用 Bootstrap
修改源代碼
授予子許可以修改和分發 Bootstrap 給未包含在許可中的第三方

它禁止您：

由於 Bootstrap 不提供任何保證，因此請作者和許可證所有者承擔損害賠償責任
在沒有適當歸屬的情況下重新分發任何 Bootstrap
以任何可能聲明或暗示 Twitter 認可你的分發的方式使用 Twitter 擁有的任何標記
以任何可能聲明或暗示您創建了相關 Twitter 軟件的方式使用 Twitter 擁有的任何標記

它不要求您：

包括 Bootstrap 本身的源代碼，或者您可能對其進行的任何修改的源代碼，在您可能組裝的任何包含它的重新分發中
將您對 Bootstrap 所做的更改提交回 Bootstrap 項目（儘管鼓勵此類反饋）

完整的 Bootstrap 許可證位於項目存儲庫中以獲取更多信息。

社區成員已將 Bootstrap 的文檔翻譯成各種語言。沒有一個是官方支持的，它們可能並不總是最新的。

我們不幫助組織或託管翻譯，我們只是鏈接到它們。

完成了新的或更好的翻譯？打開拉取請求以將其添加到我們的列表中。

入門

下載