下載

Boostrap (翻譯版本 v3.3.1)有幾種快速上手的方法,每一種都是針對不同技術等級及使用情境。請仔細閱讀,看看有什麼適合你的特定需求。

Bootstrap

已編譯與最佳化的 CSS、JavaScript 和字型檔。不含文件或原始碼檔案。

下載 Bootstrap

原始碼

Less 原始碼、JavaScript 和字型檔,且附帶文件。需要 Less 編譯器和一些設置

下載原始碼

Sass

這是 Bootstrap 由 Less 移植至 Sass,可輕鬆使用於 Rails、Compass 或僅 Sass 的專案。

下載 Sass

譯者註

已編譯指透過 Less 編譯出來的.css檔案;最佳化指壓縮與最小化的.min.css或.min.js。

Bootstrap CDN

MaxCDN 慷慨地提供 CDN 支援 Bootstrap 3 的 CSS 和 JavaScript。僅需要使用 Bootstrap CDN 連結。

<!-- 最新編譯和最佳化的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- 選擇性佈景主題 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- 最新編譯和最佳化的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

經由 Bower 安裝

經由 Bower 來安裝與管理 Bootstrap 的 Less、CSS、JavaScript 和字型檔案。

$ bower install bootstrap

包含內容

Bootstrap 提供兩種下載的形式,其中,你可以看到下面的目錄和檔案,以共同資源進行邏輯分類並且提供已編譯與最佳化兩種版本。

相依於 jQuery

請注意,Bootstrap 所有 JavaScript 外掛都相依於 jQuery,jQuery 必須在所有外掛之前參考,就像基礎範本所展示的一樣。 查看 bower.json 以瞭解目前 jQuery 版本的支援狀態。

譯者註

查看 bower.json"dependencies" 項目。換言之,目前 Bootstrap 3 為了相容性考量,支援 jQuery 1.9.1 之後的版本,請勿使用 jQuery 2.x。

預編譯的 Bootstrap 3

下載之後,解壓縮至任意資料夾可看到以下結構(已編譯版本)的 Bootstrap 3,看起來如下:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── 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

這是最基本的 Bootstrap 3 組織形態:幾乎在所有的網站專案中快速直接使用預編譯的檔案。我們同時提供編譯好的 CSS 和 JS (bootstrap.*)和最佳化的 CSS 和 JS (bootstrap.min.*)。從 Glyphicons 圖標字型都包括在內,也是選擇性 Bootstrap 佈景主題。

Bootstrap 3 原始碼

下載 Bootstrap 3 原始碼會含有預編譯的 CSS、JavaScript 和圖標字型,還有 Less、JavaScript 和文件的原始碼。具體來說,它包含以下這些內容:

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

less/js/fonts/ 資料夾分別含有 CSS、JS 和圖標字型的原始碼。dist/ 資料夾內含有上面所提到所有預編譯好的檔案。docs/ 資料夾含有此文件的原始碼檔案。examples/ 資料夾含 Bootstrap 3 提供的大量範例介紹。除此之外,其他檔案還包含 grunt 套件、授權文件、開發的支援等。

編譯 CSS 和 JavaScript

Bootstrap 3 使用 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 檔案並自動安裝所需且相依的擴充套件。

當完成上述步驟,你就能夠由命令提示字元執行 Grunt 提供的指令。

可用的 Grunt 指令

grunt dist(僅編譯 CSS 和 JavaScript)

重新產生 /dist/ 目錄下編譯與最佳化好的 CSS 和 JavaScript 檔案。作為 Bootstrap 3 使用者,這通常是你想要的命令。

grunt watch(監視異動)

監視 Less 原始碼檔案並且在異動儲存之後自動重新編譯產生 CSS 檔案。

grunt test(執行測試)

PhantomJS 環境中執行 JSHintQUnit 測試。

grunt docs(建置 & 測試文件)

建置和測試 CSS、JavaScript,透過 jekyll serve 在本地端執行文件時使用的其他項目。

grunt(重新建置所有內容並執行測試)

