# Bootstrap for Sass
[](http://travis-ci.org/twbs/bootstrap-sass)
`bootstrap-sass` is a Sass-powered version of [Bootstrap](http://github.com/twbs/bootstrap), ready to drop right into your Sass powered applications.
## Installation
Please see the appropriate guide for your environment of choice:
### a. Rails
`bootstrap-sass` is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the `bootstrap-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
```ruby
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.0'
```
`bundle install` and restart your server to make the files available through the pipeline.
### b. Compass (no Rails)
Install the gem
```sh
gem install bootstrap-sass
```
If you have an existing Compass project:
```ruby
# config.rb:
require 'bootstrap-sass'
```
```console
bundle exec compass install bootstrap
```
If you are creating a new Compass project, you can generate it with bootstrap-sass support:
```console
bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
```
This will create a new Compass project with the following files in it:
* [_variables.scss](/templates/project/_variables.scss.erb) - all of bootstrap variables (override them here).
* [styles.scss](/templates/project/styles.scss) - main project SCSS file, import `variables` and `bootstrap`.
### c. Sass-only (no Compass, nor Rails)
Require the gem, and load paths and Sass helpers will be configured automatically:
```ruby
require 'bootstrap-sass'
```
Using bootstrap-sass as a Bower package is still being tested. You can install it with:
```bash
bower install 'git://github.com/twbs/bootstrap-sass.git#v3.1.0'
```
#### JS and fonts
If you are using Rails or Sprockets, see Usage.
If none of Rails/Sprockets/Compass were detected the fonts will be referenced as:
```sass
"#{$icon-font-path}/#{$icon-font-name}.eot"
```
`$icon-font-path` defaults to `bootstrap/`.
When not using an asset pipeline, you have to copy fonts and javascripts from the gem.
```bash
mkdir public/fonts
cp -r $(bundle show bootstrap-sass)/vendor/assets/fonts/ public/fonts/
mkdir public/javascripts
cp -r $(bundle show bootstrap-sass)/vendor/assets/javascripts/ public/javascripts/
```
In ruby you can get the assets' location in the filesystem like this:
```ruby
Bootstrap.stylesheets_path
Bootstrap.fonts_path
Bootstrap.javascripts_path
```
## Usage
### Sass
Import Bootstrap into a Sass file (for example, `application.css.scss`) to get all of Bootstrap's styles, mixins and variables!
We recommend against using `//= require` directives, since none of your other stylesheets will be [able to access][antirequire] the Bootstrap mixins or variables.
```scss
@import "bootstrap";
```
You can also include optional bootstrap theme:
```scss
@import "bootstrap/theme";
```
The full list of bootstrap variables can be found [here](http://getbootstrap.com/customize/#less-variables). You can override these by simply redefining the variable before the `@import` directive, e.g.:
```scss
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
@import "bootstrap";
```
You can also import components explicitly. To start with a full list of modules copy this file from the gem:
```bash
# copy and prepend "bootstrap/" to the @import paths:
sed 's/@import "/@import "bootstrap\//' \
$(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap/bootstrap.scss > \
app/assets/stylesheets/bootstrap-custom.scss
```
Comment out components you do not want from `bootstrap-custom`.
In `application.sass`, replace `@import 'bootstrap'` with:
```scss
@import 'bootstrap-custom';
```
### Javascript
We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately),
put this in your Javascript manifest (usually in `application.js`) to load the files in the [correct order](/vendor/assets/javascripts/bootstrap.js):
```js
// Loads all Bootstrap javascripts
//= require bootstrap
```
You can also load individual modules, provided you also require any dependencies. You can check dependencies in the [Bootstrap JS documentation][jsdocs].
```js
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
```
---
## Development and Contributing
If you'd like to help with the development of bootstrap-sass itself, read this section.
### Upstream Converter
Keeping bootstrap-sass in sync with upstream changes from Bootstrap used to be an error prone and time consuming manual process. With Bootstrap 3 we have introduced a converter that automates this.
**Note: if you're just looking to *use* Bootstrap 3, see the [installation](#installation) section above.**
Upstream changes to the Bootstrap project can now be pulled in using the `convert` rake task.
Here's an example run that would pull down the master branch from the main [twbs/bootstrap](https://github.com/twbs/bootstrap) repo:
rake convert
This will convert the latest LESS to SASS and update to the latest JS.
To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
The latest converter script is located [here][converter] and does the following:
* Converts upstream bootstrap LESS files to its matching SCSS file.
* Copies all upstream JavaScript into `vendor/assets/javascripts/bootstrap`
* Generates a javascript manifest at `vendor/assets/javascripts/bootstrap.js`
* Copies all upstream font files into `vendor/assets/fonts/bootstrap`
* Sets `Bootstrap::BOOTSTRAP_SHA` in [version.rb][version] to the branch sha.
This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output).
Please submit GitHub issues tagged with `conversion`.
## Credits
bootstrap-sass has a number of major contributors:
<!-- feel free to make these link wherever you wish -->
* [Thomas McDonald](https://twitter.com/thomasmcdonald_)
* [Tristan Harward](http://www.trisweb.com)
* Peter Gumeson
* [Gleb Mazovetskiy](https://github.com/glebm)
and a [significant number of other contributors][contrib].
## You're in good company
bootstrap-sass is used to build some awesome projects all over the web, including
[Diaspora](http://diasporaproject.org/), [rails_admin](https://github.com/sferik/rails_admin),
Michael Hartl's [Rails Tutorial](http://railstutorial.org/), [gitlabhq](http://gitlabhq.com/) and
[kandan](http://kandanapp.com/).
[converter]: https://github.com/twbs/bootstrap-sass/blob/3/tasks/converter.rb
[version]: https://github.com/twbs/bootstrap-sass/blob/3/lib/bootstrap-sass/version.rb
[contrib]: https://github.com/twbs/bootstrap-sass/graphs/contributors
[antirequire]: https://github.com/twbs/bootstrap-sass/issues/79#issuecomment-4428595
[jsdocs]: http://getbootstrap.com/javascript/#transitions
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论






















收起资源包目录





































































































共 483 条
- 1
- 2
- 3
- 4
- 5
资源评论


CrMylive.
- 粉丝: 1w+
- 资源: 4万+
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 认知方式与空间智能.docx
- 计算机等级考试二级WPSOffice练习系统V1.5
- PHP开发IDE工具PHPStorm配置文件-2025年版
- 基于Resnet与多头自注意力机制的信号识别技术研究:RadioML2018数据集的分类与性能分析,基于Resnet与多头自注意力机制的信号识别系统:性能优化与实验分析报告,多头自注意力机制识别信号
- H3C-S5130-E整本手册.zip
- FPGA运动目标检测仿真代码-基于正点原子达芬奇硬件与Vivado quartus软件的ov5640配置及HDMI仿真实现,FPGA运动目标检测仿真代码-基于正点原子达芬奇硬件与Vivado qu
- 信噪比估计算法与特征值、奇异值分解技术的融合应用及Matlab实现方法,基于特征值与奇异值分解的信噪比估计算法研究及Matlab实现方法,不同信号的信噪比估计算法 特征值分解、奇异值分解算法 MDL最
- CATIA DMU转向系统运动仿真:麦弗逊悬架下的独立车轮转向机制探究,CATIA DMU转向系统运动仿真:麦弗逊悬架下的独立车轮转向功能探究,CATIA DMU转向系统运动仿真(可编辑,无参数) 悬
- 数字音频接口光电转换模块
- 星禾AI-DeepSeek新手必看!DeepSeek个人应用全攻略|最全的 DeepSeek 使用指南(建议收藏)
- 数字音频光电转换模块文档
- c++小病毒(时间类型): 会从2025/2/17为起点一直增加时间到8007年
- 2025年及以后的主要战略技术趋势和重大战略预测报告
- 内存池的设计与实现代码之边界标识法
- 基于FVC2002数据集的MATLAB指纹识别系统研究与应用,基于MATLAB的FVC2002指纹数据集识别系统研究与应用,基于MATLAB的指纹识别系统 数据集为FVC2002指纹数据集 ,基于MA
- 配电网光伏储能双层优化配置模型:基于粒子群算法求解选址定容与运行调度联合优化,配电网光伏储能双层优化配置模型:基于粒子群算法的运行-规划联合求解,IEEE33节点案例分析,配电网光伏储能双层优化配置模
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
