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

青旅半醒 2021-06-26 16:06 491阅读 0赞

作为一名合格的前端工程师，你肯定听说过`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`整体架构，图片如下：  
![在这里插入图片描述][20190823142400685.png]  
Bootstrap源码分析系列之整体架构  
在接下来的文章中，将对`Bootstrap`框架中一些常用的样式及组件进行分析，经过自己梳理一遍对`Bootstrap`更加了解了。

[20190823142400685.png]: /images/20210626/bf4acdee6267474bb07e0548dfa612d1.png