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可以通过asset pipeline轻松嵌入到Rails中。

在你的Gemfile中，需要添加bootstrap-sassgem，并确保存在sass-railsgem - 它是默认添加到新Rails应用程序中的。

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

bundle install并重新启动你的服务器，使文件可以通过pipeline提供。

在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与Rails

当在Rails中使用bootstrap-sass Bower包而不是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无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（NB .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。