在GitHub上查看

方法

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

虽然入门页提供了项目的介绍和它所提供的内容，但本文档关注的是为什么我们在Bootstrap中做这些事情。它解释了我们在网络上建立的思想体系，这样其他人就可以向我们学习，与我们一起贡献，并帮助我们提高。

如果你看到一些听起来不太对的东西，或者可以做得更好?请提出你的问题，我们很乐意和你讨论。

总结

我们将更深入地研究每一个问题，甚至在更高的层次上，以下是我们指导的方法。

  • 组件应该是灵敏的和移动优先的
  • 组件应该用基类构建，并通过修饰符类进行扩展
  • 组成状态应该遵循共同的z-index大小
  • 只要有可能，最好使用HTML和CSS实现，而不是JavaScript
  • 只要可能，使用实用工具而不是自定义样式
  • 只要可能，避免强制执行严格的HTML要求(子选择器)

响应式

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

通过引导，您将在我们的媒体查询中最清楚地看到这一点。在大多数情况下，我们使用 min-width 查询，它从特定的断点开始应用，并通过更高的断点进行查询。例如， .d-none 应用范围为 min-width : 0到无穷大。另一方面， .d-md-none 从中间断点开始应用。

有时，当组件的内在复杂性需要时，我们会使用 max-width。有时，这些重写在功能上和思想上比重写组件的核心功能更容易实现和支持。我们努力限制这种方法，但会不时地使用它。

类

除了我们重新启动的跨浏览器规范化样式表之外，我们所有的样式都旨在使用类作为选择器。 这意味着要避开类型选择器(例如，input[type="text"])和外部的父类(例如，.parent .child)，因为它们使样式过于特定而难以覆盖。

因此，组件应该使用一个基类来构建，该基本类包含公共的、未被覆盖的属性-值对。例如 .btn 和 .btn-primary。所有常见的样式， 如 display， padding 和 border-width，我们都使用 .btn。然后我们使用诸如 .btn-primary 之类的修饰符来添加颜色、背景颜色、边框颜色等。

修饰符类只应在多个变量中有多个属性或值需要更改时使用。修饰符并不总是必要的，所以请确保您在创建它们时确实保存了代码行并防止不必要的覆盖。 关于修饰符的典型例子是我们的主题颜色类和大小变体。

z-index 大小

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 布局 页面中了解更多信息。

JS上的HTML和CSS

只要有可能，我们都希望通过JavaScript编写HTML和CSS。 通常，因为这样使得 HTML 和 CSS 更加丰富，并且可供更多具有不同经验水平的人们使用。 HTML 和 CSS 在浏览器中也比JavaScript更快，并且浏览器通常为您提供大量功能。

这个原则是使用数据属性的一流JavaScript API。使用我们的JavaScript插件几乎不需要编写任何JavaScript；而是编写HTML。在我们的概述JavaScript页面中了解更多。

最后，我们的风格建立在常见web元素的基本行为之上。只要有可能，我们更喜欢使用浏览器提供的功能。例如，您可以将 .btn 类放在几乎任何元素上，但大多数元素都不提供任何语义值或浏览器功能。因此，我们推荐使用 <button> 和 <a>。

更复杂的组件也是如此。虽然我们可以编写自己的表单验证插件，根据输入的状态将类添加到父元素中，从而允许我们将文本样式设置为red，但我们更喜欢使用每个浏览器提供的 :valid/:invalid 伪元素。

实用工具

实用工具类(以前是Bootstrap 3中的助手)是应对CSS过量和页面性能低下的强大助手。一个实用工具类通常是一个单一的、不可变的属性-值组合，用一个类表示(例如， .d-block 表示 display: block;)。它们的主要吸引力在于编写HTML时的使用速度，以及限制您必须编写的自定义CSS的数量。

特别是关于自定义CSS，实用工具可以通过将最常见的属性-值对减少为单个类来防止文件大小的增加。 这可以在您的项目中产生巨大的影响。

灵活的HTML

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