方法

虽然入门页面提供了项目的介绍性游览及其提供的功能，但本文档重点介绍了我们为什么要在 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属性的情况下出现双边框。例如，按钮组、输入组和分页。
• 这些组件共享through的标准z-index比例。03
• 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 更快，并且您的浏览器通常会为您提供大量功能。

data这个原则是我们使用属性的一流 JavaScript API 。您几乎不需要编写任何 JavaScript 即可使用我们的 JavaScript 插件；相反，编写 HTML。在我们的 JavaScript 概述页面中阅读更多相关信息。

最后，我们的样式建立在常见网络元素的基本行为之上。只要有可能，我们更愿意使用浏览器提供的内容。例如，您.btn几乎可以在任何元素上放置一个类，但大多数元素不提供任何语义值或浏览器功能。因此，我们改用<button>s 和<a>s。

更复杂的组件也是如此。虽然我们可以编写自己的表单验证插件来根据输入的状态向父元素添加类，从而允许我们将文本样式设置为红色，但我们更喜欢使用每个浏览器为我们提供的: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，以及检测常见错误。