Source

方法

了解用於構建和維護 Bootstrap 的指導原則、策略和技術，以便您可以更輕鬆地自定義和擴展它。

雖然入門頁面提供了項目的介紹性導覽及其提供的功能，但本文檔重點介紹了我們在 Bootstrap 中所做的事情的原因。它解釋了我們在網絡上構建的理念，以便其他人可以向我們學習，與我們一起貢獻，並幫助我們改進。

看到一些聽起來不正確的東西，或者可能做得更好？打開一個問題——我們很樂意與您討論。

概括

我們將在整個過程中更深入地研究每一個，但在高層次上，這是指導我們方法的內容。

  • 組件應該是響應式和移動優先的
  • 組件應該使用基類構建並通過修飾符類進行擴展
  • 組件狀態應遵循常見的 z-index 比例
  • 盡可能選擇 HTML 和 CSS 實現而不是 JavaScript
  • 盡可能使用實用程序而不是自定義樣式
  • 盡可能避免執行嚴格的 HTML 要求（子選擇器）

響應式

Bootstrap 的響應式樣式被構建為響應式的，這種方法通常被稱為移動優先。我們在我們的文檔中使用這個術語並且在很大程度上同意它，但有時它可能過於寬泛。雖然不是每個組件都必須在 Bootstrap 中完全響應，但這種響應式方法是通過在視口變大時推動您添加樣式來減少 CSS 覆蓋。

在 Bootstrap 中，您會在我們的媒體查詢中最清楚地看到這一點。在大多數情況下，我們使用min-width在特定斷點處開始應用並通過更高斷點進行的查詢。例如，a.d-none適用於從min-width: 0到無窮大。另一方面，a.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比例0through 3。
  • 0是默認（初始），1是:hover，2是:active/ .active，和，3是:focus。
  • 這種方法符合我們對最高用戶優先級的期望。如果一個元素被聚焦，它就在視圖中並引起用戶的注意。活動元素是第二高的，因為它們指示狀態。懸停是第三高的，因為它表示用戶意圖，但幾乎任何東西都可以懸停。

疊加組件

Bootstrap 包括幾個作為某種覆蓋的組件。這包括按最高順序排列的z-index下拉菜單、固定和粘性導航欄、模式、工具提示和彈出框。這些組件有自己的z-index規模，從1000. 這個起始數字是隨機的，作為我們的樣式和您項目的自定義樣式之間的一個小緩衝區。

每個覆蓋組件都會z-index稍微增加它的價值，這樣常見的 UI 原則允許用戶聚焦或懸停的元素始終保持在視圖中。例如，一個模態是文檔阻塞（例如，除了模態的動作，你不能採取任何其他動作），所以我們把它放在我們的導航欄上方。

z-index在我們的佈局頁面中了解更多信息。

JS 之上的 HTML 和 CSS

只要有可能，我們更喜歡編寫 HTML 和 CSS 而不是 JavaScript。一般而言，HTML 和 CSS 更加豐富，並且可供更多不同經驗水平的人使用。HTML 和 CSS 在您的瀏覽器中也比 JavaScript 更快，並且您的瀏覽器通常為您提供大量功能。

這個原則是我們一流的 JavaScript API 是data屬性。您幾乎不需要編寫任何 JavaScript 即可使用我們的 JavaScript 插件；相反，編寫 HTML。在我們的 JavaScript 概覽頁面中閱讀更多相關信息。

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

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

實用程序

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

特別是關於自定義 CSS，實用程序可以通過將最常見的重複屬性值對減少到單個類中來幫助應對文件大小的增加。這可以在您的項目中產生巨大的影響。

靈活的 HTML

雖然並非總是可行，但我們努力避免在我們對組件的 HTML 要求中過於教條。因此，我們專注於 CSS 選擇器中的單個類，並儘量避免直接子選擇器 ( >)。這為您的實現提供了更大的靈活性，並有助於使我們的 CSS 更簡單、更不具體。