[RoR小学生] - Rails 4中使用Bootstrap 3

在阅读Ruby on Rails Tutorail的时候知道使用bootstra-sass这个gem可以自动引入bootstrap这个非常炫的UI框架。但是有了之前对安装mysql2 gem的痛苦经历,我迫切的需要一种我能自己掌控的方式来安装我需要的第三方组件。我想是因为我目前对Ruby & Rails中gem的运作方式和能提供的功能不熟悉的原因,所以我相信我之后的工作中还是会切换到由gem来帮我完成第三方组件的管理。

好了,废话多了,来看看如何在rails 4项目中引入Bootstrap 3,参考的是一篇Blog,步骤还蛮简单
  1. 下载Bootstrap的分发包, 这个分发包可以到http://v3.bootcss.com上去下载最新的,这个网站是Bootstrap的官方中文网站。将下载好的分发包解压备用。
  2. 创建一个新的rails 4项目,执行下面3个复制拷贝
    • 复制bootstrap.min.css到/vendor/assets/stylesheets
    • 复制bootstrap.min.js到/vendor/assets/javascripts
    • 复制fonts目录及其内容到/vendor/assets目录
  3. 编辑/app/assets/stylesheets/application.css,添加*= require bootstrap.min
  4. 编辑/app/assets/javascripts/application.js, 添加 //= require bootstrap.min
*= require_self
*= require bootstrap.min
*= require_tree .
*/

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
 
5. 添加下面代码到config/application.rb
 
config.assets.paths << "#{Rails}/vendor/assets/fonts"
 
6. 在命令行运行
rake assets:precompile RAILS_ENV=development
 
 
7. 用文本编辑器打开bootsrap.min.css (如果使用bootstrap.css 就打开这个, 找到@font-face
@font-face { 
     font-family: 'Glyphicons Halflings';
     src: url('../fonts/glyphicons-halflings-regular.eot'); 
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halfli          ngs-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); 
}
 
修改为
@font-face { 
     font-family: 'Glyphicons Halflings';
     src: url('/assets/glyphicons-halflings-regular.eot'); 
     src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halfli          ngs-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); 
}
 
 
这个方法目前测试在Chrome下没有异常,但是IE还是不可用

相关推荐