学习方法（Approach）

虽然入门页面提供了关于项目及其所提供功能的介绍，但本文档的重点是我们为什么要在 Bootstrap 中做我们所做的事情。它解释了我们在网络上构建的理念，以便其他人可以向我们学习，与我们一起贡献，并帮助我们改进。

发现了什么不妥之处，或者可以做得更好？打开一个问题–我们很乐意与您讨论。

概要

我们将深入探讨其中的每一个问题，但总的来说，我们的方法是这样的。

• 组件应具有响应性和移动优先性
• 组件应使用基类构建，并通过修改器类进行扩展
• 组件状态应遵循通用的 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 属性。例如，按钮组、输入组和分页。
• 这些组件共享一个从 0 到 3 的标准 z-index 比例。
• 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，并检测常见错误。