rails 使用bootstrap及bootswatch

Rails中集成Twitter Bootstrap与Bootswatch

最新推荐文章于 2025-08-24 19:39:47 发布

原创最新推荐文章于 2025-08-24 19:39:47 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

rails 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在Rails应用中集成Twitter Bootstrap及Bootswatch主题，通过使用特定的Gem实现美观的Web UI，并解决可能出现的问题。

1.简介

Twitter-bootstrap是一个功能强大的前端web框架，使用它可以快速地开发出漂亮的web UI。而thomas-mcdonald/bootstrap-sass是rails sass版本的bootstrap。其他类似的gem还有jlong/sass-twitter-bootstrap，metaskills/less-rails-bootstrap，seyhunak/twitter-bootstrap-rails，前一个也是sass版本，后两个是less版本的。另外，jasny-twitter-bootstrap是bootstrap的一个很好的拓展，添加了文件上传等漂亮的插件。

而Bootswatch是基于bootstrap的主题资源站，提供了很多收费和免费的主题，利用这些现成的主题能够在bootstrap的基础上更进一步加快网站开发，制作出精美的页面。

2.安装twitter-bootstrap

这里推荐使用tomas-macdonald/bootstrap-sass。首先在gemfile中添加：

gem 'sass-rails', '~> 3.2'
gem 'bootstrap-sass', '~> 2.3.2.0'

然后执行bundle install安装需要的gem。

在app/assets/javascripts/application.js文件中添加需要的javascript引用：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

将app/assets/stylesheets/application.css重命名为app/assets/stylesheets/application.css.scss。

现在可以调整app/views/layouts/application.html.erb模板布局，然后就可以浏览twitter-bootstrap网站按照example美化自己的rails站点了。

3.安装bootswatch主题

如果还想利用bootswatch的主题，就可以使用maxim/bootswatch-rails来方便地继承bootswatch的免费主题。

在gemfile中添加：

gem 'bootswatch-rails'

然后执行bundle install安装该gem。在application.css.scss文件中require语句后添加：

// 示例：使用bootswatch免费主题： 'Cerulean' bootswatch
// 首先导入变量
@import "bootswatch/cerulean/variables";

// 导入bootstrap
@import "bootstrap";

// 修改bootstrapbody边距
body { padding-top: 60px; }

// 导入bootstrap Responsive styles
@import "bootstrap-responsive";

// 最后导入需要的bootswatch主题
@import "bootswatch/cerulean/bootswatch";

// 你还可以在base.css.scss文件中添加更多自定义设置
@import "base";

你需要在application.css.scss文件相同目录下创建base.css.scss文件，如果需要就在其中添加更多自定义选择。

4.Bug fix

在rails中使用bootswatch可能导致某些css设置失效，通常的可能就是在/app/assets/stylesheets目录下，某些css设置覆盖了bootswatch的配置。比如，按照上述方法配置的bootswatch主题就有可能无法显示主题背景色（body背景色始终是白色）。而rails自动产生的scaffolds.css.sass文件中就覆盖了body的背景色配置，故而导致该bug。所以删除scaffolds.css.scss中除.field_with_errors 和 #error_explanation 其余内容即可。

另外，使用一些其他的rails gem也可能无法使用bootswatch的主题，比如jQuery-modal-rails，它是一个简单的模态对话框gem，但它的对话框就是白底，无法使用bootswatch的主题配置，此时手工配置一下即可，如在需要的页面的.css.sass文件中配置.modal {background-color: green;}，就可以显示绿色的模态对话框。