bootstrap-flex、bootstrap-grid 和 bootstrap-reboot 的区别

Posted 2023-03-06

【中文标题】bootstrap-flex、bootstrap-grid 和 bootstrap-reboot 的区别

【英文标题】：Differences between bootstrap-flex, bootstrap-grid and bootstrap-reboot

【发布时间】：2017-04-11 04:05:36

【问题描述】：

在最新版本的 Bootstrap 中（提问时的当前版本是 bootstrap@4.0.0-alpha.5）有 3 个不同的文件和一个标准文件：

bootstrap-flex.css bootstrap-grid.css bootstrap-reboot.css bootstrap.css

前 3 个文件是 bootstrap.css (#4) 的扩展名吗？

我可以想象，bootstrap-flex 使用 CSS Flexbox 的特性，bootstrap-grid 可能是旧的并且已经存在的方式，但是bootstrap-reboot 呢？

我必须包括哪一个（尤其是如果我在 Angular 2 中使用 ng-bootstrap）？

【参考方案1】：

看看source：

bootstrap-flex.scss

启用 Flexbox 的引导程序

包括来自标准 Bootstrap 项目的所有导入，但启用 flexbox 变量。

bootstrap-grid.scss

仅引导网格

包括常规（非 flexbox）网格系统的相关变量和 mixin，以及生成的预定义类（例如，.col-4-sm）。

bootstrap-reboot.scss

仅引导重启

仅包括 Normalize 和我们的自定义重启重置。

bootstrap.scss

主引导库

答案是肯定的，前 3 个文件对于 Bootstrap 来说是可选的。

最低要求是bootstrap.css，它已经包括bootstrap-reboot。

如果您只想要 Bootstrap 的网格，请替换为 bootstrap-grid。

如果您想将 Bootstrap 与 Flexbox 一起使用，请替换为 bootstrap-flex。它是bootstrap.css，具有 Flexbox 功能。

【参考方案2】：

正如@Nhan 所说：是的，-reboot、-flex 和 -grid 文件扩展了主 bootstrap.css，如果您使用其中之一，那么您只需包含该文件。

就您问题的 ng-bootstrap 部分而言，我使用的是相同的，并且我只包含了 bootstrap.min 文件，因为我不打算使用 flexbox，而且我需要的不仅仅是网格样式。

希望这可以对您的问题上下文中的严格必要条件进行一些澄清。