Bootstrap-Sass 源码解析一：文件组织架构

Posted 2022-08-16 小马xml

解析环境

• “bootstrap-sass”: “~3.3.5”
• 项目地址：https://github.com/twbs/bootstrap-sass

前置学习

• SASS
• OOCSS

核心文件组织结构

bootstarp
|--Core variables and mixins     //核心参数和混入（类似函数）
    |-- variables                //核心参数设置
    |-- mixins                   //各种混入

|--Reset and dependencies        //页面重置和依赖
    |-- normalize                //https://github.com/necolas/normalize.css
    |-- print                    //打印格式化
    |-- glyphicons               //http://glyphicons.com/

|--Core CSS                      //核心组件
    |-- scaffolding              //脚手架：主要是对body，html等标签进行定制化的reset
    |-- type                     //排版相关
    |-- code                     //代码相关
    |-- grid                     //栅格系统
    |-- tables                   //表格相关
    |-- forms                    //表单相关
    |-- buttons                  //按钮相关

|--Components                    //组件
    |-- component-animations     //组件的淡出等动画
    |-- dropdowns                //点击下拉菜单组件
    |-- button-groups            //按钮组
    |-- input-groups             //表单输入组
    |-- navs                     //导航
    |-- navbar                   //导航条
    |-- breadcrumbs              //面包屑
    |-- pagination               //分页页码
    |-- pager                    //上一页下一页分页
    |-- labels                   //标签
    |-- badges                   //徽章
    |-- jumbotron                //超大屏
    |-- thumbnails               //缩略图
    |-- alerts                   //警告
    |-- progress-bars            //进度条
    |-- media                    //多媒体对象
    |-- list-group               //列表组
    |-- panels                   //面板(容器)
    |-- responsive-embed         //响应式嵌入
    |-- wells                    //一种会引起内容凹陷显示或插图效果的容器
    |-- close                    //关闭按钮

|--Components w/ javascript      //需要与js交互的组件
    |-- modals                   //模态框
    |-- tooltip                  //工具提示
    |-- popovers                 //弹出框
    |-- carousel                 //轮播

|--Utility classes               //工具类
    |-- utilities                //普通工具，如清除浮动等
    |-- responsive-utilities     //响应式布局相关