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

原创 2016年08月30日 10:48:40

上节主要看了下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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Ionic学习笔记二 Scss配置

关于scss安装方式,参见文章 : http://blog.csdn.net/xundh/article/details/47605515scss位置ionic/scss/ionic.app.scs...
  • xundh
  • xundh
  • 2015-08-15 15:05
  • 5361

Sass学习之快速上手bootstrap-sass

Sass学习之快速上手bootstrap-sass

jquery3.0源码解读(四)Callbacks

在js开发中,由于没有多线程,经常会遇到回调这个概念,比如说,在 ready 函数中注册回调函数,注册元素的事件处理等等。在比较复杂的场景下,当一个事件发生的时候,可能需要同时执行多个回调方法,可以直...

Bootstrap排版

标题(一) Bootstrap和普通的HTML页面一样,定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所...

jquery3.0源码解读(一)Init

目的督促自己耐心完整看完jquery源码,学习jquery书写思想,并留下笔记供他人参考。环境jquery源码地址:https://github.com/jquery/jquery/tree/3.0....

jquery3.0源码解读(三)Selector

第一节将jQuery初始化的时候,我们只是简单讲了下jQuery的构造方式,并没有分析jQuery对象到底是如何具体构造出来的。使用过jquery的同学一定知道,jquery的一个最大的用的最多的特性...

jquery3.0源码解读(二)Extend

上一节我们打开了/src/core.js文件,但是仅仅看了它的jQuery对象的赋值。这节我们来仔细分析core.js文件中的一个重要内容——extend。如果,简单翻阅过jquery源码的话,你会发...

SASS(SCSS)学习及其在ionic中的应用

1) Scss简介: 官网:http://sass-lang.com/ 学习网站:http://www.w3cplus.com/sassguide/ CSS with superpowers Sas...

Bootstrap-sass<1> 安装与基本结构

最近项目都在用bootstrap布局,每次改动和文件组织总感觉不是那么清晰明了,所以借着该项目,重新整理一下sass,在网上发现有bootstrap-sass,已经集成好的一个bootstrap的sa...

bootstrap-variables.scss

  • 2015-04-07 03:24
  • 27KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)