bootstrap4源码阅读体会

欢迎到我的博客参观: 点击这里

bootstrap已经使用了很长时间，可是历来没有好好研究过其设计结构，春节期间闲来无事就阅读了源码。经过阅读发现了很多知识的盲点和误解，对css有了更深刻的理解。总结几点印象较深的体会，分享给你们。

1. 移动优先

在移动互联网时代，不少公司都坚持移动端优先的原则，bootstrap也迎合了这种需求，具体表如今以下方面:

• 相对单位: %、rem的大量使用

• grid系统: 为了使用不一样的设备，grid系统对xs、sm、md、lg、xl进行了响应式设计，经过media query作到适配

• 支持flexbox: mobile应该很快就可使用flexbox

2. 代码结构

2.1 从less到saas

使用sass做为bootstrap的css预处理器，之前对预处理器不是很感冒，认为将简单问题复杂化了。可是经过阅读源码改变了这种认识:

• css模块化: css很简单、灵活，这是其优势，同时也是一个缺点。经过sass预处理器，能够根据功能将css模块化，便于css的管理

• 复用: 变量、mixin、function等技术，能够方便地进行代码复用

• 简洁: 支持each、if等语法，动态输出内容，例如繁琐的grid系统，是经过少许的sass代码作到的

2.2 代码层次

根据代码的层次，sass的源码分为以下几部分:

• 支撑部分: 包括变量定义、大量的mixin文件，这是整个bootstrap的基础代码，也是进行个性化定制的其实位置

• 全局部分: normalize.scss用于覆盖各类浏览器的默认行为，保证起始样式的一致性

• 基础样式部分: 包含了reboot、typography、images、code、table、forms、buttons等，主要是一些经常使用的基础html元素

• grid部分: 选择性支持flexbox，默认状况下是关闭的，只要将$enable-flex=true就可使用flexbox完成页面的栅格布局

• 组件部分: 包含大量经常使用的基础组件，有些须要添加jQuery plugin

• 工具类部分: 经常使用的简单样式，例如间距、文本对齐、字体加粗等

3. Grid

Grid用于页面的总体布局，同时css3也在起草grid布局模块。Grid也能够单独使用，bootstrap4提供了一个单独的文件(bootstrap-grid.scss)来实现栅格系统，具体来讲Grid有以下特色:

• 默认状况下是12栅格

• 栅格能够嵌套使用

• 支持5种尺寸下的响应式样式

• 5个尺寸能够组合使用，适配不一样终端下终端

• 支持使用flexbox

4. flexbox

flexbox目前还处于草案阶段，不太高级浏览器已经开始支持，若是只考虑高版本浏览器的话，能够启动经过$enable-flex=true来启动flexbox。

flexbox是将来布局的趋势，尤为是在复杂页面布局上，总得来讲具备以下几个优势:

• 可伸缩性: 经过flex来实现空间的伸缩，在响应式设计中更加灵活(无需关注margin、padding、border等)

• 顺序定制: flexbox的一大亮点，经过order指定元素的显示顺序

• 轻松对齐: 经过jsutify-content、align-items能够方便实现元素的对齐

• 方向性: 经过flex-flow方便肯定布局的方向

5. 组件设计

bootstrap里面提供了大量的经常使用组件，能够直接使用或者简单进行二次开发，加快平常业务的开发速度。同时，有些组件须要跟js(jQuery)配合，实现组件的交互效果。

里面的组件按是否须要js，能够分为两类:

• 无需js配合: Button系列、Form、Input系列、DropDown、Jumbotron、Label、Alert、Cards、Nav系列、Breadcrumb、Pagination、Progress、List

• 需js配合: Modal、Tooltips、Popovers、Carousels

须要注意的是Cards是bootstrap4新增的组件。

6. 参考

• http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/