Bootstrap 4-alpha 初体验

时间:2024-01-12 22:02:20

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 顺便骂句街:最近上网又很困难了,可能是不太平,所以下载不下来也很正常;
  1. 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号过后可以好点
  2. 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. Bootstrap 4-alpha 初体验

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. Bootstrap 4-alpha 初体验
  1. FlexBox:
    1. FlexBox为CSS提供了一个更简单便捷的布局方式,取代咱们之前在CSS中常见的float,display:table的方式,这么牛掰的功能自然不支持IE10以下版本,只不过以后也就不存在这个问题,也可以说微软间接成就了前端大行其道的现状,哈哈!关于FlexBox:
    2. 传送门:http://www.w3cplus.com/css3/a-guide-to-flexbox.html
    3. 不重复造*(其实我也是不太熟悉这个)
  2. 全面使用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
  3. 放弃IE8的支持,也就是以后只兼容IE8以上。从产品角度可以理解,个人情感:完全放弃IE吧。
  4. 重构了JS组件,功能上没有变化;
  5. 将wells、thumbnails和panels统一改为cards;
  6. 样式上细微变化;
  7. 。。。。。。。待续

Usage

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

Compilation

  1. 先定位到Bootstrap所在的目录:
  1. 键入:
    1. npm install 回车
    2. Node 的包管理工具会根据配置文件自动安装编译所需要用到的包 ,国内用户可以通过淘宝的cnpm加速此过程
  1. 键入:
    1. grunt 回车
  1. 项目目录下的dist中为编译过后的结果;
  2. 也可以使用grunt watch监视源码的变化自动编译;

小结

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