二、bootstrap v3是如何组织样式结构的？

v3.3.7版本样式结构解析

目前bootstrap用得较多的是v2、v3、v4，3个版本。其中v3的v3.3.7版本是一个比较成熟的版本，也是bootstrap中文网所翻译的（不过v3版本最新的是v3.4.1），方便大家进行查阅。

step1 下载源码

bootstrap中文网：https://v3.bootcss.com/

Ps: 不过个人还是更推荐大家看官网，翻译过来的始终更新不及时。

我们进入下载页面后，可以看到下面页面，我们直接下载sass源码，如下图。

step2 源码结构

解压文件后可以看到以下文件夹结构，经过简单的查看，可以发现assets里边就是bootstrap的源码了。

我们直接打开样式主sass文件_bootstrap.scss，可以清晰的看到bootstrap的sass结构如下。

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT 
 * (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
……

// Core CSS
@import "bootstrap/scaffolding";
……

// Components
@import "bootstrap/alerts";
……

// Components w/ JavaScript