前端

BootStrap4源码解读

BootStrap4, front-end

Bootstrap 是全球最受欢迎的前端组件库，未读过不足以谈前端人生。

做为开发人员为什么要读代码？如同设计人员看展览、看优秀作品一样，是一种快速学习方式。

内容

BootStrap4的特点

——灵活有序

  • 配色方案更丰富专业，增加灰度扩展
  • 基于FlexBox弹性布局，网格系统更加灵活（同时也牺牲了浏览器兼容性）
  • 统一使用card，去掉了wall、panel等面板类样式或组件（更进一步的精简抽象）
  • 去掉了字体图标做为必要组成部分，改推荐第三方图标（每个项目有自己的VI，尤其在图标上，剥离掉很明智）
  • 使用第三方库改进Tooltips
  • em定义基础宽度，使用时只用考虑基础宽度的倍数（符合设计排版思路，解决项目中过多的随意尺寸这个人13px，那个人17px）
  • 盒模型、布局方面属性抽到Utilities，更丰富、自由的样式设置：display-/float-/p-…

相比BootStrap3当然还有很多其他不一样的地方，我仅从设计、项目运用的角度说了几个比较大的感受。

目录文件解读

从目录开始学习，希望从架构上看看运用了哪些构建工具，这些工具有什么作用，
从而了解一套前端UI框架是怎么生产出来的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
bootstrap/
├── _data/ // 用于Docs的数据
├── _includes/ // 用于Docs的框架页面与资源
├── _layouts/ // 用于Docs的典型页面
├── _plugins/ // Ruby插件
├── .github // github相关的说明：贡献、提issue
├── assets // 用于Docs的资源文件：图片、css、js等
├── build // 用于构建的各种配置与脚本
├── dist // 打包出来的css，js；开发者使用的就是这部分
├── docs // B4的说明文档
├── js // js源码，贡献的地方
├── nuget // [NuGet] 用于发布NuGet包
├── scss // css源码，贡献的地方
├── _config.yml [Jekyll] 配置
├── .babelrc.js // [babel] babel配置
├── .editorconfig.js // [EditorConfig] 用来帮助开发者在不同IDE下定义编码格式
├── .eslintignore.js
├── .gitattributes.js
├── .gitignore.js
├── .travis.yml // [Travis Ci] 测试配置
├── CNAME // 解析用
├── CODE_OF_CONDUCT.md // 项目相关的一系列规则，教义
├── composer.json  // [PHP] 配置文件，依赖管理
├── favicon.ico
├── Gemfile // [Ruby] 定义Ruby项目的gem依赖
├── Gemfile.lock
├── index.html
├── LICENSE // [OSI] 开源软件证明
├── package-lock.json // [npm] 快照，用于明确各依赖的版本号
├── package.js // [Meteor] 基本信息、用了哪些包
├── package.json // [npm] 定义了项目所需模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
├── README.md // [gitHub] 用于项目简介
├── robots.txt // [robotstxt] 用来告诉搜索引擎，哪些内容不应被搜获取，哪些内容可获取
├── sache.json // [Sass] 做为Sass扩展和工具在Sache中心分享
└── sw.js  // [Workbox] service worker用于离线运行、提升重复访问中的加载性能

了解了根目录下每个文件或者文件夹的用途后，我们可以把目录分为以下3类去学习：

  • 说明文档，assets、docs文件夹，_*文件夹；
  • 核心源码，scss、js文件夹
  • 构建配置，build文件夹以及配置文件等

接下来我将先从最核心的源码开始进行学习和解读

分享到