Skip to main content Skip to docs navigation

方法(Approach)

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

虽然入门页面提供了项目的介绍性导览及其提供的功能，但本文档侧重于为什么我们在 Bootstrap 中做这些事情。 它解释了我们在网页上构建的理念，以便其他人可以向我们学习，与我们一起贡献，并帮助我们改进。

看到一些不正确的东西，或者可以做得更好？ 打开一个问题——我们很乐意与您讨论。

概括

我们将在整个过程中更深入地研究每一个，但在高层次上，这是我们使用的方法的指导。

  • 组件应该是响应式和移动优先的
  • 组件应该使用基类构建并通过修饰符类进行扩展
  • 组件状态应遵循常见的 z-index
  • 尽可能选择 HTML 和 CSS 实现而不是 JavaScript
  • 尽可能使用实用程序而不是自定义样式
  • 尽可能避免执行严格的 HTML 要求（子选择器）

响应式

Bootstrap 的响应式样式被构建为响应式的，这种方法通常被称为 mobile-first。 我们在我们的文档中使用这个术语并且在很大程度上同意它，但有时它可能过于宽泛。 虽然并非每个组件必须在 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 属性的情况下出现双边框。 例如，按钮组、输入组和分页。
  • 这些组件共享 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>s 和 <a>s。

对于更复杂的组件也是如此。 虽然我们可以编写自己的表单验证插件来根据输入的状态向父元素添加类，从而允许我们将文本设置为红色，但我们更喜欢使用每个浏览器都提供给我们的伪元素 :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语义标准，以及检测常见错误。