編譯與最佳化 CSS 和 JavaScript,建置說明文件網站,對說明文件使用 HTML5 驗證器進行驗證,重新產生客製化工具所需資源等等。這需要 Jekyll。通常,只有你對 Bootstrap 3 有深入研究才必需使用到。

問題排除

如果你在安裝相依擴充套件或執行 Grunt 指令時遭遇問題,首先請先刪除 npm 產生的 /node_modules/ 目錄,然後重新執行 npm install

譯者註

譯者在 Windows 平台進行 /node_modules/ 目錄刪除時出現「檔案名稱過長而無法刪除的訊息」。它的目錄層數過深,譯者沒有找到什麼好的解決辦法,只好一層層的修改為短名稱(a、b、...),然後才順利刪除 /node_modules/ 目錄。

基礎範本

由下面這個基礎的 HTML 範本開始,是個不錯的選擇,或著修改這些範例。我們希望你能動手修改這些範本或範例,並按照自己的需求來改寫它們。

複製以下的 HTML,這是最簡單且可運作的 Bootstrap 3 HTML 結構。

<!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">
        <title>Bootstrap 101 Template</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
        <!-- 警告:Respond.js 無法在 file:// 協定下運作 -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
        </head>
        <body>
        <h1>Hello, world!</h1>
        <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- 依需要參考已編譯外掛版本(如下),或各自獨立的外掛版本 -->
        <script src="js/bootstrap.min.js"></script>
        </body>
</html>

範例

以下範例全部基於上述的基礎範本並配合許多 Bootstrap 3 元件製作。我們鼓勵你根據專案的需求對 Bootstrap 3 範例動手進行修改。

使用框架

入門範本

入門範本

最基礎內容:已編譯 CSS 和 JavaScript 以及一個 container 容器。

Bootstrap 佈景主題

Bootstrap 佈景主題

載入選擇性的 Bootstrap 佈景主題以加強視覺體驗。

格線

格線

多個關於格線與四層(tiers)與巢狀方面佈局的範例。

大螢幕

大螢幕

建置含巡覽列與基本格線欄位的大螢幕範本。

窄螢幕

窄螢幕

建置含一個預設 container 容器與自訂頁面的窄螢幕範本。

巡覽列實戰

巡覽列

巡覽列

超入門的範本,僅含有巡覽列與一些額外內容。

靜態置頂巡覽列

靜態置頂巡覽列

超入門的範本,僅含有置頂巡覽列與一些額外內容。

固定巡覽列

固定巡覽列

超入門的範本,僅含有固定巡覽列與一些額外內容。

譯者註

Bootstrap 文件中的"靜態(Static)"通常意思是固定不隨畫面滑動而移動。而"固定(Fixed)"通常意思是指元素(或容器)的位置會固定在畫面上且隨畫面滑動而移動,就像是固定在畫面上一樣。

自訂元件

封面效果

封面效果

單一頁面範本,建置一個簡單而大方的首頁。

幻燈片效果

幻燈片效果

自定義的巡覽列和幻燈片效果,還有加入一些新元件效果。

部落格

部落格

簡單的兩列式的部落格佈局,含自定義巡覽列、標頭(header)和分類。

儀表板

儀表板

基本的管理儀表板架構,含固定側邊欄和巡覽列。

登入頁

登入頁

自訂表單佈局和簡單的登入表單設計。

等寬巡覽

等寬巡覽

立一個自訂的巡覽列且具有等寬的連結。注意,此範本對 Safari 不太友善。

固定頁尾

固定頁尾

將頁尾附加到可視區域的底部,內容要比頁尾還短。

固定頁尾與巡覽列

固定頁尾與巡覽列

將頁尾附加到可視區域的底部,且有固定巡覽列在頂端。

實驗性

非自適應 Bootstrap

非自適應 Bootstrap

簡易就能取消 Bootstrap 3 自適應功能,查看我們的文件

空間利用

空間利用

使用 Bootstrap 3 建置一個空間利用巡覽功能表。

工具

Bootlint

