方法

虽然入门页面提供了项目及其提供内容的介绍性导览，但本文档侧重于解释我们在 Bootstrap 中做这些事情的原因。它阐述了我们在构建网页时的理念，以便其他人可以向我们学习、与我们合作并帮助我们改进。

🌐 While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on why we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.

看到有什么不对劲的地方，或者可能有更好的做法吗？打开一个问题—我们很乐意与你讨论。

🌐 See something that doesn’t sound right, or perhaps could be done better? Open an issue—we’d love to discuss it with you.

概括

🌐 Summary

我们将逐一深入探讨这些组件，但概括地说，以下是我们的方法指导。

🌐 We'll dive into each of these more throughout, but at a high level, here’s what guides our approach.

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

响应式

🌐 Responsive

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

🌐 Bootstrap’s responsive styles are built to be responsive, an approach that’s often referred to as mobile-first. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component must be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.

在整个 Bootstrap 中，你会在我们的媒体查询中最清楚地看到这一点。在大多数情况下，我们使用在特定断点开始应用并延续到更高断点的 min-width 查询。例如，.d-none 从 min-width: 0 开始应用一直到无限大。另一方面，.d-md-none 从中等断点开始向上应用。

🌐 Across Bootstrap, you’ll see this most clearly in our media queries. In most cases, we use min-width queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a .d-none applies from min-width: 0 to infinity. On the other hand, a .d-md-none applies from the medium breakpoint and up.

有时，当组件自身的复杂性需要时，我们会使用 max-width。有时，这些覆盖在功能上和思路上比重写我们组件的核心功能更清晰，更易于实现和支持。我们努力限制这种做法，但会不时使用它。

🌐 At times we'll use max-width when a component’s inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.

类

🌐 Classes

除了我们的 Reboot 跨浏览器规范化样式表之外，我们所有的样式都旨在使用类作为选择器。这意味着避免使用类型选择器（例如，input[type="text"]）和多余的父类（例如，.parent .child），因为它们会使样式过于具体而难以覆盖。

🌐 Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., input[type="text"]) and extraneous parent classes (e.g., .parent .child) that make styles too specific to easily override.

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

🌐 As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, .btn and .btn-primary. We use .btn for all the common styles like display, padding, and border-width. We then use modifiers like .btn-primary to add the color, background-color, border-color, etc.

修饰符类应该仅在需要在多个变体中更改多个属性或值时使用。修饰符并不总是必要的，因此在创建它们时，请确保你实际上是在节省代码行数并防止不必要的覆盖。修饰符的好例子是我们的主题颜色类和尺寸变体。

🌐 Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.

z-index 尺度

🌐 z-index scales

在 Bootstrap 中有两个 z-index 级别——组件内的元素和覆盖组件。

🌐 There are two z-index scales in Bootstrap—elements within a component and overlay components.

构成要素

🌐 Component elements

• Bootstrap 中的一些组件是通过重叠元素构建的，以在不修改 border 属性的情况下防止双重边框。例如，按钮组、输入组和分页。
• 这些组件共享一个标准的 z-index 标度，从 0 到 3。
• 0 是默认（初始）的，1 是 :hover，2 是 :active/.active，而 3 是 :focus。
• 这种方法符合我们对最高用户优先级的预期。如果一个元素获得焦点，它在视野中并引起用户的注意。活动元素的优先级是第二高的，因为它们表示状态。悬停优先级第三，因为它表示用户意图，但几乎任何东西都可以被悬停。

覆盖组件

🌐 Overlay components

Bootstrap 包含几个作为某种覆盖层的组件。这些组件包括（按最高 z-index 顺序）下拉菜单、固定和粘性导航栏、模态框、工具提示和弹出框。这些组件有它们自己的 z-index 级别，从 1000 开始。这个起始数是任意选择的，用作我们样式和你的项目自定义样式之间的小缓冲。

🌐 Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.

每个覆盖组件都会略微增加其 z-index 值，以一种常见的用户界面原则允许用户关注或悬停的元素始终保持在视图中。例如，模态框会阻止文档操作（例如，你无法执行除模态框操作之外的任何其他操作），因此我们将其置于导航栏之上。

🌐 Each overlay component increases its z-index value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.

在我们的 z-index 布局页面 中了解更多信息。

🌐 Learn more about this in our z-index layout page.

基于 JS 的 HTML 和 CSS

🌐 HTML and CSS over JS

我们尽可能偏向使用 HTML 和 CSS 而不是 JavaScript。总体而言，HTML 和 CSS 更普及，且不同经验水平的人都能更容易接触到。HTML 和 CSS 在浏览器中的运行速度也比 JavaScript 更快，而且浏览器通常为你提供了大量功能。

🌐 Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

这个原则是我们的一级 JavaScript API，使用 data 属性。使用我们的 JavaScript 插件时，你几乎不需要编写任何 JavaScript；相反，只需编写 HTML。可以在我们的 JavaScript 概览页面阅读更多内容。

🌐 This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

最后，我们的样式建立在常见网页元素的基本行为之上。只要可能，我们更倾向于使用浏览器提供的功能。例如，你可以在几乎任何元素上添加 .btn 类，但大多数元素本身并不提供任何语义价值或浏览器功能。因此，我们改用 <button> 和 <a>。

🌐 Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

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

🌐 The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

实用工具

🌐 Utilities

实用类——以前在 Bootstrap 3 中称为助手——是在应对 CSS 膨胀和页面性能差时的强大助手。实用类通常是以类的形式表示的单一不可变属性-值对（例如，.d-block 代表 display: block;）。它们的主要吸引力是在编写 HTML 时使用快速，同时限制你需要编写的自定义 CSS 数量。

🌐 Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combating CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

具体来说，对于自定义 CSS，工具类可以通过将你最常重复的属性-值对简化为单个类，从而帮助应对文件大小增加的问题。在你的项目中，这在大规模使用时可以产生显著的效果。

🌐 Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

灵活的 HTML

🌐 Flexible HTML

虽然并非总是可能，但我们努力避免在组件的 HTML 要求上过于教条。因此，我们在 CSS 选择器中专注于单一类，并尽量避免直接子选择器（>）。这为你的实现提供了更多灵活性，并有助于保持我们的 CSS 更简单、选择器特异性更低。

🌐 While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

代码约定

🌐 Code conventions

代码指南（来自 Bootstrap 联合创始人 @mdo）记录了我们在整个 Bootstrap 中如何编写 HTML 和 CSS。它规定了一般格式、常识性默认值、属性和特性顺序等方面的指南。

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

🌐 We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

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

🌐 We use vnu-jar to enforce standard and semantic HTML, as well as detecting common errors.