方法

虽然入门页面介绍了该项目及其提供的功能，但本文档重点介绍了我们为什么在 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.

发现一些听起来不对劲的地方，或者也许可以做得更好？Open an issue—we’d love to discuss it with you.

¥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.

• 组件应该具有响应能力并且移动优先

  ¥Components should be responsive and mobile-first

• 组件应该使用基类构建并通过修饰符类进行扩展

  ¥Components should be built with a base class and extended via modifier classes

• 组件状态应遵循通用的 z-index 比例

  ¥Component states should obey a common z-index scale

• 只要有可能，优先选择 HTML 和 CSS 实现而不是 JavaScript

  ¥Whenever possible, prefer an HTML and CSS implementation over JavaScript

• 尽可能使用工具而不是自定义样式

  ¥Whenever possible, use utilities over custom styles

• 尽可能避免强制执行严格的 HTML 要求（子选择器）

  ¥Whenever possible, avoid enforcing strict HTML requirements (children selectors)

响应式

¥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。我们对 display、padding 和 border-width 等所有常见样式使用 .btn。然后我们使用 .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 属性。例如，按钮组、输入组和分页。

  ¥Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the border property. For example, button groups, input groups, and pagination.

• 这些组件共享 0 到 3 的标准 z-index 比例。

  ¥These components share a standard z-index scale of 0 through 3.

• 0 为默认（初始），1 为 :hover，2 为 :active/.active，3 为 :focus。

  ¥0 is default (initial), 1 is :hover, 2 is :active/.active, and 3 is :focus.

• 这种方法符合我们对最高用户优先级的期望。如果某个元素获得焦点，那么它就在用户的视野中并引起用户的注意。活动元素是第二高的，因为它们指示状态。悬停排名第三，因为它表明了用户意图，但几乎任何东西都可以悬停。

  ¥This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly anything can be hovered.

覆盖组件

¥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 值，从而使常见的 UI 原则允许用户聚焦或悬停的元素始终保持在视图中。例如，模式是文档阻塞的（例如，除了模式的操作之外，你不能采取任何其他操作），因此我们将其放在导航栏上方。

¥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.

这个原则就是我们使用 data 属性的一流 JavaScript API。你几乎不需要编写任何 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。它指定了一般格式、常识默认值、属性和属性顺序等的准则。

¥Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifies guidelines for general formatting, common sense defaults, property and attribute orders, and more.

我们在 Sass/CSS 中使用 Stylelint 来执行这些标准以及更多标准。我们的自定义 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.