Bootlint 是 Bootstrap 官方 HTML linter 工具。它能自動化檢查網頁中常見的 HTML 錯誤,那是在使用 Bootstrap 時相當常見的做法。一般 Boostrap 的元件需要它們一部分的 DOM 符合特定結構,Bootlint 能檢查 Bootstrap 元件的執行個體是否符合正確的 HTML 結構。可以考慮將 Bootlint 加入到你的 Bootstrap 網頁開發工具鏈中,以減少常見錯誤造成專案的開發。

社群

保持最新的 Bootstrap 3 發展,並且深入至社群與這些有用的資源。

你也可以在 Twitter 跟隨 @twbootstrap 帳號以取得最新八卦和有趣的音樂影片。

取消自適應佈局

Bootstrap 3 會自動調整頁面以適應不同尺寸的螢幕大小。 這裡討論如何取消自適應佈局的功能,類似 非自適應 Bootstrap 3 範例

取消頁面自適應佈局步驟

  1. 移除文件裡提及 viewport 的 <meta> CSS 籤標
  2. .container 類別設置一個 width 值以讓每層格線擁有單一寬度,例如: width: 970px !important;。請確保這些設置是放在預設 Bootstrap 3 CSS 設置之後。你可以在媒體查詢或某些選擇器中省略 !important
  3. 如果使用巡覽列,移除所有巡覽列折疊與展開的行為。
  4. 針對格線佈局,額外加入 .col-xs-* 類別(超小型設備)或是替換使用 .col-md-*(中型設備)或 .col-lg-*(大型設備) 類別。不用担心,對於超小型設備格線佈局能自動延展至所有解析度。

對於 IE8 還是需要使用 Respond.js(因為我們還是使用了媒體查詢,因此還是需要處理)。這樣就取消了 Bootstrap 3 關於"行動網站"方面的支援。

取消自適應 Bootstrap 3 範本

我們按照上述步驟製作一份範本,詳細閱讀程式碼以瞭解明確異動的實作步驟。

瀏覽非自適應範例

由 v2.x 遷移至 v3.x

尋找由 Bootstrap 3 舊版本遷移至 v3.x 的方法嗎?查看一下我們的遷移手冊

瀏覽器和設備支援狀態

Bootstrap 3 是建置在最新桌面與行動瀏覽器以求最佳表現,換句話說,在舊版瀏覽上可能某些元件是運作正常,但呈現出來的佈局樣式可能不同。

支援的瀏覽器

特別注意,我們支援以下瀏覽器和平台的最新版本。在 Windows 平台,我們支援 Internet Explorer 8-11。更多支援細節請參考下列資訊。

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

Bootstrap 3 在 Chromium 和 Linux 版本的 Chrome,Linux 版本的 Firefox 和 Internet Explorer 7 上都運作的不錯,雖然它們不在官方的支援之內。

這裡有關一些 Bootstrap 3 在瀏覽器的臭蟲清單需要處理,查看我們的瀏覽器臭蟲牆

Internet Explorer 8 和 9

Internet Explorer 8 和 9 也是被支援的,無論如何,請務必注意一些 CSS3 屬性和 HTML5 元素是不被支援的。另外,Internet Explorer 8 需要使用 Respond.js 以取得媒體查詢的支援。

CSS3 功能 Internet Explorer 8 Internet Explorer 9
border-radius 不支援 支援
box-shadow 不支援 支援
transform 不支援 支援,但需要加入 -ms 前綴
transition 不支援
placeholder 不支援

訪問 Can I use... 網站以瞭解瀏覽器支援 CSS3 和 HTML5 功能狀態。

Internet Explorer 8 和 Respond.js

當必須在開發或正式環境使用 Respond.js 以支援 Internet Explorer 8,請清楚列出以下警告來提防。

Respond.js 和跨網域 CSS

如果 Respond.js 與 CSS 檔案是存放在不同網域或子網域下(例如,使用 CDN)時需要一些額外的設置。請參考 Respond.js 文件 以瞭解更多資訊。

