雖然入門頁面提供了項目的介紹性介紹以及它提供了什么，但本文重點介紹了我們為什么要在Bootstrap中做這些事情。它解釋了我們的理念，建立在網絡上，讓別人可以向我們學習，與我們一起貢獻，并幫助我們提高。

看到一些聽起來不對的東西，或者也許可以做得更好？打開一個問題，我們想和你討論一下。 Open an issue

摘要

我們將更深入地探討其中的每一個問題，但在較高的層次上，以下是指導我們的方法的內容。

• 組件首先應具有響應性和可移動性
• 組件應該用基類構建，并通過修飾符類進行擴展
• 組件狀態應該遵循一個通用的z-索引標度
• 只要有可能，最好使用HTML和CSS實現而不是JavaScript
• 盡可能使用自定義樣式上的實用程序
• 盡可能避免強制執行嚴格的HTML要求（子選擇器）

響應性

Bootstrap的responsive樣式是為響應而構建的，這種方法通常被稱為"移動優先"。我們在文檔中使用這個術語，基本上同意它，但有時它可能過于寬泛。雖然并非每個組件都必須在引導中完全響應，但這種響應性方法是通過在視口變大時推動您添加樣式來減少CSS覆蓋。

通過Bootstrap，您將在我們的媒體查詢中最清楚地看到這一點。在大多數情況下，我們使用最小寬度的查詢，這些查詢開始應用于特定的斷點，然后繼續執行更高的斷點。例如，.d-none 從min-width: 0應用到無窮大。另一方面，.d-md-none 從媒體斷點開始應用。

有時我們會在組件固有的復雜性需要時使用max width。有時，與從組件重寫核心功能相比，這些重寫在功能和思想上更易于實現和支持。我們努力限制這種方法，但會不時地使用它。

類

除了重置跨瀏覽器標準化樣式表之外，我們所有的樣式都旨在使用類作為選擇器。這意味著要避開類型選擇器（例如， input[type="text"]）和無關的父類（例如，.parent .child），因為這些父類使得樣式太過具體而不容易重寫。

因此，應該使用包含公共屬性的基類來構建組件，而不是重寫屬性值對。例如，.btn和.btn primary。我們將.btn用于所有常見樣式，如顯示、填充和邊框寬度。然后我們使用.btn-primary這樣的修飾符來添加顏色、背景色、邊框色等。

只有在多個變量之間有多個屬性或值需要更改時，才應該使用修飾符類。修飾符并不總是必要的，所以在創建它們時，一定要保存代碼行并防止不必要的重寫。我們的主題顏色類和大小變體就是很好的修改器示例。

z-index scales

組件和覆蓋組件中的引導元素中有兩個z索引量表。z-index

組成元素

• Bootstrap中的一些組件是用重疊元素構建的，以防止在不修改border屬性的情況下出現雙邊框。例如，按鈕組、輸入組和分頁。
• 這些組件共享0到3的標準z索引標度。
• 0是默認值（初始值），1是：懸停，2是：活動/.active，3是：焦點。
• 這種方法符合我們對最高用戶優先級的期望。如果一個元素被聚焦，它就在視圖中，并且在用戶的注意下。活動元素是第二高的，因為它們表示狀態。懸停是第三高的，因為它表示用戶的意圖，但幾乎任何東西都可以懸停

覆蓋組件

Bootstrap包含幾個組件，它們可以作為某種類型的覆蓋。這包括，在最高的z-索引，下拉列表，固定和粘性導航欄，模態，工具提示和彈出窗口。這些組件有自己的z索引標度，從1000開始。這個起始數字是任意選擇的，在我們的樣式和您的項目的自定義樣式之間充當一個小的緩沖區。

每個覆蓋組件都會略微增加其z-index值，以使通用UI原則允許以用戶為中心或懸停的元素始終保持在視圖中。例如，模態是文檔阻塞（例如，除了模態的操作之外，您不能執行任何其他操作），因此我們將其放在導航欄上方。 在我們的z索引布局頁面了解更多信息。

Learn more about this in our z-index layout page.

HTML and CSS勝過 JS

只要有可能，我們都喜歡用JavaScript編寫HTML和CSS。總的來說，HTML和CSS更為豐富，可以讓更多不同經驗層次的人使用。HTML和CSS在瀏覽器中的速度也比JavaScript快，而且瀏覽器通常為您提供大量的功能。.

這個原則是我們使用數據屬性的一流JavaScript API。使用我們的JavaScript插件幾乎不需要編寫任何JavaScript；相反，編寫HTML。在我們的JavaScript概述頁面中閱讀更多關于這方面的內容。

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

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

實用通用類

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

特別是對于自定義CSS，實用程序可以通過將最常見的重復屬性值對減少到單個類中來幫助解決文件大小增加的問題。在你的項目中，這會產生巨大的規模效應。

靈活的HTML

雖然并非總是可能的，但我們努力避免在組件的HTML需求中過于教條。因此，我們關注CSS選擇器中的單個類，并嘗試避免直接的子類選擇器（>）。這使您的實現更加靈活，并有助于保持我們的CSS更簡單，更不具體。

代碼約定

Code Guide 代碼指南（來自Bootstrap的共同創建者，@mdo）記錄了我們如何在Bootstrap中編寫HTML和CSS。它詳細說明了常規格式、常規默認值、屬性和屬性順序等的準則。

我們在Sass/CSS中使用Stylelint來執行這些標準和更多內容。我們的自定義配置是開源的，可供其他人使用和擴展。

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