README

bootstrap-sass 是 Bootstrap 3 的 Sass 版本，可以直接应用于您基于 Sass 的应用程序。

这是 Bootstrap 3。如果您使用 Ruby，请使用 Bootstrap Ruby gem；否则请使用 主仓库。

安装

请参阅您选择的相应指南

• Ruby on Rails.
• Compass 不在 Rails 上。
• Bower.
• npm / Node.js.

a. Ruby on Rails

bootstrap-sass 可以轻松地通过资产管道集成到 Rails 中。

在您的 Gemfile 中，您需要添加 bootstrap-sass 钩子，并确保存在 sass-rails 钩子 - 它是新 Rails 应用程序的默认设置。

gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'

运行 bundle install 并重新启动您的服务器，以便通过管道提供文件。

在 app/assets/stylesheets/application.scss 中导入 Bootstrap 样式

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

必须先导入 bootstrap-sprockets，然后才能导入 bootstrap，以便图标字体能够正常工作。

请确保文件具有 .scss 扩展名（或 .sass 用于 Sass 语法）。如果您刚刚生成一个新的 Rails 应用程序，它可能附带一个 .css 文件。如果此文件存在，它将代替 Sass 提供，因此请将其重命名

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

然后，从 Sass 文件中删除所有 *= require_self 和 *= require_tree . 语句。相反，使用 @import 导入 Sass 文件。

不要在 Sass 中使用 *= require，否则您的其他样式表将无法 访问 Bootstrap 混合或变量。

在 app/assets/javascripts/application.js 中导入 Bootstrap JavaScript

//= require jquery
//= require bootstrap-sprockets

bootstrap-sprockets 和 bootstrap 不应同时包含 在 application.js 中。

bootstrap-sprockets 提供单独的 Bootstrap JavaScript 文件（例如 alert.js 或 dropdown.js），而 bootstrap 提供包含所有 Bootstrap JavaScript 的合并文件。

Bower with Rails

当使用 bootstrap-sass Bower 包 替代 Rails 中的 gem 时，请在 config/application.rb 中配置资产

# Bower asset paths
root.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|
  config.sass.load_paths << bower_path
  config.assets.paths << bower_path
end
# Precompile Bootstrap fonts
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff2?)$)
# Minimum Sass number precision required by bootstrap-sass
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

将 application.scss 中的 Bootstrap @import 语句替换为

$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";

将 application.js 中的 Bootstrap require 指令替换为

//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets

Rails 4.x

请确保 sprockets-rails 至少为 v2.1.4。

Rails 3.2.x

bootstrap-sass 与 Rails 3 不兼容。与 Rails 3.2 兼容的 bootstrap-sass 最新版本是 v3.1.1.0。

b. Compass without Rails

安装 gem

$ gem install bootstrap-sass

如果您有一个现有的 Compass 项目

1. 在 config.rb 中要求 bootstrap-sass

   require 'bootstrap-sass'

2. 使用以下方式安装 Bootstrap

   $ bundle exec compass install bootstrap -r bootstrap-sass

如果您正在创建一个新的 Compass 项目，您可以使用 bootstrap-sass 支持生成它

$ bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap

或者，如果您没有使用 Gemfile 为依赖项

$ compass create my-new-project -r bootstrap-sass --using bootstrap

这将创建一个新的 Compass 项目，其中包含以下文件

• styles.sass - 主项目 Sass 文件，导入 Bootstrap 和变量。
• _bootstrap-variables.sass - 所有 Bootstrap 变量，在此处覆盖它们。

一些 bootstrap-sass 混合可能与 Compass 的冲突。如果发生这种情况，更改导入顺序，以便 Compass 混合在后来加载。

c. Bower

bootstrap-sass Bower 包与 node-sass 3.2.0+ 兼容。您可以按以下方式安装它

$ bower install bootstrap-sass

Sass、JS 和所有其他资产位于 assets。

默认情况下，bower.json 的 main 字段只列出主 _bootstrap.scss 和所有静态资产（字体和 JS）。这与默认的资产管理系统（如 wiredep）兼容。

Node.js Mincer

如果您使用 mincer 与 node-sass，导入 Bootstrap 如下所示

在 application.css.ejs.scss（注意 .css.ejs.scss）中

// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";

在 application.js 中

//= require bootstrap-sprockets

有关 mincer 的示例，请参阅此 manifest.js。

d. npm / Node.js

$ npm install bootstrap-sass

配置

Sass

默认情况下，导入所有 Bootstrap。

您还可以显式导入组件。要开始完整的模块列表，请将 _bootstrap.scss 文件复制到您的资产中作为 _bootstrap-custom.scss。然后从 _bootstrap-custom 中注释掉您不想要的组件。在应用 Sass 文件中，将 @import 'bootstrap' 替换为

@import 'bootstrap-custom';

Sass：数字精度

