css - 将 bootstrap-theme 集成到 Ruby on Rails 元素中

Question

我买了一个bootstrap主题，

我想知道如何以良好的实践将它集成到我的 Rails 元素中

我是否应该将它的Javascript和css分别转换成coffescript和scss

如果是这样，将这些文件放入 Rails 元素中的相应文件夹中就可以了，对吗？

我的元素基于 Rails 4。

这是我的元素结构

├── app
│   ├── assets
│   ├── controllers
│   ├── helpers
│   ├── mailers
│   ├── models
│   └── views
├── bin
│   ├── bundle
│   ├── rails
│   └── rake
├── config
│   ├── application.rb
│   ├── boot.rb
│   ├── database.yml
│   ├── environment.rb
│   ├── environments
│   ├── initializers
│   ├── locales
│   └── routes.rb
├── public
│   ├── 404.html
│   ├── 422.html
│   ├── 500.html
│   ├── favicon.ico
│   └── robots.txt

这是主题的文件夹结构

它存储css, javascript, fonts, images

├── css
│   ├── animate.min.css
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── font-awesome.min.css
│   ├── prettyPhoto.css
│   ├── rs-settings-ie8.css
│   ├── rs-settings.css
│   └── style.css
├── fonts
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   └── fontawesome-webfont.woff
├── img [23 entries exceeds filelimit, not opening dir]
├── index.html
├── js
│   ├── bootstrap.js
│   ├── bootstrap.min.js
│   ├── custom.js
│   ├── gmaps.js
│   ├── html5shiv.js
│   ├── jquery.arbitrary-anchor.js
│   ├── jquery.js
│   ├── jquery.knob.js
│   ├── jquery.prettyPhoto.js
│   ├── jquery.themepunch.plugins.min.js
│   ├── jquery.themepunch.revolution.min.js
│   ├── respond.min.js
│   └── waypoints.min.js
└── rs-assets [36 entries exceeds filelimit, not opening dir]

Answer 1

我认为我知道一些进行良好实践的方法:

• 'Gang of Four and Composite pattern' - 在单个整体 gem 中组成您的 bootstrap 主题。

• 使用 list 文件解析路径。

要尝试第二种解决方案:

• 将 bootstrap-theme 文件夹放入/app/assets 目录。

• 添加到“/bootstrap-theme/js”文件夹新文件，application.js 内容:

  //= require_tree .
  

• 添加到“/bootstrap-theme/css”文件夹新文件，application.css 内容:

  /*
   *= require_tree .
  */
  

• 包含在/app/assets/javascripts/application.js 中:

  //= require ../bootstrap-theme/js
  

• 包含在/app/assets/stylesheets/application.css 中:

  //= require ../bootstrap-theme/css