在 GitHub 上檢視

方法

瞭解 Bootstrap 的指導原則、策略和技術，以便更輕鬆地自訂和擴充它。

入門頁面提供專案和其提供的功能的簡介，而本文檔則專注於我們在 Bootstrap 中執行某些操作的原因。它說明我們在 Web 上建立的理念，以便其他人可以向我們學習、與我們合作並協助我們改進。

看到不對勁或可以做得更好的地方嗎？開啟問題，我們很樂意與您討論。

摘要

我們將深入探討這些方法，但總體而言，以下是我們方法的指導方針。

  • 元件應具備回應式且行動裝置優先
  • 元件應使用基本類別建立，並透過修改類別擴充
  • 元件狀態應遵循常見的 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 值，讓常見的使用者介面原則允許使用者聚焦或懸停的元件始終保持在視圖中。例如，一個模態框會阻擋文件（例如，除了模態框的動作外，您無法執行任何其他動作），因此我們將其放在我們的導覽列上方。

在我們的 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，以及偵測常見錯誤。