Respond.js 和 file://

由於瀏覽器的安全規則,Respond.js 無法運作在使用 file:// 協定(像是開啟本機上的 HTML 檔案)觀看的頁面。要在 IE8 測試自適應功能,請務必使用 HTTP(S) 協定。請參考 Respond.js 文件 以瞭解更多資訊。

Respond.js 和 @import

Respond.js 的 CSS 無法正常運作在經由 @import 的參考。例如,是像一些 Drupal 的組態就是使用 @import 來進行配置。請參考 Respond.js 文件 以瞭解更多資訊。

Internet Explorer 8 和 box-sizing

min-widthmax-widthmin-heightmax-height 一起使用時,IE8 不能完全支援 box-sizing: border-box;。有鑒於此,從 v3.0.1 開始不為 .container 賦予 max-width

Internet Explorer 8 和 @font-face

@font-face:before 一起使用時,在 IE8 會產生一些問題。Bootstrap 3 使用 Glyphicons 的組合。如果頁面被快取,並且載入沒有滑鼠滑過的視窗(例如,點擊重新載入按鈕或載入 iframe 中的東西)然後在字型載入之前頁面已取得並呈現。將滑鼠停留在頁面上(即 body 元素)將顯示一些圖示和停留在其他圖示上將會顯哪些是好的。查看問題 #13863 取得更進一步資料。

IE 相容性模式

Bootstrap 3 不支援舊版本 IE 相容性模式。為了確保 IE 是使用最新的呈現模式,考慮將下列 <meta> 加入你的頁面:

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

F12 開啟開發者工具,並檢查"文件模式"以確認現在呈現模式為何。

<meta> 標籤應該包含在所有 Bootstrap 3 文件和範例中,以保證所有支援的 Internet Explorer 能有最佳的呈現效果。

參考 StackOverflow 此一問題的討論取得更進一步資料。

Windows 8 和 Windows Phone 8 的 Internet Explorer 10

Internet Explorer 10 並不從 可視(viewport)寬度 去區別 設備寬度,因此,為能正確套用 Bootstrap 3 媒體查詢的 CSS 屬性,通常,你僅需要加入以下 CSS 片段以解決此問題:

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

然而,這在 Windows Phone 8 Update 3 (a.k.a. GDR3) 之前的版本並不起作用,這會導致類似的設備以桌面模式替代較窄的手機模式來呈現。要解決此問題,你還需要加入以下 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; }
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 3 文件和示範的範例之中。

Safari 百分比進位

當我們使用格線類別 .col-*-1 含有小數位數時,從 OS X 的 Safari v7.0.1 和 iOS 的 Safari v8.0 版開始,Safari 的呈現引擎存在一些問題。如果你在一行中(row)定義了12個單獨的格線列(.col-*-1),你將會注意到它們比其他的行的列要來得短一些。除了升級 Safari / iOS 之外,你能有一些變通的選項來處理:

  • 加入 .pull-right 到最後一個線格列,並強制向右對齊。
  • 手動調整百分比,以符合 Safari 百比分進位(這比第一條還困難)

我們會持續追蹤此問題,並且如果有任何簡單的解決方案,我們會立即更新程式碼。

互動視窗、巡覽列和虛擬鍵盤

互動視窗的Overflow和滑動

在 iOS 和 Android,對於 <body> 元素中的 overflow: hidden 支援相當有限。結果就是,在這兩種作業系統的設備瀏覽器中,當你滑動超過互動視窗(modals)的頂端或底端時,<body> 中的內容將會開始隨之滑動。

虛擬鍵盤

還有,請注意,如果你在互動視窗或巡覽列上使用輸入欄位(input),iOS 在畫面呈現上有臭蟲,當虛擬鍵盤被觸發時,不會更新 fixed 元素的位置。這裡有幾種變通方法,一、轉換你的 fixed 元素為 position: absolute;二、呼叫一個計時器(timer)以嘗試手動修正定位問題。這些方式都未含在 Bootstrap 3 之內,你必須依照你的應用程式來決定合適你的最佳解決方案。

