方法论

了解构建和维护 Bootstrap 的指导原则、策略和技术，以便于能够轻松地定制和扩展 Bootstrap。

虽然入门章节提对本项目以及项目所包含的内容进行了简要介绍，但本章节聚焦于我们 为什么 要在 Bootstrap 上选择这样做。它解释了我们的 web 开发哲学，以便让其他人可以了解我们、向我们提供帮助、以及帮助我们改进。

如果你觉得某些东西听起来不对劲，或者你能做得更好，请 开一个 issue，我们很乐意与您一起讨论。

摘要

我们将深入探讨以下内容，但是站在一个更高的角度来讲，以下是我们的方法论的指导方针。

• 组件应当支持响应式布局和移动设备优先
• 组件应当使用基准类（base class）构建，并通过修饰符类（modifier class）进行扩展
• 组件的状态应当遵循常规的 z-index 使用逻辑
• 尽可能使用 HTML 和 CSS 来实现功能，而不是 JavaScript
• 尽可能使用工具类来修改样式，而不是自定义样式
• 尽可能避免对 HTML 结构的强依赖（例如，子选择器）

响应式布局

Bootstrap 的 CSS 样式是基于响应式布局而构建的，这一方式通常被称为 移动设备优先（mobile-first）。我们在文档中使用这一术语并在很大程度上是认可的，但是这一术语有时可能表达的太宽泛。虽然并非所有的 Bootstrap 组件都 必须 完全支持响应式布局，但这种支持响应式布局的方式意在减少 CSS 样式的覆盖，因为只有在视口（viewport）变大时你才需要添加额外的样式。

在整个 Bootstrap 中，你将在媒体查询中清晰地看到这一思路。在大多数情况下，我们使用 min-width 查询，这些查询开始于某个断点处，并向上延伸到更大尺寸的断点处。例如， .d-none 覆盖 min-width: 0 到无穷大。 而 .d-md-none 覆盖中等断点到无穷大。

有时，受制于组件的固有复杂性，我们也会使用 max-width 查询。这种时候，与重写组件的核心功能相比，这种实现方式在功能和思路上更加清晰。我们努力限制这种用法，但有时仍然会用。

类（Class）

除了 Reboot（一个弥补浏览器差异的统一样式表），我们所有的样式都旨在使用类（class）作为 CSS 选择器。也就说避免使用类型选择器（例如 input[type="text"]）和不相关的父类（parent class）选择器（例如 .parent .child），这些选择器会使样式过于依赖 HTML 结构，以至于难于对样式进行覆盖。

鉴于此，应当使用基准类（base class）来构建组件，这些基准类应当包含最基本的、不会被覆盖的样式。例如，.btn 和 .btn-primary。我们让 .btn 包含最基本的样式，例如 display、padding 和 border-width。然后，我们使用诸如 .btn-primary 之类的修饰符类（modifier class）来添加颜色（color）、背景色（background-color）、边框颜色（border-color）等。

只有在多个变体之间有多个样式需要更改的情况下，才应当使用修饰符类（modifier class）。修饰符类并非总是必需的，因此请确保只有在能够实际减少代码数量并防止不必要的样式覆盖的情况下才去创建新的修饰符类。theme color classes 和 size variants 是对于修饰符类最好的示例。

z-index 体系

Bootstrap 中有两个 z-index 体系，即组件元素体系和遮罩层组件体系。

组件元素（Component elements）体系

• Bootstrap 中的某些组件是使用重叠元素构建的，以便在不修改 border 属性的情况下能够防止出现双重边框。例如，按钮组（button group）、输入框组（input group）和分页（pagination）组件。
• 这些组件共享同一个 z-index 体系，该体系由从 0 到 3 的值构成。
• 0 是默认值（或初始值），1 是赋予 :hover，2 是赋予 :active/.active，3 是赋予 :focus。
• 这种方法符合我们对用户优先级最高的设定。如果一个元素具有焦点（focused），则说明该元素在用户的视线范围内并获得了用户的关注。处于 :active 状态的元素处于第二层级，因为该元素用于标示状态。处于 :hover 状态的元素处于第三层级，因为该元素表明了用户的意图，但是，几乎 任何 元素都可以处于 :hover 状态。

