[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,步骤还蛮简单
- 下载Bootstrap的分发包, 这个分发包可以到http://v3.bootcss.com上去下载最新的,这个网站是Bootstrap的官方中文网站。将下载好的分发包解压备用。
- 创建一个新的rails 4项目,执行下面3个复制拷贝
- 复制bootstrap.min.css到/vendor/assets/stylesheets
- 复制bootstrap.min.js到/vendor/assets/javascripts
- 复制fonts目录及其内容到/vendor/assets目录
- 编辑/app/assets/stylesheets/application.css,添加*= require bootstrap.min
- 编辑/app/assets/javascripts/application.js, 添加 //= require bootstrap.min
*= require bootstrap.min
*= require_tree .
*/
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
//= 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还是不可用
相关推荐
donghedonghe 2013-05-31
etnahh 2014-07-11
向日葵Solros 2014-07-11
向日葵Solros 2014-07-10
tdeclipse 2011-02-28
pigsmall 2020-11-19
SXIAOYI 2020-09-16
Ladyseven 2020-07-25
whileinsist 2020-06-24
gufudhn 2020-06-12
冰蝶 2020-06-05
LinuxAndroidAI 2020-06-04
supperme 2020-05-28
yaodilu 2020-05-10
e度空间 2020-04-27
云端漂移 2020-04-09
peterwzc 2020-03-17
有心就有方向 2012-09-03