方法

雖然入門頁面提供了專案的簡介和它提供的內容，但本文檔著重在 為何 我們在 Bootstrap 中執行我們所做的事。它說明了我們在網路上建置的哲學，以便其他人可以從我們身上學習、與我們合作並幫助我們改進。

看到一些聽起來不對勁，或可能可以做得更好的內容嗎？開啟一個議題，我們很樂意與您討論。

摘要

我們將深入探討每個部分，但從高階來看，以下是我們的方針。

• 元件應具備回應式和行動優先
• 元件應使用基礎類別建置，並透過修改類別延伸
• 元件狀態應遵循常見的 z-index 比例
• 盡可能優先使用 HTML 和 CSS 實作，而非 JavaScript
• 盡可能使用公用程式，而非自訂樣式
• 盡可能避免強制執行嚴格的 HTML 需求（子選取器）

響應式

Bootstrap 的響應式樣式建置為響應式，這種方法通常稱為「行動裝置優先」。我們在文件當中使用這個術語，並且大致同意，但有時它可能太過廣泛。雖然並非每個元件都必須在 Bootstrap 中完全響應，但這種響應式方法旨在透過讓您在視窗變大時新增樣式，來減少 CSS 覆寫。

在 Bootstrap 中，您會在我們的媒體查詢中看到這一點最為明顯。在大部分情況下，我們使用從特定中斷點開始套用並延伸至較高中斷點的 `min-width` 查詢。例如，`.d-none` 會從 `min-width: 0` 套用至無限大。另一方面，`.d-md-none` 會從中斷點套用至無限大。

有時當元件的內在複雜性需要時，我們會使用 `max-width`。有時，這些覆寫在功能上和心理上都比從我們的元件中改寫核心功能更清晰且更容易實作和支援。我們努力限制這種方法，但會不時使用它。

類別

除了我們的 Reboot（一個跨瀏覽器標準化樣式表）之外，我們所有的樣式都旨在使用類別作為選取器。這表示避免使用類型選取器（例如，`input[type="text"]`）和多餘的父類別（例如，`.parent .child`），這些類別會讓樣式過於具體，難以輕鬆覆寫。

因此，元件應該建置一個包含常見、不可覆寫的屬性值配對的基本類別。例如，`.btn` 和 `.btn-primary`。我們使用 `.btn` 來設定所有常見樣式，例如 `display`、`padding` 和 `border-width`。然後我們使用修改器，例如 `.btn-primary` 來新增顏色、背景顏色、邊框顏色等。

修改器類別僅應在變數之間有多個屬性或值需要變更時使用。修改器並非總是必要的，因此在建立修改器時，請務必實際儲存程式碼行數並防止不必要的覆寫。修改器的良好範例是我們的佈景主題顏色類別和大小變數。

z-index 比例

Bootstrap 中有兩個 z-index 比例，元件內的元素和疊加元件。

元件元素

• Bootstrap 中的某些元件是以重疊元素建立，以防止修改 border 屬性而產生雙邊框。例如，按鈕群組、輸入群組和分頁。
• 這些元件共用一個標準 z-index 比例，從 0 到 3。
• 0 是預設（初始），1 是 :hover，2 是 :active/.active，3 是 :focus。
• 此方法符合我們對最高使用者優先順序的預期。如果某個元素獲得焦點，表示它在視圖中且使用者正在注意它。活動元素是第二高的優先順序，因為它們表示狀態。懸停是第三高的優先順序，因為它表示使用者的意圖，但幾乎任何東西都可以懸停。

疊加元件

Bootstrap 包含多個元件，這些元件以某種形式作為疊加。這些元件按最高 z-index 順序排列，包括下拉式選單、固定和黏著導覽列、對話框、工具提示和提示框。這些元件有自己的 z-index 比例，從 1000 開始。此起始數字是任意選定的，作為我們的樣式和您的專案自訂樣式之間的小緩衝。

每個疊加元件都會略微增加其 z-index 值，讓常見的 UI 原則允許使用者焦點或懸停的元素始終保持在視圖中。例如，對話框會阻擋文件（例如，您無法執行對話框動作以外的任何其他動作），因此我們將它放在導覽列上方。

在我們的 z-index 版面頁面 中深入了解這一點。

HTML 和 CSS 優於 JS

只要有可能，我們都偏好使用 HTML 和 CSS，而非 JavaScript。一般來說，HTML 和 CSS 較為豐富且對各種不同經驗等級的人來說更易於使用。HTML 和 CSS 在瀏覽器中的速度也比 JavaScript 快，而瀏覽器通常會提供大量的功能給您。

此原則是我們使用 data 屬性的首要 JavaScript API。您幾乎不需要撰寫任何 JavaScript 就能使用我們的 JavaScript 外掛程式；相反地，撰寫 HTML。在 我們的 JavaScript 概觀頁面 中深入了解這一點。

最後，我們的樣式建立在常見網頁元素的基本行為上。只要有可能，我們都偏好使用瀏覽器提供的功能。例如，您幾乎可以在任何元素上加上 .btn 類別，但大多數元素不會提供任何語意值或瀏覽器功能。因此，我們改用 <button> 和 <a>。

較複雜的元件也適用相同的原則。雖然我們可以撰寫自己的表單驗證外掛程式，以根據輸入狀態將類別新增至父元素，進而讓我們將文字樣式設定為紅色，但我們偏好使用每個瀏覽器都提供的 :valid/:invalid 偽元素。

工具程式

工具程式類別（在 Bootstrap 3 中稱為輔助程式）是對抗 CSS 膨脹和不良頁面效能的有力盟友。工具程式類別通常是單一、不可變的屬性值配對，表示為類別（例如，.d-block 代表 display: block;）。它們的主要優點是撰寫 HTML 時的速度，以及限制您必須撰寫的客製化 CSS 數量。

特別是關於自訂 CSS，實用程式可以透過將最常重複的屬性值對簡化成單一類別，來協助對抗檔案大小的增加。這在專案中可以產生顯著的效果。

靈活的 HTML

雖然並非總是可行，但我們致力於避免對元件的 HTML 需求過於教條。因此，我們在 CSS 選取器中專注於單一類別，並盡量避免立即的子代選取器 (>)。這讓你在實作上更靈活，並有助於讓我們的 CSS 更簡單且不那麼具體。

程式碼慣例

程式碼指南（來自 Bootstrap 共同建立者 @mdo）記錄了我們如何在 Bootstrap 中撰寫 HTML 和 CSS。它指定了關於一般格式、常識預設、屬性和屬性順序等方面的準則。

我們使用 Stylelint 在 Sass/CSS 中強制執行這些標準以及更多標準。我們的 自訂 Stylelint 設定檔 是開放原始碼，供其他人使用和延伸。

我們使用 vnu-jar 來強制執行標準和語意化 HTML，以及偵測常見錯誤。