遮罩层组件（Overlay components）体系

Bootstrap 内置了几个可用作遮罩层（overlay）的组件。按照 z-index 值由高到低排列，这包括下拉菜单（dropdown）、固定和黏着导航条（fixed and sticky navbar）、模态框（modal）、工具提示（tooltip）和弹出框（popover）。这些组件都分别有自己的 z-index 体系，且 z-index 值从 1000 开始。该起始值是任意选择的，并且在 Bootstrap 内置样式和用户自定义样式之间预留了部分空间。

每个遮罩层组件对 z-index 值的增长均采用相同的方式，即，遵循常规的 UI 原理，始终保持获得用户焦点（focused）或处于 :hover 状态的元素处于用户的视线内。例如，模态框（modal）是阻挡在整个页面之前的（即，除了模态框外，你不能采取任何其它动作），因此要放在导航条（navbar）上层。

请在 z-index 布局 章节了解此内容的更多信息。

HTML 和 CSS 优于 JS

我们尽可能使用 HTML 和 CSS，而不是 JavaScript.。通常，HTML 和 CSS 更加丰富，并且适合更多具有不同经验水平的人使用。HTML 和 CSS 在浏览器中的执行速度也比 JavaScript 快，并且浏览器通常为你提供了大量功能。

利用 data 属性实现的 JavaScript API 就体现了这一原则。你只需要编写 HTML 即可，几乎不需要编写任何 JavaScript 代码就可以使用我们的 JavaScript 插件。请在 我们的 JavaScript 概述文档 中了解有关此内容的更多信息。

最后，Bootstrap 的样式是基于普通 web 元素的基本行为构建的。只要有可能，我们首选浏览器提供的功能。例如，你可以为几乎任何元素添加 .btn 类，但是大多数元素并不具有任何相应的语义和功能。因此，选择使用 <button> 和 <a> 标签更合适。

对于更复杂的组件也是如此。虽然我们 可以 编写自己的表单验证插件并根据输入状态为父元素添加相应的类（class），例如将文本设置为红色，但是我们更喜欢使用每个浏览器都提供的 :valid/:invalid 伪元素（pseudo-element）。

工具类（Utility classes）

工具类（Utility classes），以前在 Bootstrap 3 中别成为助手类（helper class），在抵抗 CSS 膨胀和页面低性能方面是一种很强大的工具。工具类通常是将单个不变的 CSS 属性包装成一个类（class）（例如，.d-block 代表的是 display: block;）。工具类的主要吸引力在于能够快速添加到编写的 HTML 中，并且减少自定义 CSS 的编码量。

尤其是对于自定义 CSS，工具类可以通过蒋常用的、重复的的 CSS 属性缩减为一个类（class），从而防止文件膨胀。这将为你的项目带来巨大的影响。

灵活的 HTML 结构

虽然并非总能如愿，但我们尽力避免组件对 HTML 结构的强依赖。因此，我们尽量将单个类（class）作为 CSS 选择器使用，并尝试避免使用直接子元素选择器（>）。这为你的具体实现提供了更大的灵活性，并有助于保持 CSS 的简单和对 HTML 结构的依赖。

编码约定

编码指南 （由 Bootstrap 的联合创始人 @mdo 编写）对我们在整个 Bootstrap 项目中如何编写 HTML 和 CSS 进行了说明。该指南详细介绍了常用代码格式、常识优先、属性的顺序等准则。

我们使用 Stylelint 对我们的 Sass/CSS 代码强制执行这些（甚至更多）标准。我们定制的 Stylelint 配置文件 是开源的，任何人都可以使用并扩充。

我们使用 vnu-jar 实施标准和语义化 HTML 的检测，以及检测常见错误。