README

bootstrap-sass 是 Bootstrap 3 的 Sass 版本，可直接嵌入到您的 Sass 应用程序中。

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

安装

请参阅您选择的相应指南

• Ruby on Rails.
• Bower.
• npm / Node.js.

a. Ruby on Rails

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

在您的 Gemfile 中，您需要添加 bootstrap-sass 珠宝，并确保存在 sass-rails 珠宝 - 它默认添加到新的 Rails 应用程序中。

gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

运行 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 混合或变量。

Bootstrap JavaScript 依赖于 jQuery。如果您正在使用 Rails 5.1+，请将 jquery-rails 珠宝添加到您的 Gemfile

gem 'jquery-rails'

$ bundle install

在 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

当使用 bootstrap-sass Bower 软件包 而不是 Rails 中的宝石时，请在 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. 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

请参考这个示例manifest.js，了解mincer的使用。

c. 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）。

当使用sassc-rails宝石时，Ruby会自动设置精度。当使用带有Ruby的npm或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。