方法论

了解用于构建和维护Bootstrap的指导原则、策略和技术，从而更轻松地自定义和扩展它。

伟大导师指导我们，方法论决定出路和思路，原文此节为“Approach”，一般翻译为：方法、途径，我们将其命名为“方法论”-译者注。

概要

我们将更深入地介绍这些，但是在高层次上，这是指导我们的方法。
  • 组件应该是响应式和移动式的
  • 组件应该使用基类来构建，并通过修饰符类进行扩展
  • 组件状态应该遵循一个共同的z-索引尺度
  • 只要有可能，就比较喜欢HTML和CSS的JavaScript实现
  • 只要有可能，使用实用程序超过自定义样式
  • 尽可能避免强制执行严格的HTML要求（儿童选择器）

响应

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

跨越Bootstrap，您会在我们的媒体查询中看到最清楚的内容。在大多数情况下，我们使用min-width开始在特定断点处应用的查询，并通过更高的断点进行查询。例如，.d-none 适用于 min-width: 0另一方面， .d-md-none从中断点开始适用。

有时我们会 max-width 在组件的内在复杂性需要时使用它。有时候，这些重写在功能上和精神上都比重写组件的核心功能来实现和支持。我们力求限制这种方法，但会不时使用它。

类

除了我们的Reboot，一个跨浏览器的规范化样式表，我们所有的样式都是用类作为选择器。这意味着清除类型选择器 (例如, input[type="text"]) 和无关的父类 (例如, .parent .child) 使样式太具体，不容易覆盖。

因此，组件应该建立一个基类，其中包含共同的，不会被重写的属性值对。例如，.btn 和 .btn-primary. 我们使用 .btn 了所有常见的样式，比如 display, padding, 和 border-width. 然后我们使用修饰符.btn-primary 来添加颜色，背景颜色，边框颜色等。

只有当多个属性或值可以在多个变体中进行更改时才应使用修饰符类。修饰符并不总是必要的，所以确保你实际上保存了代码行，并且在创建它们时避免不必要的覆盖。修饰符的好例子是我们的主题颜色类和尺寸变体。

z-索引尺度

z-index 引导组件中的引导程序元素和叠加组件中有两个标度。

组件元素

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

覆盖组件

Bootstrap包含几个用作某种叠加层的组件。这包括按照最高顺序 z-index，下拉菜单，固定和粘滞的导航栏，模式，工具提示和弹出窗口。这些组件有自己的 z-index 规模，开始于 1000,这个起始号码是随机的，并作为我们的样式和您的项目的自定义样式之间的一个小缓冲区。

每个叠加组件都会 z-index 以这种方式稍微提高其价值，即通用的UI原则允许用户聚焦或悬停的元素始终保持在视图中。例如，一个模态是文档阻塞（例如，除了模态的动作，你不能采取任何其他的行动），所以我们把它放在我们的导航栏上面。

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

JS上的HTML和CSS

只要有可能，我们更喜欢通过JavaScript编写HTML和CSS。一般来说，HTML和CSS更为丰富，可供更多不同经验水平的人使用。HTML和CSS在浏览器中的速度也比JavaScript快，而且您的浏览器将为您提供大量的功能。

这个原则是我们的一流JavaScript API的 data 属性。 您不需要编写几乎任何JavaScript来使用我们的JavaScript插件; 相反，写HTML。在我们的 dataJavaScript概述页面中了解更多。

最后，我们的风格建立在常见网页元素的基本行为上。只要有可能，我们宁愿使用浏览器提供的内容。例如，你..btn几乎可以在任何元素上放置一个类，但大多数元素不提供任何语义值或浏览器功能。所以相反，我们使用 <button>s和 <a>s.

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

公用事业

实用程序类（以前是Bootstrap 3的助手）是在处理CSS膨胀和糟糕的页面性能方面的强大盟友。一个工具类通常是一个单一的，不可变的属性 - 值对，表示为一个类（例如, .d-block 表示 display: block;)。他们主要的吸引力是编写HTML时的使用速度，并限制了您必须编写的自定义CSS的数量。

特别是关于自定义CSS，实用程序可以通过将最常见的重复属性值对减少为单个类来帮助应对不断增加的文件大小。这可以在您的项目中产生戏剧性的效果。

灵活的HTML

尽管并非总是可行，但我们力求避免在HTML组件的HTML要求中过于教条化。因此，我们将重点放在CSS选择器中的单个类，并尽量避免直接选择子选择器（~）。这使您在实现时有更大的灵活性，并有助于保持我们的CSS更简单，更具体。