Bootstrap 4-alpha 初体验

What is Bootstrap？

第一句话就是废话了，作为新时代有理想有节操的开发人员无人不知无人不晓。可能就是熟悉程度因为各种原因不尽相同，有人只是知道他大概是个什么东西，有些人可能基本可以使用，有些人可能深有体会。但是纠正一下一个比较常见的问题，可能我这个人比较矫情，Bootstrap是一个单词，不要写成了BootStrap，还有重音在第一个字母http://fanyi.baidu.com/#en/zh/bootstrap，尊重作者。

 

Bootstrap是新时代Web开发前端展示整体的解决方案，也可以说是框架，以模块化组件化(也可以说是OOP)的编码方式给了传统的网页开发人员一记响亮的耳光。让大家开始注重前端的架构和工作流，注重网页再也不是怼代码实现效果就完事了。说白了就是：我们需要实现最终的效果（否则老板那里说不过去），只是在这个实现的过程中体现的更优（zhuang）雅（bi）一些。当然这些所谓的优雅并不是一味的提高B格，显得与众不同，而真的是时代需要。扯远了，今天小有点时间，一起来看看前几天刚发布的Bootstrap-v4-alpha版。

 

Installation

对于前端的包安装的方法各式各样，这里简单提一下：

1. 最最简单粗暴的方式：
1. 直接下载下来使用
2. 地址：https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.zip 顺便骂句街：最近上网又很困难了，可能是不太平，所以下载不下来也很正常；

2. Git
1. 首先确保机器上安装了GIT，确保终端中有git命令：
1. windows用户安装http://git-scm.com/download/win 并配置环境变量；osx直接略过；
2. 打开终端或者命令行工具键入以下命令：
1. git clone -b v4-dev https://github.com/twbs/bootstrap.git
2. -b参数是指定一个分支，由于现在还没有切换到主分支上，所以需要手动指定一下
3. 网络不给力fuck，但愿9月3号过后可以好点
3. Bower（推荐）
1. 前端专业加包或者叫依赖管理工具，类似与NuGet或是maven，它本身是Node的一个包，所以需要提前安装一下Node，这里不多介绍了，官网有详细说明 http://bower.io
2.  在全局环境中安装完Bower后打开终端或命令行键入：
1. bower install bootstrap#4.0.0-alpha
2. 这里注意#4.0.0-alpha是必须的，默认是当前最新的正式版本3.3
3. 

 

Features

1. 源代码从Less变为了Sass：
1. 这点没什么好说的，之前3.x的时期已经有Sass的版本，不可否认Sass越来越流行。前端行业重复造轮子的情况是很普遍的，呼吁尽量不要重复造轮子，用别人的轮子没什么可耻的，可耻的是把别人的轮子拿过来改改就造一个新轮子。感觉上大家都在造轮子让生态圈铮铮向荣，但是也会让初学者茫然，比如像选一个任务框架，用grunt还是用gulp？
2. 可深度自定义：
1. 在3.x中我们就可以通过修改项目中的variables.less文件去自定义，比如原本的12列Grid很多人都觉得不够，那我们就可通以过@grid-columns:变量去修改。
2. 在4.0中这一点更突出，可以自定义组件的各种样式，比如是否有阴影圆角或是渐变效果、是否使用flexbox等等，也是通过项目中_variables.scss中定义。
3. 

3. FlexBox：
1. FlexBox为CSS提供了一个更简单便捷的布局方式，取代咱们之前在CSS中常见的float，display:table的方式，这么牛掰的功能自然不支持IE10以下版本，只不过以后也就不存在这个问题，也可以说微软间接成就了前端大行其道的现状，哈哈！关于FlexBox：
2. 传送门：http://www.w3cplus.com/css3/a-guide-to-flexbox.html
3. 不重复造轮子（其实我也是不太熟悉这个）
4. 全面使用rem：
1. 这是一个长度单位，在之前的版本一直没有使用过，跟em类似，em单位是相对当前容器的font-size，一个单位的em=当前容器定义的字体大小，常见案例：中文段落首行两个单位的缩进，2em搞定。
2. 而rem是相对于根容器font-size来确定的，rem应该就是root em简写（不确定），如果整个网页都是通过rem的单位设置尺寸，只要在跟容器（body）设置一个具体的font-size为像素单位，而且当这个像素值变化整个页面所有用到rem的地方都会等比例变化，便于维护。
3. 相关链接：http://www.w3cplus.com/css3/define-font-size-with-css3-rem
5. 放弃IE8的支持，也就是以后只兼容IE8以上。从产品角度可以理解，个人情感：完全放弃IE吧。
6. 重构了JS组件，功能上没有变化；
7. 将wells、thumbnails和panels统一改为cards；
8. 样式上细微变化；
9. 。。。。。。。待续

 

Usage

今天关于Bootstrap使用肯定没时间铺开来说了，这里简单介绍一下他的项目结构和编译（源码是Scss编写，而且是单独组件的方式编写），现在还没有单独发行编译过后的包，所以难免需要我们手动编译，很简单：

 

Compilation

1. 先定位到Bootstrap所在的目录：

2. 键入：
1. npm install 回车
2. Node 的包管理工具会根据配置文件自动安装编译所需要用到的包 ，国内用户可以通过淘宝的cnpm加速此过程

3. 键入：
1. grunt 回车

4. 项目目录下的dist中为编译过后的结果；
5. 也可以使用grunt watch监视源码的变化自动编译；

 

小结

现在这个时代思想保守，技术守旧的产品自然是最早离开我们的，那开发人员呢？也不是说为了不被淘汰就去追新技术，最起码在思想上要要求自己进步，抓得住技术方向的灵魂。鄙人不才，想抛砖引玉，希望博客园的各位大神多关注前端方向新动态，多多发表个人想法，促进国内前端生态圈