Question

我想将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？我只是想使用bootstrap。我不想担心各种选项和设置。

Answer 1

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

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

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

下载并解压缩源代码
导航至bootstrap文件夹
运行：npm install
运行：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才能看到Why did Bootstrap 3 switch to box-sizing: border-box?，而不是由网格代码设置。

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

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

Bootstrap将需要Sass编译器和Autoprefixer进行与我们的官方编译版本匹配的设置

1 个答案: