[Guide] Rails 使用 Bootstrap 套版步驟

2016-04-16 少於 1 分鐘閱讀

選定想要的模板

點開後會看到你要的套版畫面，請於畫面空白處點右鍵選擇“檢視網頁原始碼”
請看<head>...</head>區塊中，會有很多CSS的項目
先確認哪些是可以用gem加入的，這些就不用手動加入，等等用gem加就好
- css/bootstrap.min.css => gem ‘bootstrap-sass’
- font-awesome/css/font-awesome.min.css => gem ‘font-awesome’
再看一下哪些是要手動加入
- css/freelancer.css
接下來拉到最下方，會有很多javascript項目
同樣觀察哪些是可以用gem加入的
- js/jquery => gem ‘jquery-rails’
- js/bootstrap.min.js => gem ‘bootstrap-sass’
哪些是必須手動加入的
- query.easing.min.js
- classic.js
- cbpAnimateHeader.js
- jqBootstrapValidation.js
- contact_me.js
- freelancer.js

確認好需要加入的項目後，接下來就從 gem 開始裝起
- gem ‘jquery-rails’ => 這個 rails 預設已經裝好了所以不用裝
- gem ‘bootstrap-sass’ => https://github.com/twbs/bootstrap-sass
- gem ‘font-awesome’ => https://github.com/FortAwesome/Font-Awesome
安裝好 gem 後，手動將 css 的檔案放入 app/assets/stylesheets中
- freelancer.css
若匯入的項目是 scss，請到 app/assets/stylesheets/application.scss 增加下面匯入 CSS 語法
- @import ‘freelancer’
手動將 javascript 檔案放入 app/assets/javascripts 中
- query.easing.min.js
- classic.js
- cbpAnimateHeader.js
- jqBootstrapValidation.js
- contact_me.js
- freelancer.js