Bootstrap-Sass 源码解析一:文件组织架构
Posted 小马xml
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap-Sass 源码解析一:文件组织架构相关的知识,希望对你有一定的参考价值。
解析环境
- “bootstrap-sass”: “~3.3.5”
- 项目地址:https://github.com/twbs/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 源码解析二:Variables.scss
Bootstrap-Sass 源码解析二:Variables.scss