[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还是不可用