关闭

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

标签: bootstrap源码前端sassoocss
788人阅读 评论(0) 收藏 举报
分类:

上节主要看了下bootstrap这个文件的内容,对boostrap的整个组织架构有了一个全局上的了解。下面我们针对几个主要文件进行解析。

首先是Variables.scss。

作用

作用很直观啊,就是对整个bootstrap,进行了常量的提取,类似于配置项。在我们对bootstrap进行定制化开发时,我们只需要修改其中的参数就可以完成相应的修改,十分方便快捷。

内容

总体来看,个人认为就分成两部分,一部分是核心配置项,另一部分是针对每个组件的配置项。没什么难点,直接罗列其组织结构。

核心配置项

|-- 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                     //代码相关

参考理论

看到这里我看到了很多OOCSS,SMACSS,BEM的影子,可能bootstrap在开发的过程中参考了一些相关理论基础。这里附上链接帮助大家理解。

http://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30064次
    • 积分:607
    • 等级:
    • 排名:千里之外
    • 原创:25篇
    • 转载:0篇
    • 译文:5篇
    • 评论:1条
    文章分类
    最新评论