巡覽列的下拉選單

.dropdown-backdrop 元素並未被使用在 iOS 的巡覽列上,因為巡覽複雜的 z-index 屬性。因此,要關閉巡覽列的下拉選單,你必須直接點擊下拉選單上的元素(或是其他任何能在 iOS 上觸發 click 事件的元素)。

瀏覽器的縮放

頁面的縮放將不可避免擾亂某現元件在呈現上的顯示,這在 Bootstrap 3 或其餘的網站都是一樣。針對具體的問題,我們也許能夠修正它們(請先搜尋它們,看看是否有解決方案,如果需要,再到 GitHub 上提交 Issue)。然而,我們更趨向於忽略它們,因為通常除了一些變態的變通手法,一般沒有直接的解決方案。

列印

即使在現在主流的瀏覽器,列印依然是有問題的。

具體來說,從 Chrome v32 開始,當解析媒體查詢來列印網頁時,不管 margin 設置多少,Chrome 使用的可視區域(viewport)明顯地比實際紙張還要窄很多。這會導致列印時 Boostrap 的超小螢幕格線設置被意外觸發。查看 #12078 以取得更多細節。建議的變通解決方法:

  • 擁抱超小螢幕格線設置並且讓你的頁面看起來能接受它。
  • 自訂 Less 的 @screen-* 變數值,讓你的列印紙被認為比超小螢幕的格線設置還大。
  • 加入自訂媒體查詢來變更格線系統大小的判斷點,讓它僅用在列印媒體上。

此外,在 Safari v8.0,當在列印時,固定寬度的 .container 會導致不正常小字型尺寸大小。查閱 #14868 瞭解更多資訊。一種可能的變通方法是加入以下 CSS:

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

Android stock 瀏覽器

在 Android 4.1(甚至一些較新的版本也是)選擇使用瀏覽器 App 作為預設的網頁瀏覽器(而不是 Chrome)。不幸的是,瀏覽器 App 有許多臭蟲和一般 CSS 的不一致。

Select 選單

<select> 元素,如果套用了 border-radius 和(與) border,Android stock 瀏覽器將不會呈現像圓角等效果。(查看 StackOverflow 有關此問題的討論。)使用以下的程式碼片段,以移除有問題的 CSS 和Android stock 瀏覽器在呈現 <select> 無效的樣式元素。使用者代理(userAgent)的探測可以避免干擾 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 展示。

驗證器

為了替又老又充斥著臭蟲的瀏覽器提供最好的體驗,在幾個地方針對特定的 CSS 特定瀏灠器版本,Bootstrap 使用 CSS browser hacks 技巧來解決瀏灠器的臭蟲。這些 hack 技巧是可以理解的,但會造成 CSS 驗證器抱怨它們是無效的。在幾個地方,我們使用了尚未標準化最先進的 CSS 功能,但這都只是為了漸進增強。

在非 hacky 部分,這些驗證器警告在實務並不重要,我們的 CSS 有充分的驗證,hacky 部分不會干擾到非 hacky 的功能。因此,這就是為什麼我們特意忽略這些具體的警告。

我們的 HTML 文件也有一些類似且無關緊要的 HTML 驗證器警告,這是由於我們包含處理一個 Firefox 臭蟲的變通方法。

第三方支援

雖然我們不正式支援任何第三方開發的外掛或擴充程式,我們還是提供一些有用的建議,以幫助你在專案中避免潛在的問題。

Box-sizing

某些第三方軟體,包含 Google Maps 和 Google 自訂搜尋引擎都會因為 Bootstrap 3 的 * { box-sizing: border-box; } 設置產生衝突。通常,這會使得它的 padding 不會影響元素最終計算出的寬度。瞭解更多關於此問題,請參考 box model and sizing at CSS Tricks 一文。

根據不同情境,你也許需要覆寫作為所需(Option 1)或重置 box-sizing 的整個區域(Option 2)大小。

