Bootstrap/docs/4.5/extend/approach

在GitHub上查看

进路

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

虽然入门页面提供了该项目及其提供的介绍性导览,但本文档着重于 why 我们做我们在Bootstrap中所做的事情。 它解释了我们在网络上建立哲学,以便其他人可以向我们学习,为我们做出贡献并帮助我们改进。

看到听起来不对劲的东西,或者可以做得更好？ 打开一个问题 -我们很乐意与您讨论。

摘要

我们将在整个过程中深入探讨每一个方面,但是从高层次上讲,这是我们方法的指导。

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

反应灵敏

Bootstrap的响应式样式被构建为响应式的,这种方法通常称为 移动优先 。我们在文档中使用了这个术语,并且在很大程度上表示同意,但有时它可能太宽泛。 虽然不是每个组成部分 must 在Bootstrap中完全响应,这种响应方法是通过在视口变大时推动您添加样式来减少CSS覆盖。

在整个Bootstrap中,您会在我们的媒体查询中最清楚地看到这一点。 在大多数情况下,我们使用 min-width 开始在特定断点处应用并在更高的断点处保留的查询。 例如,一个 .d-none 适用于 min-width: 0 到无穷远。 另一方面, .d-md-none 从中等断点开始应用。

有时我们会使用 max-width 当组件固有的复杂性需要它时。 有时,与从我们的组件重写核心功能相比,实现和支持这些替代功能在功能和思想上更加清晰。 我们努力限制这种方法,但是会不时使用它。

类

除了我们的跨浏览器标准化样式表Reboot以外,我们所有的样式都旨在将类用作选择器。 这意味着不要选择类型选择器（例如, input[type="text"] ）和无关的父类（例如, .parent .child ）,使样式过于具体而无法轻松覆盖。

因此,应使用包含通用的,不可覆盖的属性-值对的基类构建组件。 例如, .btn and .btn-primary 。我们用 .btn 适用于所有常见样式 display,padding ,和 border-width 。然后,我们使用诸如 .btn-primary 添加颜色,背景色,边框色等。

只有在多个变体之间有多个属性或值需要更改的情况下,才应使用修饰符类。 修饰符并非总是必需的,因此请确保您实际上在保存代码行并在创建它们时防止不必要的覆盖。 修饰符的好例子是我们的主题颜色类别和大小变体。

Z索引比例

那里有两个 z-index 可在Bootstrap中缩放-组件内的元素和覆盖组件。

组成要素

• Bootstrap中的某些组件是通过重叠元素构建的,以防止出现双重边框而无需修改 border 属性。 例如,按钮组,输入组和分页。
• 这些组件共享一个标准 z-index 规模 0 通过 3.
• 0 是默认值（初始）, 1 is :hover,2 is :active/.active ,和 3 is :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。 阅读更多关于此 我们的JavaScript概述页面 .

最后,我们的样式基于常见Web元素的基本行为。 只要有可能,我们更喜欢使用浏览器提供的内容。 例如,您可以将 .btn 类几乎可以在任何元素上使用,但大多数元素不提供任何语义值或浏览器功能。 因此,我们使用 <button> 和 <a> s.

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

实用工具

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

特别是关于自定义CSS,实用程序可以通过将最常重复的属性值对减少为单个类来帮助防止文件增大。 这可以在您的项目中产生巨大的影响。

灵活的HTML

尽管并非总是可能,但我们努力避免在组件的HTML要求中过于信条。 因此,我们专注于CSS选择器中的单个类,并尝试避免使用直接子选择器（ > ). 这为您的实现提供了更大的灵活性,并有助于使我们的CSS更简单,更具体。