bootstraps4+flexbox

因为要重写个生产系统的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监视源码的变化自动编译；

成功