方法論（Approach）

雖然入門頁面提供了專案及其功能的簡介導覽，但本文件著重於_為什麼_我們在 Bootstrap 中採用這些做法。它解釋了我們在網頁開發上的理念，讓其他人可以向我們學習、與我們一起貢獻，並幫助我們改進。

看到不太對勁的地方，或者可能可以做得更好？開啟一個 issue——我們很樂意與您討論。

摘要（Summary）

我們將在下文中深入探討每一點，但從高層次來看，以下是指導我們方法的原則。

• 元件應該是響應式且行動優先的
• 元件應該使用基礎類別建構，並透過修飾類別進行擴展
• 元件狀態應該遵循通用的 z-index 比例
• 只要可能，優先使用 HTML 和 CSS 實作而非 JavaScript
• 只要可能，使用通用類別而非自訂樣式
• 只要可能，避免強制嚴格的 HTML 要求（子選擇器）

響應式（Responsive）

Bootstrap 的響應式樣式是以響應式為基礎建構的，這種方法通常被稱為_行動優先_。我們在文件中使用這個術語並大致同意它，但有時它可能太籠統。雖然不是每個元件在 Bootstrap 中_都必須_完全響應式，但這種響應式方法是關於透過推動您在視窗變大時新增樣式來減少 CSS 覆寫。

在整個 Bootstrap 中，您會在我們的 media queries 中最清楚地看到這一點。在大多數情況下，我們使用從特定中斷點開始套用並延續到更高中斷點的 min-width 查詢。例如，.d-none 從 min-width: 0 套用到無限大。另一方面，.d-md-none 從中型中斷點及以上套用。

有時當元件的固有複雜性需要時，我們會使用 max-width。有時，這些覆寫在功能上和思維上比從我們的元件重寫核心功能更清晰、更容易實作和支援。我們努力限制這種方法，但偶爾會使用它。

類別（Classes）

除了我們的 Reboot（跨瀏覽器標準化樣式表）之外，我們所有的樣式都旨在使用類別作為選擇器。這意味著避免使用型別選擇器（例如 input[type="text"]）和多餘的父類別（例如 .parent .child），它們使樣式過於具體而難以覆寫。

因此，元件應該使用包含常見、不應被覆寫的屬性值配對的基礎類別來建構。例如 .btn 和 .btn-primary。我們使用 .btn 來處理所有常見樣式，如 display、padding 和 border-width。然後我們使用像 .btn-primary 這樣的修飾符來新增 color、background-color、border-color 等。

修飾類別應該僅在有多個屬性或值需要在多個變體中更改時使用。修飾符並不總是必要的，因此在建立它們時，請確保您確實節省了程式碼行數並防止了不必要的覆寫。修飾符的好例子是我們的主題顏色類別和尺寸變體。

z-index 比例（z-index scales）

Bootstrap 中有兩種 z-index 比例——元件內的元素和覆蓋元件。

元件元素（Component elements）

• Bootstrap 中的某些元件是使用重疊元素建構的，以防止雙重邊框而無需修改 border 屬性。例如，按鈕群組、輸入群組和分頁。
• 這些元件共享從 0 到 3 的標準 z-index 比例。
• 0 是預設（初始），1 是 :hover，2 是 :active/.active，3 是 :focus。
• 這種方法符合我們對最高使用者優先級的期望。如果元素被聚焦，它在視野中並引起使用者的注意。活動元素是第二高的，因為它們表示狀態。Hover 是第三高的，因為它表示使用者意圖，但幾乎_任何東西_都可以被 hover。

覆蓋元件（Overlay components）

Bootstrap 包含幾個作為某種覆蓋功能的元件。這包括，按 z-index 從高到低排列，下拉選單、固定和黏性導覽列、互動視窗、工具提示框和彈出提示框。這些元件有自己從 1000 開始的 z-index 比例。這個起始數字是任意選擇的，作為我們的樣式和您專案自訂樣式之間的小緩衝區。

每個覆蓋元件都稍微增加其 z-index 值，這樣常見的 UI 原則允許使用者聚焦或 hover 的元素始終保持在視野中。例如，互動視窗會阻止文件（例如，除了互動視窗的操作外，您無法採取任何其他操作），因此我們將它放在導覽列之上。

在我們的 z-index 版面配置頁面了解更多。

HTML 和 CSS 優先於 JS（HTML and CSS over JS）

只要可能，我們更喜歡編寫 HTML 和 CSS 而非 JavaScript。一般來說，HTML 和 CSS 更普及，對各種經驗程度的人來說更容易存取。HTML 和 CSS 在您的瀏覽器中也比 JavaScript 更快，而且您的瀏覽器通常為您提供大量功能。

這個原則是我們使用 data 屬性的第一類 JavaScript API。您幾乎不需要編寫任何 JavaScript 就能使用我們的 JavaScript 外掛；相反，編寫 HTML。在我們的 JavaScript 概覽頁面閱讀更多。

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

對於更複雜的元件也是如此。雖然我們_可以_編寫自己的表單驗證外掛來根據輸入的狀態向父元素新增類別，從而允許我們將文字設定為紅色，但我們更喜歡使用每個瀏覽器為我們提供的 :valid/:invalid 偽元素。

通用類別（Utilities）

通用類別——在 Bootstrap 3 中以前稱為 helpers——是對抗 CSS 膨脹和頁面效能不佳的強大盟友。通用類別通常是表示為類別的單一、不可變的屬性值配對（例如 .d-block 代表 display: block;）。它們的主要吸引力是編寫 HTML 時的使用速度，以及限制您必須編寫的自訂 CSS 數量。

特別是關於自訂 CSS，通用類別可以透過將您最常重複的屬性值配對減少為單一類別來幫助對抗檔案大小增加。這可以在您的專案中產生顯著的大規模效果。

彈性 HTML（Flexible HTML）

雖然並非總是可能，但我們努力避免對元件的 HTML 要求過於教條。因此，我們專注於 CSS 選擇器中的單一類別，並嘗試避免直接子選擇器（>）。這為您的實作提供更多彈性，並幫助保持我們的 CSS 更簡單、更不具體。

程式碼慣例（Code conventions）

Code Guide（來自 Bootstrap 共同創作者 @mdo）記錄了我們如何在整個 Bootstrap 中編寫 HTML 和 CSS。它指定了通用格式、常識預設值、屬性和特性順序等指南。

我們使用 Stylelint 來強制執行這些標準以及更多 Sass/CSS 規範。我們的自訂 Stylelint 設定是開源的，可供他人使用和擴展。

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