免责声明:我过去使用过 bootstrap,但我从来没有真正理解过它实际上是什么,这个描述来自我今天得出的我自己的定义。而且我知道 bootstrap v4 已经过时了,但是我发现 bootstrap v3 文档更加清晰,所以我使用了它。该库不会从根本上改变它所提供的内容。
简述
Bootstrap 是 CSS 和 javascript 文件的集合,它为标准 html 元素和一些非标准 html 元素的常见 Web 内容对象提供了一些漂亮的默认样式。
打个比方,这有点像在 powerpoint 中应用一个主题,但对于您的网站:它使事情看起来很漂亮,而不需要太多的初始努力。
它由什么组成?
官方 v3 文档将其分为三个部分:
这些大致对应于 Bootstrap 提供的三个主要的东西:
- 标准 html 元素样式的纯 CSS 文件。因此,Bootstrap 使您的标准元素看起来很漂亮。例如html:
<input class="btn btn-default" type="button" value="Input">Click me</button>
- 在标准 html 元素上使用样式的 CSS 文件将它们变成不是标准 html 元素但是标准 Bootstrap 元素的东西(例如https://getbootstrap.com/docs/3.3/components/#progress)。通过这种方式,Bootstrap 以视觉上一致的方式扩展了“标准”Web 元素列表。例如html:
<span class="glyphicon glyphicon-align-left"></span>
- CSS 类的设计考虑到了 jQuery。在内部,Bootstrap 使用 jQuery 选择器来动态修改样式并与 DOM 交互,从而为用户提供相同的功能。我认为这需要更多解释,所以...
使用 Javascript/jQuery
Bootstrap extends jQuery 相当多。如果我们查看源代码,我们可以看到它使用 jQuery 来执行以下操作:set up listeners for keydown event to interact with dropdowns。当您将其导入 <script> 标记时,它会执行所有这些 jQuery 设置,因此您需要确保在 Bootstrap 之前加载 jQuery。
此外,它比普通的 jQuery 更紧密地将 javascript 与 DOM 联系起来,提供了一个 javascript 类接口。例如toggle a button programmatically。请记住,CSS 只是定义事物的外观,因此这些操作的主要工作往往是修改在那个时刻应用于元素的 CSS 类。这种基于用户输入的更改无法使用纯 CSS 完成。
还有其他标准的用户交互,我们互联网上的居民已经习惯了,但 CSS 没有涵盖这些交互。比如,单击一个链接可以向下滚动页面而不是更改页面。 Bootstrap 为您提供的其中一项功能是在您自己的网站上实现此行为的简单方法。
标准
我在这里多次提到“标准”这个词,这是有充分理由的。我认为 Bootstrap 提供的最好的东西是一套好看的标准。您可以随意修改默认主题,但它比原始 html、css 和 js 更好。这就是为什么它被称为“框架”。
不同的网络浏览器有不同的默认样式并且可以有不同的行为,并且需要不同的 CSS 前缀和类似的东西。 Bootstrap 的一个主要好处是它比自己编写所有跨浏览器的东西更可靠(我敢肯定,你仍然会遇到问题,但它更容易)。
我认为当 gulp 和 babel 不那么流行时,Bootstrap 更受欢迎。看看 Bootstrap,它似乎来自每个人都编译他们的 javascript 之前的时间。它仍然具有相关性,但您现在可以从其他来源获得一些好处。
最新版本的 CSS 允许您在这些静态列表更改时定义它们之间的过渡。 Bootstrap 的原始版本实际上早于浏览器广泛采用此功能,因此它们仍然有自己的动画类。有一些 Bootstrap 是这样的:周围出现了其他东西,使它看起来有点多余。