了解用于构建和维护 Bootstrap 的指导原则,策略和技术,以便你可以更轻松地自定义和扩展它。
虽然入门页面介绍了如何扩展 Bootstrap ,但本文档重点介绍了我们为什么要做这些事情。
我们将在整个过程中深入研究这些问题,不过总的来说,扩展开发需要遵循以下规则:
Bootstrap 的响应式样式是为了响应而构建的,这种方法通常被称为移动优先。 我们在文档中使用这个术语并且在很大程度上赞同这种说法,但有时它可能过于宽泛。 虽然并非每个组件都必须在 Bootstrap 中完全响应,但这种响应方法是通过推动你在 viewport 变大时添加样式来减少 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
添加颜色,背景颜色,边框颜色等。
仅当要在多个变体中更改多个属性或值时,才应使用修饰符类。 修饰符并不总是必需的,因此防止不必要的覆盖。 修饰符的好例子是我们的主题颜色类和大小变体。
组件和覆盖组件中的Bootstrap元素中有两个 z-index
尺度。
border
属性。 例如,按钮组,输入组和分页。z-index
尺度 0
到 3
.0
是默认的尺度, 1
是 :hover
时的尺度, 2
是 :active
/.active
时的尺度, 3
是 :focus
时的尺度。Bootstrap 包含几个作为某种覆盖的组件。 这包括,按最高顺序排列 z-index
下拉列表,固定和粘性导航栏,模态,工具提示和弹出窗口。 这些组件都有自己的 z-index
从...开始的规模 1000
. 这个起始编号是随机的,可以作为 bootstrap 的样式和项目的自定义样式之间的小缓冲区。
每个叠加组件都会增加它 z-index
以这样的方式稍微改变价值,即常见的UI原则允许用户聚焦或悬停的元素始终保持在视图中。 例如,模态是文档阻塞(例如,你不能采取任何其他操作保存模式的操作),因此我们将其放在我们的导航栏上方。
在我们的 z-index 布局页面中了解更多相关信息。
只要有可能,我们会让 Javascript 实现的功能通过 HTML 或 CSS 来调用。因为相对于 Javascript,HTML 或 CSS 更加广为人知(很多切图型纯前端可能完全不知道 Javascript 如何使用)。浏览器中的 HTML 和 CSS 的优先级也比 JavaScript 高。
这个原则是基于我们统一的 JavaScript API data
属性。 你几乎不需要编写任何 JavaScript 来使用我们的 JavaScript 插件。
最后,我们的风格建立在常见Web元素的基本行为之上。 只要有可能,我们更愿意使用浏览器提供的内容。 例如,你可以放一个 .btn
几乎任何元素上的类,但大多数元素不提供任何语义值或浏览器功能。 相反,我们使用 <button>
的 <a>
。
对于更复杂的组件也是如此。 虽然我们可以编写自己的表单验证插件,根据输入的状态将类添加到父元素,从而允许我们将文本样式设置为红色。我们更喜欢使用浏览器提供的为元素,比如 :valid
/:invalid
。
工具 - 以前在 Bootstrap 3 中的助手 - 是控制 CSS 复杂化和糟糕页面性能的强大伙伴。 工具通常是表示为类的单个不可变 [属性 - 值](例如,.d-block
represents display: block;
)。 使用工具的好处就在于这些可复用的工具可以提高项目开发的速度,而不是你一个一个地研究如何实现其效果。
特别是自定义CSS,工具可以通过将最常重复的 [属性 - 值] 减少到单个类来帮助对抗增加的文件大小。 这可能会对你的项目产生巨大影响。
虽然并非总是可行,但我们努力避免在组件的HTML要求中过于教条。 因此,我们专注于CSS选择器中的单个类,并尝试避免直接的子选择器。 这为你的实现提供了更大的灵活性,并有助于保持CSS更简单,更不具体。