您的位置:首页 > Web前端 > BootStrap

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

2016-08-29 15:28 316 查看

解析环境

“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     //响应式布局相关
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息