Bootstrap源码分析系列之整体架构
2016-10-16 11:01
651 查看
作为一名合格的前端工程师,你肯定听说过Bootstarp框架。确实可以说Bootstrap框架是最流行的前端框架之一。可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端技能带来提升,那么我们就有必要研究一下它。Bootstrap框架虽然也提供了javascript插件,但总感觉不够用。Bootrtrap更多的则是被用作css框架。之前我也用过几次Bootstrap,感觉确实很快,很方便,用的次数多了就越想弄清楚它到底是怎么回事?它好在哪里?
在Bootstrap官网点击下载我们可以看到有用于生产环境中的Bootstrap和Bootstrap源码以及Sass,我们知道Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。今天我们就来学习一下以Less开发的Bootstrap。如果不熟悉Less语法的朋友可以先在Less官网学习下,在下载的bootstrap-3.3.0\less文件夹中打开bootstrap.less,我们可以看到源码的整体架构
这些Less文件进过编译后形成了完整的Bootstrap框架。在Bootstrap官网最后我们可以定制自己的Bootstrap,可根据项目的需要自行选择不同的Less文件。
在《深入理解Bootstrap》一书中以图表的形式概括了Bootstrap整体架构,图片如下:
在接下来的文章中,将对Bootstrap框架中一些常用的样式及组件进行分析,经过自己梳理一遍对Bootstrap更加了解了。
下一篇:Bootstrap源码分析系列之初始化和依赖项
在Bootstrap官网点击下载我们可以看到有用于生产环境中的Bootstrap和Bootstrap源码以及Sass,我们知道Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。今天我们就来学习一下以Less开发的Bootstrap。如果不熟悉Less语法的朋友可以先在Less官网学习下,在下载的bootstrap-3.3.0\less文件夹中打开bootstrap.less,我们可以看到源码的整体架构
// Core variables and mixins //定义变量,方便后面调用 @import "variables.less"; //定义混合 这类似定义函数或者宏,在mixins文件夹中可看到所定义的函数 @import "mixins.less"; // Reset and dependencies //标准化css,这是一个专门将不同浏览器的默认css特性设置为统一效果的css库,编译后对应源码为8~190行 @import "normalize.less"; //打印样式,编译后对应源码为192~266行 @import "print.less"; //图标样式,编译后对应源码为267~885行 @import "glyphicons.less"; // Core CSS 核心CSS //脚手架,相当于全局样式,编译后对应源码为886~989行 @import "scaffolding.less"; //排版样式,编译后对应源码为990~1335行 @import "type.less"; //代码样式,编译后对应源码为1336~1389行 @import "code.less"; //栅格系统,这是Bootstrap支持响应式的重点,编译后对应源码为1390~2056行 @import "grid.less"; //表格样式,编译后对应源码为2057~2296行 @import "tables.less"; //表单样式,编译后对应源码为2297~2781行 @import "forms.less"; //按钮样式,编译后对应源码为2782~3171行 @import "buttons.less"; // Components 组件 //组件中折叠和隐藏动画,编译后对应源码为2782~3171行 @import "component-animations.less"; //下拉菜单及下三角符号,编译后对应源码为3209~3348行 @import "dropdowns.less"; //按钮组,编译后对应源码为3349~3520行 @import "button-groups.less"; //输入框组,编译后对应源码为3521~3674行 @import "input-groups.less"; //导航,编译后对应源码为3675~3868行 @import "navs.less"; //导航条,编译后对应源码为3869~4393行 @import "navbar.less"; //面包屑,编译后对应源码为4394~4411行 @import "breadcrumbs.less"; //默认分页,编译后对应源码为4412~4504行 @import "pagination.less"; //翻页,编译后对应源码为4505~4542行 @import "pager.less"; //标签,编译后对应源码为4543~4609行 @import "labels.less"; //徽章,编译后对应源码为4610~4648行 @import "badges.less"; //巨幕,编译后对应源码为4649~4686行 @import "jumbotron.less"; //缩略图,编译后对应源码为4687~4712行 @import "thumbnails.less"; //警告框,编译后对应源码为4713~4787行 @import "alerts.less"; //进度条,编译后对应源码为4788~4881行 @import "progress-bars.less"; //媒体对象,编译后对应源码为4882~4915行 @import "media.less"; //列表组,编译后对应源码为4916~5091行 @import "list-group.less"; //面板,编译后对应源码为5092~5426行 @import "panels.less"; //具有响应式特性的嵌入内容,编译后对应源码为5427~5452行 @import "responsive-embed.less"; //well效果,编译后对应源码为5453~5474行 @import "wells.less"; //关闭按钮图标,编译后对应源码为5475~5499行 @import "close.less"; // Components w/ JavaScript //模态框,编译后对应源码为5500~5622行 @import "modals.less"; //工具提示,编译后对应源码为5623~5720行 @import "tooltip.less"; //弹出框,编译后对应源码为5721~5841行 @import "popovers.less"; //轮播,编译后对应源码为5842~6063行 @import "carousel.less"; // Utility classes //实用工具类,编译后对应源码为6064~6147行 @import "utilities.less"; //响应式工具类,编译后对应源码为6148~6357行 @import "responsive-utilities.less";
这些Less文件进过编译后形成了完整的Bootstrap框架。在Bootstrap官网最后我们可以定制自己的Bootstrap,可根据项目的需要自行选择不同的Less文件。
在《深入理解Bootstrap》一书中以图表的形式概括了Bootstrap整体架构,图片如下:
在接下来的文章中,将对Bootstrap框架中一些常用的样式及组件进行分析,经过自己梳理一遍对Bootstrap更加了解了。
下一篇:Bootstrap源码分析系列之初始化和依赖项
相关文章推荐
- jQuery-1.9.1源码分析系列(一)整体架构
- jQuery-1.9.1源码分析系列(一)整体架构
- Jquery源码分析系列(1)--Jquery整体架构
- jQuery-1.9.1源码分析系列(一)整体架构续
- jQuery-1.9.1源码分析系列(一)整体架构续
- Study JQuery《源码分析core-整体架构》
- UI框架系统剖析系列3(系统整体架构分析)
- jQuery 2.0.3 源码分析之core(一)整体架构
- jQuery 2.0.3 源码分析core - 整体架构
- Spring 源码分析(三) —— AOP(二)Spring AOP 整体架构
- UiAutomator系列——Appium Server源码分析之作为Bootstrap客户端(011)
- jQuery 2.0.3 源码分析core - 整体架构
- UiAutomator系列——Appium Android Bootstrap源码分析之命令解析执行(008)
- jQuery 2.0.3 源码分析core - 整体架构
- 转载-----jQuery 2.0.3 源码分析core - 整体架构
- 【Seajs源码分析】1. 整体架构
- jQuery源码分析系列(30) : Ajax 整体结构
- bootstrap源码分析系列:一,文件结构和开发环境
- apache kafka系列之源码分析走读-server端网络架构分析
- jQuery源码分析系列 : Ajax 整体结构