# Bootstrap for Sass
[![Build Status](https://secure.travis-ci.org/twbs/bootstrap-sass.png?branch=master)](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等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
基于HTML实现的Gosloo精品大气雪山旅游景区整站(含HTML源代码+使用说明+毕业设计).zip (483个子文件)
bundle 129B
gosloo.css 86KB
animate.css 56KB
settings.css 41KB
settings-ie8.css 26KB
font-awesome.css 21KB
video-js.css 21KB
font-awesome.min.css 17KB
style.css 16KB
video-js.min.css 11KB
qunit.css 4KB
.DS_Store 15KB
.DS_Store 6KB
.DS_Store 6KB
.editorconfig 240B
fontawesome-webfont.eot 37KB
glyphicons-halflings-regular.eot 20KB
revicons.eot 12KB
vjs.eot 3KB
application.html.erb 311B
_variables.scss.erb 250B
sass_head.gemfile 239B
sass_3_2.gemfile 199B
Gemfile 160B
Gemfile 88B
bootstrap-sass.gemspec 1KB
loader2.gif 3KB
loader.gif 2KB
.gitignore 199B
.gitignore 41B
.gitignore 10B
index.html 82KB
about.html 37KB
detail.html 26KB
blog.html 23KB
portfolio.html 20KB
pricing.html 16KB
index.html 13KB
contact.html 13KB
index.html 8KB
fixed.html 7KB
2011-06-13-hash-history.html 6KB
2012-01-03-masonry-column-shift.html 6KB
index.html 6KB
2011-03-27-flash.html 6KB
2011-12-05-big-graph.html 5KB
fixed-nojs-fix.html 5KB
2012-08-11-combo-sort-history.html 5KB
2011-08-23-unclickable-filtered.html 5KB
2012-02-07-onlayout.html 5KB
bbq.html 5KB
bbq-fixed.html 5KB
fixed-fix.html 4KB
2011-10-19-callbacks.html 4KB
fixed-nojs.html 4KB
2011-08-19-right-to-left.html 4KB
2011-05-18-centered-masonry.html 4KB
2011-07-14-masonry-gutters.html 4KB
2011-07-07-masonry-corner-stamp.html 4KB
2011-10-18-spine-align.html 4KB
2011-05-24-elements-complete-test.html 4KB
2011-09-30-fluid-responsive.html 3KB
2011-05-22-category-rows.html 3KB
2011-03-29-combination-filters.html 3KB
2011-01-11-images.html 3KB
default.html 3KB
2011-12-22-removing.html 2KB
2011-05-31-tiny-text.html 2KB
2011-05-13-jquery-animation.html 2KB
2011-01-02-adding-items.html 2KB
2011-04-26-item-position-data.html 2KB
2011-01-02-infinite-scroll.html 2KB
elements-demo-foot.html 2KB
2010-12-30-sorting.html 1KB
2010-12-29-layout-modes.html 1KB
404.html 1KB
422.html 1KB
500.html 1KB
2011-03-27-destroy.html 1KB
2010-12-31-relayout.html 1KB
sort-buttons.html 1KB
filter-buttons.html 929B
2010-12-30-filtering.html 904B
layout-options.html 904B
elements-demo-head.html 740B
2011-03-27-no-items.html 706B
2010-12-12-basic.html 636B
inf-scroll-page.html 513B
element-partial.html 488B
2010-12-16-elements-partial.html 352B
2010-12-13-elements-complete.html 351B
2010-01-01-index.html 275B
2011-01-01-6.html 146B
2011-01-01-4.html 145B
2011-01-01-5.html 145B
2011-01-01-2.html 145B
2011-01-01-3.html 145B
org-buy-button.html 111B
developer-buy-button.html 108B
favicon.ico 0B
共 483 条
- 1
- 2
- 3
- 4
- 5
资源评论
CrMylive.
- 粉丝: 1w+
- 资源: 4万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C183579-123578-c1235789.jpg
- Qt5.14 绘画板 Qt Creator C++项目
- python实现Excel表格合并
- Java实现读取Excel批量发送邮件.zip
- 【java毕业设计】商城后台管理系统源码(springboot+vue+mysql+说明文档).zip
- 【java毕业设计】开发停车位管理系统(调用百度地图API)源码(springboot+vue+mysql+说明文档).zip
- 星耀软件库(升级版).apk.1
- 基于Django后端和Vue前端的多语言购物车项目设计源码
- 基于Python与Vue的浮光在线教育平台源码设计
- 31129647070291Eclipson MXS R.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功