GX博客

Bootstrap 有以 Sass 的 SCSS 语法构建的源码，可以在这里下载。

Sass 样式的目录结构

bootstrap-sass-3.3.7/
└── assets/
    ├── fonts/
    ├── images/
    ├── javascripts/
    └── stylesheets/
          ├── bootstrap/
          ├── _bootstrap.scss
          ├── _bootstrap-compass.scss
          ├── _bootstrap-mincer.scss
          └── _bootstrap-sprockets.scss

stylesheets 文件夹中包含它的核心和组件样式。一个核心功能或者一个组件存放在单个 .scss 文件中，并以 _ 开头，让 Sass 编译器不要单独编译该文件。其中的 _bootstrap-compass.scss、_bootstrap-mincer.scss、_bootstrap-sprockets.scss 是为某些模板引擎和打包工具辅设的。当你使用 Compass、ejs 或 sprockets 集成 Bootstrap 时，应详细了解它们所做的事情。

样式入口主文件 _bootstrap.scss

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

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

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

// Components
@import "bootstrap/component-animations";
...

// Components with JavaScript
@import "bootstrap/modals";
...

// Utility classes
@import "bootstrap/utilities";
...

它依次由以下部分组成：

• 核心变量和 mixins
• 重置样式和依赖样式（字体图标样式）
• 核心样式（包括栅格系统样式）
• 各组件样式
• 带有 Javascript 交互的组件样式
• 一些实用样式

在了解清楚 Bootstrap 样式的构建方式后，可以根据自己的 Sass 项目实际需要 @import 必要的 Bootstrap 样式。还可根据自己的 UI 风格，调整对应组件的样式，快速构建用户界面。

当然 Bootstrap 官网也提供定制功能，包括样式和所需的 Javascript 文件，但引用源文件灵活性会更好。