Source

方法

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

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

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

概括

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

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

响应式

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

在 Bootstrap 中，您会在我们的媒体查询中最清楚地看到这一点。在大多数情况下，我们使用min-width在特定断点处开始应用并通过更高断点进行的查询。例如，a.d-none适用于从min-width: 0到无穷大。另一方面，a.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属性的情况下出现双边框。例如，按钮组、输入组和分页。
  • 这些组件共享标准z-index比例0through 3。
  • 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 更快，并且您的浏览器一般为您提供了大量的功能。

这个原则是我们一流的 JavaScript API 是data属性。您几乎不需要编写任何 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 更简单、更不具体。