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 ，下面是一个基本的模板：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://ninghao.net/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<!-- Content -->
<script src="https://ninghao.net/bootstrap/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://ninghao.net/bootstrap/dist/js/bootstrap.js"></script>
</body>
</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 这些东西。
Bootstrap
评论
前端的知识更新太快了！
9 年 3 个月 以前