问题
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>
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.
回答1:
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.
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/
The easiest way to compile Bootstrap is using the build system shipped with Bootstrap.
- Download and unzip the sourcecode
- Navigate to the
bootstrapfolder - Run:
npm install - Run:
grunt
When you compile your own version as described above Bootstrap comes with some extras.
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.
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.
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.
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)
来源：https://stackoverflow.com/questions/34296488/bootstrap-will-require-a-sass-compiler-and-autoprefixer-for-a-setup-that-matches