/* Box-sizing resets
 *
 * 為避免 Bootstrap 3 全域盒子模型(box model) 設置,可以選擇覆寫單獨的頁面元素
 * 或重置整個盒子模型(box model) 區域。二種選項,單獨頁面的覆寫和重要整個盒子模型
 * (box model)區域,都能透過純 CSS 或 Less 來設置。
 */

/* Option 1A: 經由 CSS 覆寫單個頁面元素的 box model */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: 使用 Bootstrap Less mixin 覆寫單個頁面元素的 box model */
.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 3 遵循一致的 Web 標準 — 與一些小量的修改 — 讓你建立的網站具有無障礙(accessible ),讓輔助科技(AT)也能訪問。

略過巡覽區

如果你的巡覽區域包含許多的連結,並且在 DOM 結構上也是在主要內容之前,那麼,在緊接著 <body> 標籤之後加入一個 跳至主要內容 的連結。(閱讀瞭解為什麼這樣做。)

<body>
        <a href="#content" class="sr-only sr-only-focusable">跳至主要內容</a>
        <div class="container" id="content">
    這裡是頁面主要內容。
        </div>
</body>

套用標題

當套用標題(<h1> - <h6>),你的文件主標題應該是 <h1>。 隨後的標題在邏輯上應該循序的使用 <h2> - <h6>,如此之後,螢幕閱讀器就能架構出頁面的內容列表(TOC)。

閱讀更多的資訊,請參考 HTML CodeSnifferPenn State's AccessAbility

Color 對比

目前,一些在 Bootstrap 中預設可用的顏色組合(像是各種按鈕樣式按鈕樣式、一些程式碼區塊程式碼醒目提示、.bg-primary情境背景輔助類別、在白色背景上使用預設的連結顏色)具有低的對比度(W3C 建議對比為 4.5:1)。這可能導致使用者的低視力或誰是色盲的問題。這些預設顏色可能需要進行修改,以提高他們的對比度和清晰度。

其他資源

License FAQs

Bootstrap is released under the MIT license and is copyright 2014 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.

It requires you to:

  • Include the license and copyright notice in your works

It permits you to:

  • 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

It forbids you to:

  • 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)

The full Bootstrap license is located in the project repository for more information.

授權常見問題

Bootstrap 依據 MIT 授權進行發行,版權為 2014 Twitter 所有。歸納一些重點:

它要求你:

  • 在你的作品中包含授權與版權聲明

它授權你:

  • 免費的下載和使用 Bootstrap 的全部或部分,用於個人、私人、公司內部或商業目的
  • 使用 Bootstrap 套件或發行你建立的版本
  • 修改原始碼
  • 准予再授權以修改和發行 Bootstrap 到第三方,不包含原授權

它禁止你:

  • 持有作者和授權者承擔賠償責任,Bootstrap 不提供任何擔保
  • 持有建立者和聲明者承擔 Bootstrap 責任
  • 重新發行任何一個 Bootstrap 而不適當歸屬
  • 使用 Twitter 所擁有的任何標誌,並且在任何可能明示或暗示方式表示 Twitter 贊同你的發行版本
  • 使用 Twitter 所擁有的任何標誌,並且在任何可能問題中明示或暗示方式表示由你建立的 Twitter 軟體

它不要求你:

  • 包含 Bootstrap 本身的原始碼,或任何你可能做出的任何修改,在任何重新發行的情況,你可以重組包含它
  • 提交你所做的變更的 Bootstrap 到 Bootstrap 專案(儘管這種回饋是值的鼓勵)

完整 Bootstrap 授權在 專案的 repository 中,請參考取得更多資訊。

譯者註

授權條文請以英文為主,譯者不是法律專家,不負任何中文翻譯上責任。

翻譯

社群成員翻譯了數種語系的 Bootstrap 3 文件。它們不是正式支援並且不總是即時更新。

我們不幫助組識或托管翻譯文件,我們僅提供連結。

完成一份新的或更好的翻譯?開一個新 pull 要求加入我們的清單。

譯者註

如發現任何正體中文翻譯上的問題,請寄送郵件至: