Bootstrap-Sass 源码解析

框架目录：

结构说明所有样式规则的sass源码在如上标出的bootstrap目录下，与该目录同级的_bootstrap.scss主要是引入所有模块，若定制样式的话，则复制该文件到用compass创建应用bootstrap-sass插件的项目中的sass目录下并重命名，这时就可以自选要使用的模块，不需要的可以注释掉，重命名后styles.scss中不需要在引入：@import "bootstrap";（代表引入了bootstrap的所有模块）直接改成引入新建的文件即可。

在如上标出的bootstrap目录下有一个sass目录下有一个_variables.scss文件（主要是插件默认变量的设置）若定制的话，compass创建应用bootstrap-sass插件的项目中的sass目录下会有一个 _bootstrap-variables.scss文件主要是用来配合定制的相应组件来修改默认变量的值，以达到定制的效果。

compass创建应用bootstrap-sass插件的项目项目结构：

图中红色框的文件不是创建时默认生成，主要是根据上面步骤用来定制相应模块引入的文件，即_bootstrap.scss相关复制修改版。

_variables.scss中变量配置：

说明可看：bootstrap官网->全局css->使用 Less

核心配置项

|-- Colors                      //定义了灰度和徽章的颜色
|-- Scaffolding                 //脚手架，一些全局样式
|-- Typography                  //排版样式
|-- Iconography                 //图标配置
|-- Components                  //各组件的padding，border等公共设置
|-- Z-index master list         //各组件的z-index排列顺序
|-- Media queries breakpoints   //响应式布局中媒体的大中小划分点
|-- Grid system                 //栅格系统
|-- Container sizes             //container在不同尺寸屏幕中的最大宽度
|-- Form states and alerts      //Form和alerts的状态配置

组件配置

|-- tables                   //表格相关
|-- buttons                  //按钮相关
|-- forms                    //表单相关
|-- dropdowns                //点击下拉菜单组件
|-- navbar                   //导航条
|-- navs                     //导航
|-- pagination               //分页页码
|-- pager                    //上一页下一页分页
|-- jumbotron                //超大屏
|-- tooltip                  //工具提示
|-- popovers                 //弹出框
|-- labels                   //标签
|-- modals                   //模态框
|-- alerts                   //警告
|-- progress-bars            //进度条
|-- list-group               //列表组
|-- panels                   //面板(容器)
|-- thumbnails               //缩略图
|-- wells                    //一种会引起内容凹陷显示或插图效果的容器
|-- badges                   //徽章
|-- breadcrumbs              //面包屑
|-- carousel                 //轮播
|-- close                    //关闭按钮
|-- type                     //排版相关
|-- code                     //代码相关

 bootstrap            bootstrap/mixins

以上是bootstrap目录核心

一. mixins:

|-- Utilities                     //各种工具混入
    |-- hide-text                 //隐藏text
    |-- opacity                   //设置透明度
    |-- image                     //响应式图片混入、视网膜混入（根据屏幕显示不同分辨率图片）
    |-- labels                    //label变化混入(移动到labels背景会变色，下面出现的“变化”意思相同)  
    |-- reset-filter              //清除ie9以下背景倾斜
    |-- resize                    //使对象变得可调整大小
    |-- responsive-visibility     //响应式可见和不可见（用于responsive-utilityies）
    |-- size                      //设置大小
    |-- tab-focus                 //针对webkit内核添加选中轮廓
    |-- reset-text                //重置text(用于清除各种text属性)
    |-- text-emphasis             //text强调样式
    |-- text-overflow             //text溢出样式
    |-- vendor-prefixes           //增对个浏览器内核为属性添加前缀的混入都在这里

|-- Components                    //针对各组件的混入
    |-- alerts                    //alerts变化混入
    |-- buttons                   //按钮的变化、设置按钮大小
    |-- panels                    //panel变化
    |-- pagination                //pagination设置大小
    |-- list-group                //list-group-item变化
    |-- nav-divider               //水平分隔（用于dropdowns和nav list）
    |-- forms                     //定义了form验证时的各种样式（错误，警告等）
    |-- progress-bar              //progress-bar变化
    |-- table-row                 //table-row变化

|-- Skins                         //皮肤混入（主要是修改bootstrap的主题皮肤）
    |-- background-variant        //背景变化
    |-- border-radius             //border圆角
    |-- gradients                 //渐变效果

|-- Layout                        //布局相关
    |-- clearfix                  //清除浮动
    |-- center-block              //block居中
    |-- nav-vertical-align        //nav垂直排列的间隔 
    |-- grid-framework            //用于构建网格系统的框架（供下面的grid调用） 
    |-- grid                      //构建网格系统

二. Utility:

utilities

Bootstrap提供的可以直接使用的工具class

|-- Floats                   //浮动相关
    |-- clearfix             //清除浮动
    |-- center-block         //block元素居中
    |-- pull-right           //右浮动
    |-- pull-left            //左浮动
|-- Toggling content          //切换内容相关
    |-- hide                 //移除
    |-- show                 //出现
    |-- invisible            //不可见
    |-- text-hide            //隐藏文字
    |-- hidden               //同hide
|-- For Affix plugin         //附加导航插件
    |-- affix                 //fix定位

responsive-utilities

响应式布局相关工具class

这部分分两类，一类是根据xs、sm、md、lg四种大小的屏幕控制页面元素的显示和隐藏的class；另一类是控制打印时页面元素是否被打印或隐藏的class；