Bootstrap方法论

通过对Bootstrap的内部工作原理的了解，用户可以更好地利用其灵活性，根据自身需求进行定制，并在项目中实现更加个性化的样式和功能。包括深入了解Bootstrap的设计理念、开发原则和最佳实践，以及掌握使用Bootstrap工具类进行样式定制的技术。

一、摘要

我们将深入探讨以下内容，但是站在一个更高的角度来讲，以下是Bootstrap方法论的指导方针:

1、组件应当支持响应式布局和移动设备优先；

2、组件应当使用基准类（base class）构建，并通过修饰符类（modifier class）进行扩展；

3、组件的状态应当遵循常规的 z-index 使用逻辑；

4、尽可能使用HTML和CSS来实现功能，而不是JavaScript；

5、尽可能使用工具类来修改样式，而不是自定义样式；

6、尽可能避免对HTML结构的强依赖，例如避免使用子选择器。

这些指导方针将有助于确保在定制和扩展Bootstrap时保持一致性和最佳实践。通过遵循这些原则，可以更好地利用Bootstrap的灵活性，并在项目中实现一致、可维护和易于扩展的定制化组件和样式。

二、响应式布局

Bootstrap的CSS样式是基于响应式布局构建的，这种方式通常被称为"移动设备优先"（mobile-first）。尽管并非所有的Bootstrap组件都必须完全支持响应式布局，但这种支持响应式布局的方式旨在减少对CSS样式的覆盖。这意味着只有在视口变大时才需要添加额外的样式。

术语"移动设备优先"在Bootstrap文档中被广泛使用，并且得到了认可。然而，有时候这个术语可能表达得太宽泛。虽然并非所有组件都需要完全适应响应式布局，但通过以移动设备为优先考虑，可以确保在较小的视口上具有良好的用户体验，并在需要时进行逐渐的样式增加。

在整个Bootstrap中，用户可以清晰地看到这种思路在媒体查询中的应用。大多数情况下，我们使用min-width查询，从某个断点开始，并延伸到更大尺寸的断点。例如，.d-none覆盖了min-width: 0到无穷大的范围，而.d-md-none覆盖了中等断点到无穷大的范围。

然而，有时候由于组件本身的复杂性，我们也会使用max-width查询。尽管我们努力限制这种用法，但在某些情况下，与重写组件的核心功能相比，这种实现方式在功能和思路上更加清晰。使用max-width查询可以更好地控制组件在大尺寸断点下的样式表现。

三、类(Class)

在Bootstrap中，我们避免使用类型选择器（例如input[type="text"]）和不相关的父类（parent class）选择器（例如.parent .child），以减少HTML结构对样式表现的依赖性。除了Reboot（一个弥补浏览器差异的统一样式表）之外，所有的样式都是基于class来应用的。

鼓励使用基准类（base class）来构建组件，这些基准类应包含最基本、不会被覆盖的样式。例如，.btn和.btn-primary。.btn包含最基本的样式，如display、padding和border-width。然后，使用修饰符类（modifier class）如.btn-primary来添加颜色（color）、背景颜色（background-color）和边框颜色（border-color）等。

仅当多个变体之间需要更改多个样式时，才应使用修饰符类。修饰符类并非总是必需的，因此请确保只有在能够实际减少代码数量并防止不必要的样式覆盖的情况下才去创建新的修饰符类。theme color classes和size variants是修饰符类最佳的示例。

四、z-index体系

Bootstrap 中有两个 z-index 体系，即：

• 组件元素体系（Component elements）；
• 遮罩层组件体系（Overlay components）。

1、组件元素体系

Bootstrap 中的某些组件是使用重叠元素构建的，以便在不修改 border 属性的情况下能够防止出现双重边框。例如，按钮组（button group）、输入框组（input group）和分页（pagination）组件；

• 这些组件共享同一个 z-index 体系，该体系由从 0 到 3 的值构成；
• 0 是默认值（或初始值），1 是赋予 :hover，2 是赋予 :active/.active，3 是赋予 :focus；
• 这种方法符合我们对用户优先级最高的设定。如果一个元素具有焦点（focused），则说明该元素在用户的视线范围内并获得了用户的关注。处于 :active 状态的元素处于第二层级，因为该元素用于标示状态。处于 :hover 状态的元素处于第三层级，因为该元素表明了用户的意图，但是，几乎 任何 元素都可以处于 :hover 状态。

