Approach

虽然入门页面提供了对该项目及其提供内容的介绍，但本文档侧重于_why_我们在Bootstrap中做的事情。 它解释了我们在网络上建设的理念，让其他人可以向我们学习，与我们一起贡献，并帮助我们改进。

如果你看到了一些不对劲的事情，或者可能可以做得更好？打开一个问题–我们很乐意与你讨论。

总结

我们需要在整个开发过程中深入研究其中的每一个，但在较高层面上，以下是指导我们方法的内容。

• 组件应首先具有响应性和可移动性
• 组件应该使用基类构建，并通过修饰符类进行扩展
• 组件状态应遵循通用的z索引范围
• 只要可能，比起JavaScript，更优先HTML和CSS实现
• 尽可能使用实用工具集而不是自定义样式
• 尽可能避免强制执行严格的HTML要求（子选择器）

响应式

Bootstrap的响应风格是为响应而构建的，这种方法通常被称为_mobile-first_。 我们在文档中使用了这个术语，并在很大程度上同意它，但有时它可能过于宽泛。 虽然不是每个组件都必须在Bootstrap中完全响应，但这种响应方法是通过在视口变大时推动你添加样式来减少CSS覆盖。

通过Bootstrap，你将在我们的媒体查询中最清楚地看到这一点。 在大多数情况下，我们使用min-width查询，这些查询从特定断点开始应用，并一直延续到更高的断点。 例如，.d-none适用于从min-width: 0到无穷大的范围。 另一方面，.d-md-none应用于medium breakpoint向上。

有时，当组件的固有复杂性需要时，我们会使用max-width。 有时，与从组件重写核心功能相比，这些重写在功能和思想上更易于实现和支持。 我们努力限制这种做法，但会不时使用。

样式类

除了我们的Reboot，一个跨浏览器的规范化样式表，我们所有的样式都旨在使用类作为选择器。 这意味着要避开类型选择器(例如，input[type=text])和无关的父类(例如，’.parent.child`)，因为它们使样式过于特定，无法轻易覆盖。

因此，组件应该使用包含公共属性值对的基类来构建，而不是被重写的属性值对。 例如，.btn和.btn primary。 我们将.btn用于所有常见的样式，如display、padding和borderwidth。 然后，我们使用诸如.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值，以使通用UI原则允许用户关注或悬停的元素始终保持在视图中。 例如，模态是文档阻塞(例如，除了模态的操作之外，你不能采取任何其他操作)，所以我们将其放在导航栏上方。

在我们的z-index布局页面 中了解更多信息。

JS之上的HTML和CSS

只要可能，我们更喜欢编写HTML和CSS而不是JavaScript。 总的来说，HTML和CSS更丰富，所有不同经验水平的人都可以访问。 HTML和CSS在浏览器中的速度也比JavaScript快，而且浏览器通常为你提供大量功能。

有一个原则是我们使用优先通过data属性使用JavaScript API。 你几乎不需要编写任何JavaScript就可以使用我们的JavaScript插件；仅需要编写HTML。 在[我们的JavaScript概述页面]中了解更多信息(/docs/5.3/getting-started/javascript/#data-attributes)。

最后，我们的风格建立在常见web元素的基本行为之上。 只要可能，我们更喜欢使用浏览器提供的内容。 例如，你可以将.btn类放在几乎任何元素上，但大多数元素都不提供任何语义值或浏览器功能。 因此，我们使用<button>和<a>。

更复杂的组件也是如此。 虽然我们可以编写自己的表单验证插件，根据输入的状态向父元素添加类，从而允许我们将文本设置为红色，但我们更喜欢使用每个浏览器提供的“:valid”/“:invalid”伪元素。

工具集

工具集类——以前是Bootstrap 3中的helpers ——是对抗CSS膨胀和页面性能不佳的强大盟友。 工具集类通常是一个单一的、不可变的属性值对，表示为一个类(例如，.d-block表示display:block；)。 它们的主要吸引力在于编写HTML时的使用速度，以及限制你必须编写的自定义CSS的数量。

特别是关于自定义CSS，实用程序可以通过将最常见的重复属性值对减少为单个类来帮助解决文件大小增加的问题。这可能会在你的项目中产生巨大的规模效应。

灵活的HTML

虽然并不总是可能的，但我们努力避免在HTML组件需求中过于教条。 因此，我们在CSS选择器中关注单个类，并尽量避免直接子类选择器（>）。 这为你的实现提供了更大的灵活性，并有助于保持我们的CSS更简单、更不具体。

代码约定

代码指南(来自Bootstrap的联合创建者@mdo)记录了我们如何在Bootstrap中编写HTML和CSS。 它指定了通用格式、常识默认值、属性和属性顺序等的指导原则。

我们使用Stylelint在我们的Sass/CSS中执行这些标准以及更多标准。 我们的自定义样式表配置是开源的，可供其他人使用和扩展。

我们使用vnu jar以强制执行标准和语义HTML，以及检测常见错误。