rails 使用bootstrap及bootswatch
来源:互联网 发布:亦鸥 知乎 编辑:程序博客网 时间:2024/06/07 22:21
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;},就可以显示绿色的模态对话框。
- rails 使用bootstrap及bootswatch
- rails 使用bootstrap及bootswatch
- [ruby]Rails中使用bootstrap
- rails 直接使用bootstrap模板
- Rails 5中使用Bootstrap
- ruby on rails 如何使用gem "twitter-bootstrap-rails"
- Rails中Bootstrap的安装和使用
- Rails中Bootstrap的安装和使用
- Ruby On Rails使用Bootstrap框架
- rails twitter-bootstrap-rails
- rails twitter-bootstrap-rails
- rails 4.0.0 rails bootstrap
- 阅读了rails中使用bootstrap相关文章的小结
- rails + bootstrap 做项目使用的一些插件
- Ruby——在Rails上使用Bootstrap
- rails + bootstrap 做项目使用的一些插件
- backbone-bootstrap-rails
- intall twitter-bootstrap-rails
- Linux rpm 命令参数使用详解[介绍和应用]
- EMV/PBOC之 9f5d和9f79的区别
- shell 记录apache status并自动更新到数据库
- 投资感悟:不折腾
- 从Xen源代码中的compiler.h看GNU C编译器的扩展
- rails 使用bootstrap及bootswatch
- 暑假的计划
- System.Diagnostics.Process.Start的妙用
- php 面向对象 013.7.6
- 大学ACM/ICPC总结(陈志源的日志)
- 学习使用Jmeter做压力测试(一)--压力测试基本概念
- CF E. Axis Walking DP 唉。。看了别的神牛的代码忽然发现差距好大
- python爬糗百
- openssl多线程实例