bootstrap-sass 需要 最小 Sass 数字精度 为 8（默认为 5）。

精度会自动为 Rails 和 Compass 设置。当使用 Ruby Sass 编译器独立使用或与 Bower 版本一起使用时，您可以设置它为

::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

Sass：Autoprefixer

Bootstrap 需要使用 Autoprefixer。 Autoprefixer 使用来自 Can I Use 的值添加供应商前缀到 CSS 规则中。

为了匹配 上游 Bootstrap 的浏览器兼容性级别，将 Autoprefixer 的 browsers 选项设置为

[
  "Android 2.3",
  "Android >= 4",
  "Chrome >= 20",
  "Firefox >= 24",
  "Explorer >= 8",
  "iOS >= 6",
  "Opera >= 12",
  "Safari >= 6"
]

JavaScript

assets/javascripts/bootstrap.js 包含所有 Bootstrap 的 JavaScript，按正确的顺序连接。

带有 Sprockets 或 Mincer 的 JavaScript

如果您使用 Sprockets 或 Mincer，则可以使用 bootstrap-sprockets 来加载单个模块

// Load all Bootstrap JavaScript
//= require bootstrap-sprockets

您还可以加载单个模块，前提是您也要求任何依赖项。您可以在 Bootstrap JS 文档 中检查依赖项。

//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown

字体

字体引用如下

"#{$icon-font-path}#{$icon-font-name}.eot"

$icon-font-path 默认为 bootstrap/ 如果使用资产路径助手，否则为 ../fonts/bootstrap/。

当使用 bootstrap-sass 与 Compass、Sprockets 或 Mincer 时，您必须在 Bootstrap 本身之前导入相关的路径助手，例如

@import "bootstrap-compass";
@import "bootstrap";

用法

Sass

将Bootstrap导入到Sass文件中（例如，application.scss），以获取Bootstrap的所有样式、混入和变量！

@import "bootstrap";

您还可以包含可选的Bootstrap主题

@import "bootstrap/theme";

Bootstrap变量的完整列表可以在这里找到。您可以通过重新定义变量来覆盖这些变量，例如，在@import指令之前重新定义变量：

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

Eyeglass

Bootstrap可以作为Eyeglass模块使用。通过NPM安装Bootstrap后，您可以导入Bootstrap库，如下所示：

@import "bootstrap-sass/bootstrap"

或仅导入Bootstrap中所需的某些部分

@import "bootstrap-sass/bootstrap/variables";
@import "bootstrap-sass/bootstrap/mixins";
@import "bootstrap-sass/bootstrap/carousel";

版本

Bootstrap for Sass的版本可能与上游版本的最后一个数字不同，称为PATCH。修补程序版本可能比相应的上游较小版本要早。这种情况发生在我们需要发布Sass特定更改时。

在v3.3.2之前，Bootstrap for Sass的版本曾经反映上游版本，还有一个数字表示Sass特定更改。由于Bower和npm兼容性问题，这种做法已经改变。

上游版本与Bootstrap for Sass版本的对应关系如下

升级时，请始终参考CHANGELOG.md

开发和贡献

如果您想帮助开发bootstrap-sass本身，请阅读本节。

上游转换器

保持bootstrap-sass与Bootstrap上游更改同步曾经是一个容易出错且耗时的手动过程。随着Bootstrap 3的推出，我们引入了一个转换器来自动化此过程。

注意：如果您只是想使用 Bootstrap 3，请参阅上面的安装部分。

现在可以使用convert rake任务将Bootstrap项目的上游更改拉入。

以下是一个示例运行，它会从主twbs/bootstrap仓库拉取master分支

rake convert

这将转换最新的LESS到Sass，并更新到最新的JS。要转换特定的分支或版本，请将分支名称或提交哈希作为第一个任务参数传递

rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]

最新的转换器脚本位于这里，并执行以下操作：

• 将上游Bootstrap LESS文件转换为相应的SCSS文件。
• 将所有上游JavaScript复制到assets/javascripts/bootstrap，一个位于assets/javascripts/bootstrap-sprockets.js的Sprockets清单和一个位于assets/javascripts/bootstrap.js的连接。
• 将所有上游字体文件复制到assets/fonts/bootstrap。
• 在version.rb中设置Bootstrap::BOOTSTRAP_SHA为分支sha。

此转换器完全将原始LESS转换为SCSS。转换是自动的，但需要对某些转换提供说明（请参阅转换输出）。请提交标记为conversion的GitHub问题。

致谢

bootstrap-sass有许多主要贡献者

• Thomas McDonald
• Tristan Harward
• Peter Gumeson
• Gleb Mazovetskiy

以及其他许多贡献者。

您并不孤单

bootstrap-sass被用于构建网络上的一些很棒的项目，包括Diaspora、rails_admin、Michael Hartl的Rails教程、gitlabhq和kandan。