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

Posted 小马xml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap-Sass 源码解析一:文件组织架构相关的知识,希望对你有一定的参考价值。

解析环境

前置学习

核心文件组织结构

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     //响应式布局相关

以上是关于Bootstrap-Sass 源码解析一:文件组织架构的主要内容,如果未能解决你的问题,请参考以下文章

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

Bootstrap-Sass 源码解析二:Variables.scss

Bootstrap-Sass 源码解析二:Variables.scss

Bootstrap-Sass 源码解析二:Variables.scss

bootstrap-sass_源码解析四:Utility

bootstrap-sass_源码解析四:Utility