因为要重写个生产系统的WEB界面为响应式，查过相关资料，想用上flexbox,为以后react.js做准备，再查，知道bootstrap4用上flexbox,所以就开始bootstraps+flexbox
详细流程如下：
- 1 bt4安装
- 1.1通过Bower来获取Bootstrap 4的alpha版本。
bower install bootstrap#v4.0.0-alpha.2 - 1.2 使用 Git 去克隆一份 Bootstrap 仓库到本地。(参考http://www.111cn.net/sys/linux/93328.htm）
# 进入到桌面
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
- 2 引用 cd bootstrap，然后新建一个 html 文件叫 index.html ，下面是一个基本的模板
-3 Flexbox模式
Flexbox是一种CSS的弹性布局，在Boostrap 4 alpha中可以通过下面的步骤来使用Flexbox：
打开scss文件找到$enable-flex变量。
将它从false修改为true。
重新编译后将会转换到Flexbox模式。
[
- 2.1 安装
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
- 2.2 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass –style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass –watch input.scss:output.css
// watch a directory
sass –watch app/sass:public/stylesheets
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
SASS编译
http://ju.outofmemory.cn/entry/39639
http://www.w3cplus.com/sassguide/compile.html
]
选项
Bootstrap 4 定义了一些自定义的选项，你可以方便的使用它们为 Bootstrap 的组件打开或者关掉某些效果，比如 Flexbox，圆角，阴影，渐变等等。这些选项就是 Sass 里的一些变量，打开：
1
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，这样就会去掉某些组件里应用的圆角效果。FlexboxFlexbox是一种简单灵活的布局方法，很多现化的浏览器已经开始支持Flexbox了，它也是未来布局页面主要用的东西。Bootstrap4开始支持Flexbox，不过现在会作为一个可选项，也就是默认不会在组件里使用Flexbox，启用它的话，先打开文件：bootstrap/scss/variables.scss搜索
enable-flex 这个变量，把它的值设置成 true ，保存文件，然后重新编译 Bootstrap ，这样 Bootstrap 4 里的某些组件就会使用 Flexbox 代替传统的 float，display: table 这些东西。
为了可以自动更新浏览器的变化，可以使用 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
详细参数请见 http://wiki.jikexueyuan.com/project/bootstrap4/getting-started/options/
- 3 工具安装
为了使用Gruntfile以及本地运行我们的文档，你需要拷贝一份Bootstrap的源文件，还有Node.js以及Grunt。参照下面的步骤，你应该已经准备好开始动手了：
下载并安装 Node，我们用它来管理我们的依赖关系。
安装 Grunt 命令行工具，grunt-cli，通过 npm install -g grunt-cli。
导航到 /bootstrap 根目录，然后运行 npm install 来安装我们列在package.json 中的本地的相依性。
安装 Ruby，通过 gem install bundler 安装 Bundler，最后运行bundle。这样就安装了所有的 Ruby 依赖关系，比如 Jekyll 和 Sass linter。
完成后，你就可以通过命令行来运行丰富的Grunt命令了
- 4 bootstraps4 元素 (http://wiki.jikexueyuan.com/project/bootstrap4/layout/grid/)
4.1 全局设置
Bootstrap设置了基本的全局显示，排版，以及链接样式，我们特地做了这些设置：4.1.1利用background-color: #fff;把网页背景色设置为白色。
- 4.1.2使用 font−family−base、 font-size-base以及$line-height-base属性作为排布基础。
4.1.3通过$link-color设置全局链接样式，并让链接只在鼠标悬停:hover状态下才出现下划线。
这些样式可以在_reboot.scss中找到。4.2 响应式图片
在Bootstrap中，给图片应用.img-reponsive类以及max-width: 100%、height:auto;样式，使其具有响应性，并根据父元素的大小缩放。
<img src="..." class="img-responsive" alt="Responsive image">4.3 图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">4.4 对齐图片
<img src="..." class="img-rounded pull-left" alt="...">
<img src="..." class="img-rounded pull-right" alt="...">5 组件
- 5.1 按钮
http://wiki.jikexueyuan.com/project/bootstrap4/components/buttons/
因为要用flexbox布局，只有bootstrap4beta可以用，网上查了很久，
默认没启用flexbox,变量改动很简单，但编译网上的文章基本上就是一笔带过，编译二字，怎么也查不出来，再仔细查，查到方法如下：
引用
http://www.mamicode.com/info-detail-1013950.html
在4.0中这一点更突出，可以自定义组件的各种样式，比如是否有阴影圆角或是渐变效果、是否使用flexbox等等，也是通过项目中_variables.scss中定义。
Compilation
先定位到Bootstrap所在的目录：
键入：
npm install 回车
Node 的包管理工具会根据配置文件自动安装编译所需要用到的包 ，国内用户可以通过淘宝的cnpm加速此过程
键入：
grunt 回车
项目目录下的dist中为编译过后的结果；
也可以使用grunt watch监视源码的变化自动编译；
成功