BootstrapBootstrap源码分析系列之整体架构

当同样称为合格的前端工程师,你得听说过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,我们得以视源码的一体化架构

// 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 1
每当接入下去的稿子中,将本着Bootstrap框架中有些常用的体裁和零部件进行辨析,经过自己梳理一整整对Bootstrap更加了解了。

下一篇:Bootstrap源码分析系列的新始化和依赖性项

相关文章