学习方法

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

On this page

虽然入门页面提供了项目的介绍性介绍以及它提供了什么，但本文重点介绍了我们为什么要在Bootstrap中做这些事情。它解释了我们的理念，建立在网络上，让别人可以向我们学习，与我们一起贡献，并帮助我们提高。

看到一些听起来不对的东西，或者也许可以做得更好？打开一个问题，我们想和你讨论一下。 Open an issue

摘要

我们将更深入地探讨其中的每一个问题，但在较高的层次上，以下是指导我们的方法的内容。

  • 组件首先应具有响应性和可移动性
  • 组件应该用基类构建，并通过修饰符类进行扩展
  • 组件状态应该遵循一个通用的z-索引标度
  • 只要有可能，最好使用HTML和CSS实现而不是JavaScript
  • 尽可能使用自定义样式上的实用程序
  • 尽可能避免强制执行严格的HTML要求（子选择器）

响应性

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

通过Bootstrap，您将在我们的媒体查询中最清楚地看到这一点。在大多数情况下，我们使用最小宽度的查询，这些查询开始应用于特定的断点，然后继续执行更高的断点。例如，.d-none 从min-width: 0应用到无穷大。另一方面，.d-md-none 从媒体断点开始应用。

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

类

除了重置跨浏览器标准化样式表之外，我们所有的样式都旨在使用类作为选择器。这意味着要避开类型选择器（例如， input[type="text"]）和无关的父类（例如，.parent .child），因为这些父类使得样式太过具体而不容易重写。

因此，应该使用包含公共属性的基类来构建组件，而不是重写属性值对。例如，.btn和.btn primary。我们将.btn用于所有常见样式，如显示、填充和边框宽度。然后我们使用.btn-primary这样的修饰符来添加颜色、背景色、边框色等。

只有在多个变量之间有多个属性或值需要更改时，才应该使用修饰符类。修饰符并不总是必要的，所以在创建它们时，一定要保存代码行并防止不必要的重写。我们的主题颜色类和大小变体就是很好的修改器示例。

z-index scales

组件和覆盖组件中的引导元素中有两个z索引量表。z-index

组成元素

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

覆盖组件

Bootstrap包含几个组件，它们可以作为某种类型的覆盖。这包括，在最高的z-索引，下拉列表，固定和粘性导航栏，模态，工具提示和弹出窗口。这些组件有自己的z索引标度，从1000开始。这个起始数字是任意选择的，在我们的样式和您的项目的自定义样式之间充当一个小的缓冲区。

每个覆盖组件都会略微增加其z-index值，以使通用UI原则允许以用户为中心或悬停的元素始终保持在视图中。例如，模态是文档阻塞（例如，除了模态的操作之外，您不能执行任何其他操作），因此我们将其放在导航栏上方。 在我们的z索引布局页面了解更多信息。

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

HTML and CSS胜过 JS

只要有可能，我们都喜欢用JavaScript编写HTML和CSS。总的来说，HTML和CSS更为丰富，可以让更多不同经验层次的人使用。HTML和CSS在浏览器中的速度也比JavaScript快，而且浏览器通常为您提供大量的功能。.

这个原则是我们使用数据属性的一流JavaScript API。使用我们的JavaScript插件几乎不需要编写任何JavaScript；相反，编写HTML。在我们的JavaScript概述页面中阅读更多关于这方面的内容。

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

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

实用通用类

在bootstrap3中，实用程序类以前是助手，在对付CSS膨胀和页面性能差方面是一个强大的盟友。实用程序类通常是表示为类的单个、不可变的属性值对（例如，d-block表示display:block；）。它们的主要吸引力是在编写HTML时的使用速度和限制必须编写的自定义CSS的数量。

特别是对于自定义CSS，实用程序可以通过将最常见的重复属性值对减少到单个类中来帮助解决文件大小增加的问题。在你的项目中，这会产生巨大的规模效应。

灵活的HTML

虽然并非总是可能的，但我们努力避免在组件的HTML需求中过于教条。因此，我们关注CSS选择器中的单个类，并尝试避免直接的子类选择器（>）。这使您的实现更加灵活，并有助于保持我们的CSS更简单，更不具体。

代码约定

Code Guide 代码指南（来自Bootstrap的共同创建者，@mdo）记录了我们如何在Bootstrap中编写HTML和CSS。它详细说明了常规格式、常规默认值、属性和属性顺序等的准则。

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

我们使用vnu-jar来执行标准和语义HTML，以及检测常见错误。

返回顶部