框架目录:
结构说明所有样式规则的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;