跳到主要内容 跳到文档导航
在 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。我们对所有常见样式（如 display、padding 和 border-width）使用 .btn。然后，我们使用修饰符（如 .btn-primary）来添加颜色、背景颜色、边框颜色等。

只有当需要跨多个变体更改多个属性或值时，才应使用修饰符类。修饰符并非总是必需的，因此在创建修饰符时，请确保你实际上节省了代码行并防止了不必要的覆盖。修饰符的良好示例是我们的主题颜色类和大小变体。

z 轴比例

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 值，以使常见的 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 的数量。

具体来说，关于自定义 CSS，实用程序可以通过将你最常重复的属性-值对减少为单个类来帮助减少文件大小。这可以在你的项目中产生巨大的规模效应。

灵活的 HTML

虽然并非总是可行，但我们努力避免在组件的 HTML 要求中过于武断。因此，我们在 CSS 选择器中关注单个类，并尝试避免直接子选择器 (>)。这为你提供了更灵活的实现方式，并有助于使我们的 CSS 更加简单且不那么具体。

代码规范

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

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

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