设计思路

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

这个原则是我们一流的 JavaScript API，使用 data 属性。你几乎不需要编写任何 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，并检测常见错误。