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

原创 2016年08月29日 15:28:53

解析环境

前置学习

核心文件组织结构

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     //响应式布局相关

编译BoostrapV3 Sass版本的源码(涉及Ruby、Sass、Compass、Watcher的配置)

前言之前已经完成了编译BoostrapV3 Less版本源码编译,按照官方的流程走可以了。由于V4版本是基于Sass的,因此有必要提前做好技术储备,尝试一下BoostrapV3 Sass版本源码的编译...

BootStrap入门教程 (二)

上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统。       基于手脚架(S...

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

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

Bootstrap-Sass 源码解析三:Mixins

mixin在sass的语法中是混入的意思,可以传递参数,类似与函数的意思。这里的mixins.scss自然就是定义了一系列混入库,供bootstrap各组件样式调用。下面根据mixinx.less为目...

libevent源码分析之源代码文件组织

——libevent源代码文件组织 1 前言 详细分析源代码之前,如果能对其代码文件的基本结构有个大概的认识和分类,对于代码的分析将是大有裨益的。本节内容不多,我想并不是说它不重要! 2 源...

c头文件组织

  • 2013年08月26日 17:14
  • 299KB
  • 下载

腾讯组织架构大变革 形成六大事业群

2012年05月19日 00:09 来源:中国新闻网 参与互动(0)   中新网深圳5月18日电(记者 郑小红)国内最大互联网公司腾讯18日宣布,将进行公司组织架构调整。   记者从腾讯公司内部了...

Android电源管理文件组织结构

  • 2015年07月14日 11:38
  • 366KB
  • 下载

浅谈VC++工程的文件组织 .docx

  • 2012年09月27日 08:06
  • 54KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap-Sass 源码解析一:文件组织架构
举报原因:
原因补充:

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