1

我想将 bootstrap 4 用于一个全新的项目，但我对此感到困惑。

问：我可以只下载源代码然后指向：

<link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bootstrap-4.0.0-alpha.2/dist/js/bootstrap.js"></script>

这就是我需要担心的全部？我需要担心 Reboot、Grid Only 还是 Flexbox？我只想使用引导程序。我不想担心各种选项和设置。

4

1 回答 1

4

dist是的，您可以下载已编译的 CSS 代码并从您的问题中描述的文件夹中指向文件。使用编译后的 CSS 与 Bootstrap 3 没有区别。

只有在您开始编译自己的修改或扩展版本时，您才需要 Sass 编译器并且必须运行 autoprefixer。Bootstrap 3 使用 Less，而 Bootstrap 4 使用 Sass 作为 CSS 代码的预编译器。请注意，自 Bootstrap v3.2 起需要自动前缀。另见：http ://bassjobsen.weblogs.fm/prepared-bootstrap-v4/

编译 Bootstrap 最简单的方法是使用 Bootstrap 附带的构建系统。

  1. 下载并解压源代码
  2. 导航到bootstrap文件夹
  3. 跑：npm install
  4. 跑：grunt

当您如上所述编译自己的版本时，Bootstrap 附带了一些附加功能。

首先你可以编译你的代码来支持 flexbox，注意一些旧的浏览器不支持 flexbox，尤其是 IE 8 和 IE 9 不支持它们，另见：http : //caniuse.com/#feat=flexbox 启用 flexbox 支持您的布局就像将单个 Sass 变量 ( $enable-flex: true;) 设置为 true 一样简单。向scss/bootstrap-flex.scss您展示了如何做到这一点。您还可以在scss/bootstrap.scss文件中设置此变量并保持构建系统完整。

其次，Bootstrap 4 使您只能编译网格（类）。可以在scss/bootstrap-grid.scss文件中找到一个示例。您可以将此文件导入任何其他 Sass 项目以使用 Bootstrap Grid 系统。请注意，网格需要box-sizing: border-box查看为什么 Bootstrap 3 切换到 box-sizing:border-box？，不是由网格代码设置的。

第三，Bootstrap 4 附带了 Reboot（它也设置了box-sizing: border-box如前所述的）。Reboot 是全局重置和 Normalize.css ( https://github.com/necolas/normalize.css ) 的扩展，您可以将 Reboot 用于其他项目。要编译重新启动，您可以编译该scss/bootstrap-reboot.scss文件。

最后请注意，当您只编译bootstrap.scss而不运行 autoprefixer 时，您的代码不包含任何供应商前缀，并且不适用于 Bootstrap 支持的所有浏览器。为与默认构建系统相同的受支持浏览器列表运行 autoprefixer 可让您编译的 CSS 支持与原始代码相同的浏览器。（因此与官方编译的版本相匹配）

于 2015-12-16T23:02:32.140 回答