雖然入門(mén)頁(yè)面提供了項(xiàng)目的介紹性介紹以及它提供了什么，但本文重點(diǎn)介紹了我們?yōu)槭裁匆贐ootstrap中做這些事情。它解釋了我們的理念，建立在網(wǎng)絡(luò)上，讓別人可以向我們學(xué)習(xí)，與我們一起貢獻(xiàn)，并幫助我們提高。

看到一些聽(tīng)起來(lái)不對(duì)的東西，或者也許可以做得更好？打開(kāi)一個(gè)問(wèn)題，我們想和你討論一下。 Open an issue

摘要

我們將更深入地探討其中的每一個(gè)問(wèn)題，但在較高的層次上，以下是指導(dǎo)我們的方法的內(nèi)容。

• 組件首先應(yīng)具有響應(yīng)性和可移動(dòng)性
• 組件應(yīng)該用基類(lèi)構(gòu)建，并通過(guò)修飾符類(lèi)進(jìn)行擴(kuò)展
• 組件狀態(tài)應(yīng)該遵循一個(gè)通用的z-索引標(biāo)度
• 只要有可能，最好使用HTML和CSS實(shí)現(xiàn)而不是JavaScript
• 盡可能使用自定義樣式上的實(shí)用程序
• 盡可能避免強(qiáng)制執(zhí)行嚴(yán)格的HTML要求（子選擇器）

響應(yīng)性

Bootstrap的responsive樣式是為響應(yīng)而構(gòu)建的，這種方法通常被稱(chēng)為"移動(dòng)優(yōu)先"。我們?cè)谖臋n中使用這個(gè)術(shù)語(yǔ)，基本上同意它，但有時(shí)它可能過(guò)于寬泛。雖然并非每個(gè)組件都必須在引導(dǎo)中完全響應(yīng)，但這種響應(yīng)性方法是通過(guò)在視口變大時(shí)推動(dòng)您添加樣式來(lái)減少CSS覆蓋。

通過(guò)Bootstrap，您將在我們的媒體查詢(xún)中最清楚地看到這一點(diǎn)。在大多數(shù)情況下，我們使用最小寬度的查詢(xún)，這些查詢(xún)開(kāi)始應(yīng)用于特定的斷點(diǎn)，然后繼續(xù)執(zhí)行更高的斷點(diǎn)。例如，.d-none 從min-width: 0應(yīng)用到無(wú)窮大。另一方面，.d-md-none 從媒體斷點(diǎn)開(kāi)始應(yīng)用。

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

類(lèi)

除了重置跨瀏覽器標(biāo)準(zhǔn)化樣式表之外，我們所有的樣式都旨在使用類(lèi)作為選擇器。這意味著要避開(kāi)類(lèi)型選擇器（例如， input[type="text"]）和無(wú)關(guān)的父類(lèi)（例如，.parent .child），因?yàn)檫@些父類(lèi)使得樣式太過(guò)具體而不容易重寫(xiě)。

因此，應(yīng)該使用包含公共屬性的基類(lèi)來(lái)構(gòu)建組件，而不是重寫(xiě)屬性值對(duì)。例如，.btn和.btn primary。我們將.btn用于所有常見(jiàn)樣式，如顯示、填充和邊框?qū)挾取Ｈ缓笪覀兪褂?code>.btn-primary這樣的修飾符來(lái)添加顏色、背景色、邊框色等。

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

z-index scales

組件和覆蓋組件中的引導(dǎo)元素中有兩個(gè)z索引量表。z-index

組成元素

• Bootstrap中的一些組件是用重疊元素構(gòu)建的，以防止在不修改border屬性的情況下出現(xiàn)雙邊框。例如，按鈕組、輸入組和分頁(yè)。
• 這些組件共享0到3的標(biāo)準(zhǔn)z索引標(biāo)度。
• 0是默認(rèn)值（初始值），1是：懸停，2是：活動(dòng)/.active，3是：焦點(diǎn)。
• 這種方法符合我們對(duì)最高用戶(hù)優(yōu)先級(jí)的期望。如果一個(gè)元素被聚焦，它就在視圖中，并且在用戶(hù)的注意下。活動(dòng)元素是第二高的，因?yàn)樗鼈儽硎緺顟B(tài)。懸停是第三高的，因?yàn)樗硎居脩?hù)的意圖，但幾乎任何東西都可以懸停

覆蓋組件

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

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

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

HTML and CSS勝過(guò) JS

只要有可能，我們都喜歡用JavaScript編寫(xiě)HTML和CSS。總的來(lái)說(shuō)，HTML和CSS更為豐富，可以讓更多不同經(jīng)驗(yàn)層次的人使用。HTML和CSS在瀏覽器中的速度也比JavaScript快，而且瀏覽器通常為您提供大量的功能。.

這個(gè)原則是我們使用數(shù)據(jù)屬性的一流JavaScript API。使用我們的JavaScript插件幾乎不需要編寫(xiě)任何JavaScript；相反，編寫(xiě)HTML。在我們的JavaScript概述頁(yè)面中閱讀更多關(guān)于這方面的內(nèi)容。

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

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

實(shí)用通用類(lèi)

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

特別是對(duì)于自定義CSS，實(shí)用程序可以通過(guò)將最常見(jiàn)的重復(fù)屬性值對(duì)減少到單個(gè)類(lèi)中來(lái)幫助解決文件大小增加的問(wèn)題。在你的項(xiàng)目中，這會(huì)產(chǎn)生巨大的規(guī)模效應(yīng)。

靈活的HTML

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

代碼約定

Code Guide 代碼指南（來(lái)自Bootstrap的共同創(chuàng)建者，@mdo）記錄了我們?nèi)绾卧贐ootstrap中編寫(xiě)HTML和CSS。它詳細(xì)說(shuō)明了常規(guī)格式、常規(guī)默認(rèn)值、屬性和屬性順序等的準(zhǔn)則。

我們?cè)赟ass/CSS中使用Stylelint來(lái)執(zhí)行這些標(biāo)準(zhǔn)和更多內(nèi)容。我們的自定義配置是開(kāi)源的，可供其他人使用和擴(kuò)展。

我們使用vnu-jar來(lái)執(zhí)行標(biāo)準(zhǔn)和語(yǔ)義HTML，以及檢測(cè)常見(jiàn)錯(cuò)誤。