了解用于构建和维护 Bootstrap 的指导原则、策略和技术，以便您可以更轻松地自行自定义和扩展它。
虽然入门页面提供了项目及其提供的功能的介绍性导览，但本文档重点介绍了我们为什么要在 Bootstrap 中做这些事情。它解释了我们在 Web 上构建的理念，以便其他人可以向我们学习、与我们一起做出贡献并帮助我们改进。
看到一些听起来不对劲的地方，或者可以做得更好？打开一个问题——我们很乐意与您讨论。
总结
我们将在整个过程中更深入地探讨其中的每一个，但在高层次上，以下是指导我们方法的因素。
- 组件应具有响应性和移动优先性
- 组件应该使用基类构建并通过修饰符类进行扩展
- 组件状态应遵循通用的 z 索引刻度
- 尽可能选择 HTML 和 CSS 实现而不是 JavaScript
- 尽可能使用实用程序而不是自定义样式
- 尽可能避免强制执行严格的 HTML 要求（子选择器）
响应
Bootstrap 的响应式样式是为响应式而构建的，这种方法通常被称为移动优先。我们在文档中使用了这个术语，并且在很大程度上同意它，但有时它可能过于宽泛。虽然并非每个组件在 Bootstrap 中都必须完全响应，但这种响应式方法是通过在视口变大时推动您添加样式来减少 CSS 覆盖。
在 Bootstrap 中，您将在我们的媒体查询中最清楚地看到这一点。在大多数情况下，我们使用的查询从特定断点开始应用，并一直延伸到更高的断点。例如，a 从 到 infinity 应用。另一方面，a 从中断点及以上应用。min-width.d-nonemin-width: 0.d-md-none
有时，当组件的固有复杂性需要时，我们会使用它。有时，与从我们的组件重写核心功能相比，这些覆盖在功能和精神上更易于实现和支持。我们努力限制这种方法，但会不时使用它。max-width
类
除了我们的 Reboot（跨浏览器规范化样式表）之外，我们所有的样式都旨在使用类作为选择器。这意味着要避开类型选择器（例如 ）和无关的父类（例如 ），它们使样式过于具体而无法轻松覆盖。input[type="text"].parent .child
因此，组件应该使用一个基类来构建，该基类包含公共的、不会被覆盖的属性值对。例如，和 。我们用于所有常见样式，如 、 和 。然后，我们使用修饰符，例如添加 color、background-color、border-color 等。.btn.btn-primary.btndisplaypaddingborder-width.btn-primary
只有当有多个属性或值需要跨多个变体更改时，才应使用修饰符类。修饰符并不总是必要的，因此请确保在创建它们时实际保存代码行并防止不必要的覆盖。修饰符的好例子是我们的主题颜色类和大小变体。
Z 指数尺度
Bootstrap 中有两个比例 – 元件中的元素和叠加元件。z-index
组件元素
- Bootstrap 中的某些组件是使用重叠元素构建的，以防止双边框而不修改属性。例如，按钮组、输入组和分页。
border - 这些组件共享 through 的标准比例。
z-index03 0是默认值（初始），是 ，是 /，是 。1:hover2:active.active3:focus- 这种方法符合我们对最高用户优先级的期望。如果某个元素是焦点，则它位于视图中并引起用户的注意。活动元素排名第二，因为它们表示状态。悬停是第三高的，因为它表明用户意图，但几乎任何内容都可以悬停。
叠加组件
Bootstrap 包括几个组件，它们充当某种覆盖层。这包括按最高顺序排列的下拉列表、固定和粘性导航栏、模式、工具提示和弹出框。这些组件有自己的刻度，以 开头。这个起始编号是任意选择的，用作我们的样式和您项目的自定义样式之间的小缓冲区。z-indexz-index1000
每个叠加组件都会略微增加其值，以便通用 UI 原则允许用户聚焦或悬停的元素始终保持在视图中。例如，模态是文档阻塞（例如，除了模态的作之外，您不能执行任何其他作），因此我们将其放在导航栏上方。z-index
在我们的 z-index 布局页面中了解更多信息。
HTML 和 CSS over JS
只要有可能，我们更喜欢编写 HTML 和 CSS 而不是 JavaScript。一般来说，HTML 和 CSS 更丰富，可供更多不同经验水平的人使用。HTML 和 CSS 在您的浏览器中也比 JavaScript 更快，而且您的浏览器通常为您提供大量功能。
这个原则是我们使用属性的首流 JavaScript API。您几乎不需要编写任何 JavaScript 即可使用我们的 JavaScript 插件;相反，编写 HTML。在我们的 JavaScript 概述页面中阅读更多相关信息。data
最后，我们的样式建立在常见 Web 元素的基本行为之上。只要有可能，我们更喜欢使用浏览器提供的内容。例如，您几乎可以在任何元素上放置一个类，但大多数元素不提供任何语义值或浏览器功能。因此，我们使用 s 和 s。.btn<button><a>
对于更复杂的组件也是如此。虽然我们可以编写自己的表单验证插件，根据输入的状态向父元素添加类，从而允许我们将文本样式设置为红色，但我们更喜欢使用每个浏览器提供的 / 伪元素。:valid:invalid
公用事业
实用程序类（以前是 Bootstrap 3 中的帮助程序）是对抗 CSS 膨胀和页面性能不佳的强大盟友。实用程序类通常是表示为类（例如，表示）的单个、不可变的属性值配对。它们的主要吸引力是编写 HTML 时的使用速度，并限制您必须编写的自定义 CSS 的数量。.d-blockdisplay: block;
特别是关于自定义 CSS，实用程序可以通过将最常重复的属性值对减少为单个类来帮助应对文件大小的增加。这可以在您的项目中产生大规模的巨大影响。
灵活的 HTML
虽然并不总是可行的，但我们努力避免在对组件的 HTML 要求中过于教条化。因此，我们专注于 CSS 选择器中的单个类，并尽量避免直接子选择器 （）。这为你的实施提供了更大的灵活性，并有助于使我们的 CSS 更简单、更不具体。>
代码约定
代码指南（来自 Bootstrap 共同创建者，@mdo）记录了我们如何在 Bootstrap 上编写 HTML 和 CSS。它指定了常规格式、常识性默认值、属性和属性顺序等的准则。
我们使用 Stylelint 在我们的 Sass/CSS 中强制执行这些标准以及更多标准。我们的自定义 Stylelint 配置是开源的，可供其他人使用和扩展。
我们使用 vnu-jar 来强制执行标准和语义 HTML，以及检测常见错误。