Bootstrap 4 的安装与配置教程详解

Bootstrap 4 刚刚发布了预览版，离正式版还有一段时间。不过现在我们已经可以使用 Bootstrap 4 了，看看里面有什么新东西。 最简单的方法就是使用 Bootstrap 的 CDN ，把需要的样式表与 JS 文件链接到网页上，不过这样你不能去编辑 Bootstrap ，比如去定制里面的一些选项。下面我们使用 Git 去克隆一份 Bootstrap 仓库到本地。

# 进入到桌面
cd ~/desktop
# 为项目创建目录并进入这个目录
mkdir ninghao-bootstrap
cd ninghao-bootstrap
# 克隆 Bootstrap 仓库
git clone https://github.com/twbs/bootstrap.git
# 进入到 Bootstrap
cd bootstrap
# 提取分支
git fetch
# 切换到 Bootstrap 4 的开发分支
git checkout v4-dev

确定你已经安装好了 npm 还有 Bower ，然后我们需要去为 Bootstrap 项目安装需要的东西。

npm install

bower install

安装需求的这些东西要等一会儿，速度可能有点慢。完成以后我们用编辑器打开创建的目录 ninghao-bootstrap，然后新建一个 html 文件叫 index.html ，下面是一个基本的模板：

为了可以自动更新浏览器的变化，可以使用 bowser-sync 为项目去创建一个服务器并且监视一些文件的变化，进入到 ninghao-bootstrap 这个目录以后，执行

：
browser-sync start --server --no-notify --files 'index.html, bootstrap/dist/css/bootstrap.css'

新建一个命令行窗口，再进入到项目的 bootstrap 这个目录的下面，执行一下：

grunt watch
这个命令会监视 Bootstrap 项目文件的变化，发生变化以后，会重新编译 Bootstrap 的 CSS 与 JS 。

选项

Bootstrap 4 定义了一些自定义的选项，你可以方便的使用它们为 Bootstrap 的组件打开或者关掉某些效果，比如 Flexbox，圆角，阴影，渐变等等。这些选项就是 Sass 里的一些变量，打开：

bootstrap/scss/_variables.scss

在 Options 这个区域的下面，你可以看到：

$enable-flex:               false !default;

$enable-rounded:            true !default;

$enable-shadows:            false !default;

$enable-gradients:          false !default;

$enable-transitions:        false !default;

$enable-hover-media-query:  false !default;

这些变量的值有些是 true ，表示启用，有些是 flase ，表示禁用。比如你不想让某些组件使用圆角的效果，可以把 $enable-rounded 这个变量的值设置成 false ，保存文件以后，会自动编译 Bootstrap 的 CSS，这样就会去掉某些组件里应用的圆角效果。

Flexbox

Flexbox 是一种简单灵活的布局方法，很多现化的浏览器已经开始支持 Flexbox 了，它也是未来布局页面主要用的东西。 Bootstrap 4 开始支持 Flexbox ，不过现在会作为一个可选项，也就是默认不会在组件里使用 Flexbox ，启用它的话，先打开文件：

bootstrap/scss/_variables.scss
搜索 $enable-flex 这个变量，把它的值设置成 true ，保存文件，然后重新编译 Bootstrap ，这样 Bootstrap 4 里的某些组件就会使用 Flexbox 代替传统的 float，display: table 这些东西。