Bootstrap将需要一个Sass编译器和一个Autoprefixer来进行与我们官方编译版本匹配的设置 [英] Bootstrap will require a Sass compiler and Autoprefixer for a setup that matches our official compiled versions

问题描述

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

I would like to use bootstrap 4 for a brand-new project, but I'm confused by it.

问:我可以直接下载源代码，然后指向:

Q: Can I just download the source and then point to:

<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>

这就是我需要担心的吗? 我是否需要担心重新启动，仅网格或Flexbox? 我只想使用引导程序.我不想担心各种选项和设置.

And that's all I need to worry about? Do I need to worry about Reboot, Grid Only or Flexbox? I just want to use bootstrap. I don't want to worry a whole lot about various options and setups.

推荐答案

是的，您可以按照问题中的说明下载已编译的CSS代码并指向dist文件夹中的文件.使用编译后的CSS与Bootstrap 3没什么不同.

Yes, you can download the compiled CSS code and point to the files from the dist folder as described in your question. Using the compiled CSS does not differ from Bootstrap 3.

仅在开始编译自己的修改或扩展版本的情况下，才需要Sass编译器并必须运行自动前缀程序. Bootstrap 3使用Less，而Bootstrap 4使用Sass作为CSS代码的预编译器.请注意，自Bootstrap v3.2起，需要使用autoprefixer.另请参阅: http://bassjobsen.weblogs.fm/prepared-bootstrap-v4/

Only in the case you start compiling your own modified or extended version you will need a Sass compiler and have to run the autoprefixer. Bootstrap 3 uses Less and Bootstrap 4 use Sass as precompiler for your CSS code. Notice that the autoprefixer is required since Bootstrap v3.2. See also: http://bassjobsen.weblogs.fm/prepared-bootstrap-v4/

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

The easiest way to compile Bootstrap is using the build system shipped with Bootstrap.

1. 下载并解压缩源代码
2. 导航到bootstrap文件夹
3. 运行:npm install
4. 运行:grunt

1. Download and unzip the sourcecode
2. Navigate to the bootstrap folder
3. Run: npm install
4. Run: grunt

按照上述说明编译自己的版本时，Bootstrap会附带一些附加功能.

When you compile your own version as described above Bootstrap comes with some extras.

首先，您可以编译代码以支持flexbox，请注意，某些较旧的浏览器不支持flexbox，尤其是IE 8和IE 9不支持flexbox，另请参见:

Firstly you can compile your code to support flexboxes, notice that some older browsers do not support flexboxes, especially IE 8 and IE 9 do not support them, see also: http://caniuse.com/#feat=flexbox Enabling flexbox support for your layouts is as simple as setting a single Sass variable ($enable-flex: true;) to true. the scss/bootstrap-flex.scss shows you how to do this. You can also set this variable in your scss/bootstrap.scss file and keep the build system intact.

第二，Bootstrap 4使您只能编译网格(类).可以在scss/bootstrap-grid.scss文件中找到一个示例.您可以将此文件导入任何其他Sass项目以使用Bootstrap Grid系统.请注意，网格要求box-sizing: border-box参见为什么Bootstrap 3切换到box-sizing:border-box?，而不是由网格代码设置.

Secondly Bootstrap 4 enables you to only compile the grid (classes). An example can be found in the scss/bootstrap-grid.scss files. You can import this file into any other Sass project to use the Bootstrap Grid system. Notice that the grid requires box-sizing: border-box see the Why did Bootstrap 3 switch to box-sizing: border-box?, not set by the grid code.

第三次启动时，Bootstrap 4随重新引导一起提供(这也如前所述设置了box-sizing: border-box).重新启动是全局重置，是Normalize.css的扩展( https://github.com/necolas/normalize .css )，则可以将Reboot用于其他项目.要仅编译重新启动，您可以编译scss/bootstrap-reboot.scss文件.

Thirdly Bootstrap 4 ships with Reboot (which also sets the box-sizing: border-box as previously described). Reboot is a global reset and an extension of Normalize.css (https://github.com/necolas/normalize.css) you can use Reboot for other projects. To compile Reboot only you can compile the scss/bootstrap-reboot.scss file.

最后，请注意，当您仅编译bootstrap.scss而不运行自动前缀时，您的代码将不包含任何供应商前缀，并且不适用于Bootstrap支持的所有浏览器.在与默认构建系统相同的受支持浏览器列表中运行自动前缀修复程序，表示已编译的CSS支持与原始代码相同的浏览器. (因此与官方编译版本匹配)

Finally notice that when you compile only the bootstrap.scss without running the autoprefixer your code does not contain any vendor prefix and do not work for all browsers supported by Bootstrap. Running autoprefixer for the same list of supported browsers as the default build system grantues your compiled CSS support the same browsers as the original code does. (And so matches the official compiled versions)

这篇关于Bootstrap将需要一个Sass编译器和一个Autoprefixer来进行与我们官方编译版本匹配的设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！