Bootrtrap经常被用作css框架，它有很多的使用价值和学习价值。当其本身的样式并不符合自身的开发需求时，在熟悉其源码的情况下，我们可以对其进行改装，整理成适合自己使用的框架。又或者是通过分析其源码的编写，学习其css的结构层次以及对sass的灵活使用。

下载了BootStrap4的源码之后，可以找到bootstrap.scss这个文件，该文件为总文件，下面将简要说明一下这个文件的结构：

// Core variables and mixins

@import "variables"; //存放全局用到的变量，其中包含了下面具体样式要用到的变量（颜色、字体等）以及用于全局判断(设置)的变量

@import "mixins"; //存放Mixin以及function，类似于公用的方法

@import "custom"; //存放用户自定义的样式，可以在此覆盖上面变量、方法

 

// Reset and dependencies

@import "normalize"; //样式重置，类似于reset

@import "print"; //设置打印的样式，例如把阴影去掉，a元素显示下划线，调整段落换行等

 

// Core CSS

@import "reboot"; //样式重置，这是BootStrap4的新特性，在normalize之上添加或是覆盖一些规则

@import "type"; //排版样式，包括标题、段落、各种类型的文本的样式

@import "images"; //响应图片样式，BootStrap2和4才有，确保图像不超出父亲的图像，此样式可能会和其他第三方小部件产生冲突，谨慎使用

@import "code"; //代码样式

@import "grid"; //栅格样式，实现响应式、移动设备优先的流式栅格系统

@import "tables"; //表格样式

@import "forms"; //表单样式

@import "buttons"; //按钮样式

 

// Components

@import "transitions"; //过度效果插件，BootStrap4新特性

@import "dropdown"; //下拉菜单组件

@import "button-group"; //按钮组

@import "input-group"; //输入框组

@import "custom-forms"; //自定义表单

@import "nav"; //导航

@import "navbar"; //导航条

@import "card"; //卡片(替代了BootStrap3的面板、well、缩略图)

@import "breadcrumb"; //面包屑（有层次结构的导航栏）

@import "pagination"; //分页

@import "badge"; //徽章，对标签的补充提示，一般用于展示新的或未读的信息条目

@import "jumbotron"; //巨幕，能延伸至整个浏览器视口来展示网站上的关键内容

@import "alert"; //提示框

@import "progress"; //进度条

@import "media"; //多媒体，一般用于编排文字与图片的混合展示

@import "list-group"; //列表组

@import "responsive-embed"; //相应嵌，具有响应式特性的嵌入内容，创建一个固定的比例，使得嵌入内容根据比例自动适配，一般用于视频的嵌入

@import "close"; //弹窗关闭按钮的样式补充

 

// Components w/ JavaScript

@import "modal"; //模态框（弹窗）

@import "tooltip"; //提示冒泡，例如鼠标在按钮上悬浮是的提示框，一般为单行的文字

@import "popover"; //弹出框，和上面的提示冒泡类似，这个弹出框有标题，内容可为多行

@import "carousel"; //轮播图

 

// Utility classes

@import "utilities"; //工具集，例如各种大小的外边框，字体对齐，清除浮动等

根据自身需求，在对应的scss文件上进行修改也是很方便的，修改后将这个scss文件编译成压缩的css文件。

在接下来的文章中，将对Bootstrap框架中一些比较重要的模块以及值得学习的sass使用方式进行分析。