rails 使用bootstrap及bootswatch

1.简介

       Twitter-bootstrap是一个功能强大的前端web框架,使用它可以快速地开发出漂亮的web UI。而thomas-mcdonald/bootstrap-sass是rails sass版本的bootstrap。其他类似的gem还有jlong/sass-twitter-bootstrapmetaskills/less-rails-bootstrapseyhunak/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;},就可以显示绿色的模态对话框。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值