Bootstrap方法论(Approach)

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

尽管入门页面提供了该项目及其提供的内容的介绍性浏览,但本文档重点介绍了为什么我们在Bootstrap中执行操作。 它解释了我们在网络上构建的理念,以便其他人可以向我们学习,为我们做出贡献并帮助我们改进。

看到听起来不对劲的东西,或者可以做得更好? Open an issue-我们很乐意与您讨论。

摘要

我们将在整个过程中更深入地探讨其中的每一个,但是从更高的角度讲,这是指导我们方法的内容。

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

响应式

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

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

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

类(Classes)

除了我们的跨浏览器标准化样式表Reboot之外,我们所有的样式都旨在将类用作选择器。 这意味着避免使用类型选择器(例如,“ input [type =“ text”]”)和无关的父类(例如,.parent .child`),这些选择器会使样式过于具体,以至于无法轻易覆盖。

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

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

z-index精度(scales)

Bootstrap中有两个“ z-index”精度(scales)-组件内的元素和覆盖组件。

组件元素

  • Bootstrap中的某些组件是使用重叠元素构建的,以防止出现双重边框而无需修改border属性。 例如,按钮组,输入组和分页。
  • 这些组件共享从0到3的标准z-index标度。
  • 默认为(0)(初始值),“ 1”为“:hover”,“ 2”为“:active” /.active,而“ 3”为“:focus”。
  • 这种方法符合我们对最高用户优先级的期望。 如果一个元素被聚焦,它就在用户的视线范围内。 有源元素是第二高的,因为它们指示状态。 悬停位居第三,因为它表明了用户的意图,但是几乎所有内容都可以悬停。

叠加组件

Bootstrap包含几个用作某种覆盖的组件。 这包括按最高z-index顺序排列的下拉菜单,固定和粘性导航栏,模式,工具提示和弹出窗口。 这些组件都有自己的“ z-index”标度,从“ 1000”开始。 该起始编号是任意选择的,可以用作我们的样式和项目的自定义样式之间的一个小缓冲区。

每个叠加层组件均以某种方式增加其“ z-index”值,以使通用的UI原理允许始终以用户为中心或悬停的元素始终在视图中。 例如,模态是文档阻止(例如,除了模态的动作,您不能采取任何其他动作),因此我们将其放在导航栏上方。

在我们的z-index layout page中了解有关此内容的更多信息。

JS上的HTML和CSS

只要有可能,我们都希望通过JavaScript编写HTML和CSS。 通常,HTML和CSS更加丰富,并且可供更多具有不同经验水平的人们使用。 HTML和CSS在您的浏览器中也比JavaScript更快,并且您的浏览器通常为您提供大量功能。

这个原则是我们使用data属性的一流JavaScript API。 您几乎不需要编写任何JavaScript即可使用我们的JavaScript插件; 而是编写HTML。 在our JavaScript overview page中详细了解此内容。

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

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

通用工具

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

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

灵活的HTML

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