2、遮罩层组件体系

Bootstrap 内置了几个可用作遮罩层（overlay）的组件。按照 z-index 值由高到低排列，这包括下拉菜单（dropdown）、固定和黏着导航条（fixed and sticky navbar）、模态框（modal）、工具提示（tooltip）和弹出框（popover）。这些组件都分别有自己的 z-index 体系，且 z-index 值从 1000 开始。该起始值是任意选择的，并且在 Bootstrap 内置样式和用户自定义样式之间预留了部分空间。

每个遮罩层组件对 z-index 值的增长均采用相同的方式，即，遵循常规的 UI 原理，始终保持获得用户焦点（focused）或处于 :hover 状态的元素处于用户的视线内。例如，模态框（modal）是阻挡在整个页面之前的（即，除了模态框外，你不能采取任何其它动作），因此要放在导航条（navbar）上层。

五、HTML/CSS优于JS

在Bootstrap中，我们鼓励尽可能使用HTML和CSS，而不是JavaScript。HTML和CSS更加广泛地适用于各种经验水平的人，并且在浏览器中执行速度较快，同时浏览器也提供了许多功能。

Bootstrap通过利用data属性实现JavaScript API来实现这一原则。你只需要编写HTML，几乎不需要编写任何JavaScript代码就可以使用我们的JavaScript插件。通过在HTML标签上添加特定的data属性，Bootstrap能够自动初始化并提供丰富的交互功能，而无需额外的JavaScript代码。

在Bootstrap中，基于普通web元素的基本行为构建样式，优先选择使用浏览器提供的功能，尽可能地利用它们。例如，在按钮方面，我们可以给几乎任何元素添加.btn类来应用按钮的样式，但是我们更倾向于使用<button>和<a>标签作为按钮。这是因为这些标签具有与按钮相关的语义和功能，例如键盘焦点管理、表单提交等。通过使用这些标签，我们可以更好地符合Web标准并提供更好的可访问性和可用性。

对于更复杂的组件，也遵循相同的原则。虽然可以编写自定义的表单验证插件，并根据输入状态手动为父元素添加相应的类（class），例如将文本设置为红色，但我们更喜欢使用每个浏览器都提供的:valid和:invalid伪元素。通过利用这些伪元素，我们可以根据输入的有效性自动应用样式，而无需编写额外的JavaScript代码。

六、工具类

在Bootstrap中，工具类（Utility classes）被用于将单个不变的CSS属性包装成一个类（class），例如.d-block代表的是display:block;。工具类的主要目的是为了加速开发并减少自定义CSS的编写量，从而抵抗CSS膨胀和页面低性能的问题。

特别是对于自定义CSS，使用工具类可以将常用、重复的CSS属性缩减为一个类（class），从而防止文件膨胀。这将为你的项目带来巨大的帮助。通过使用工具类，你可以快速地为元素添加样式，而无需编写冗长的自定义CSS代码。

七、灵活的HTML结构

虽然并非总能如愿，但我们尽力避免组件对 HTML 结构的强依赖。因此，我们尽量将单个类（class）作为 CSS 选择器使用，并尝试避免使用直接子元素选择器（>）。这为你的具体实现提供了更大的灵活性，并有助于保持 CSS 的简单和对 HTML 结构的依赖。

八、编码约定

• 编码指南 （由 Bootstrap 的联合创始人 @mdo 编写）对我们在整个 Bootstrap 项目中如何编写 HTML 和 CSS 进行了说明。该指南详细介绍了常用代码格式、常识优先、属性的顺序等准则。
• 使用 Stylelint 对Bootstrap的 Sass/CSS 代码强制执行这些（甚至更多）标准。Bootstrap 定制的 Stylelint 配置文件 是开源的，任何人都可以使用并扩充。
• 使用 vnu-jar 实施标准和语义化 HTML 的检测，以及检测常见错误。