在 GitHub 上查看

方法

了解用于构建和维护 Bootstrap 的指导原则、策略和技术，以便您可以更轻松地自定义和扩展它。

虽然入门页面提供了项目的介绍性导览以及它提供的功能，但本文档重点介绍了我们为什么在 Bootstrap 中执行这些操作。它解释了我们在网络上构建的理念，以便其他人可以向我们学习、与我们合作并帮助我们改进。

看到一些听起来不对劲的内容，或者可能可以做得更好？ 打开一个问题——我们很乐意与您讨论。

摘要

我们将在整个过程中深入探讨其中的每一个，但在高层次上，以下内容指导着我们的方法。

  • 组件应具有响应能力，且应以移动设备优先
  • 组件应使用基本类构建，并通过修饰类进行扩展
  • 组件状态应遵循通用 z 轴比例
  • 尽可能优先使用 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 轴比例

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 布局页面 中了解有关此内容的更多信息。

HTML 和 CSS 优于 JS

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

此原则使用 data 属性作为我们的一流 JavaScript API。您无需编写任何 JavaScript 即可使用我们的 JavaScript 插件；相反，请编写 HTML。在 我们的 JavaScript 概览页面 中阅读更多相关信息。

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

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

实用工具

实用程序类（以前在 Bootstrap 3 中是帮助器）是应对 CSS 膨胀和页面性能不佳的有力帮手。实用程序类通常是一个不可变的属性值配对，表示为一个类（例如，.d-block 表示 display: block;）。它们的主要吸引力在于编写 HTML 时的使用速度以及限制您必须编写的自定义 CSS 的数量。

具体来说，实用程序可以通过将您最常重复的属性值对缩减为单个类，从而帮助减少文件大小。这可以在您的项目中产生显著的影响。

灵活的 HTML

虽然并非总是可行，但我们努力避免对组件的 HTML 要求过于教条。因此，我们在 CSS 选择器中专注于单个类，并尝试避免直接子选择器（>）。这为您在实现中提供了更大的灵活性，并有助于使我们的 CSS 更简单、更不具体。

代码约定

代码指南（来自 Bootstrap 联合创建者 @mdo）记录了我们在 Bootstrap 中编写 HTML 和 CSS 的方式。它指定了有关常规格式、常识默认值、属性和属性顺序等的准则。

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

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