RoR week4 一步一步玩rails+bootstrap









step1: 
rails new MyLibrary

step2:
cd MyLibrary

step3:
參考網址如下
編輯 Gemfile
加上這一行
gem 'bootstrap-sass'

step4:
存擋後打指令
bundle install

step5:
 去 app/assets/stylesheets/
 把application.css 改檔名成
 application.scss
 

step6:
可以把scss檔案想成有超能力的css檔案,可以在裡面寫變數寫迴圈等等
編輯application.scss檔案
加入這兩行
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
  • @import "bootstrap-sprockets";
  • @import "bootstrap";

step7:
 去assets/javascript/
 裡面編輯 application.js

加入下面的
  • //= require jquery
  • //= require bootstrap-sprockets

step8:  導入bootstrap
step9:
  • rails generate scaffold Book title:string content:text page:integer publish_date:date

p.s. 如果這步驟想要砍掉重弄,使用
  • rails destroy scaffold Book title:string content:text page:integer publish_date:date
再重新建一次

step10:
  • rake db:migrate

啟動server
在專案資料夾(MyLibrary)中 rails s
rails server 就可以開始跑在預設 port 3000

step11:
滑鼠移過去
看到這個黑黑的是因為 scafford.scss造成的
不喜歡可以把它刪掉


step12: 修改table外觀
在<table>裡面加上 class="table table-hover"

step13: 修改button外觀
在下面的
<%= link_to 'New Book', new_book_path%>
加上class:'btn btn-success'
<%= link_to 'New Book', new_book_path, class:'btn btn-success' %>
效果
這些相關內容可以去這裡查看
例如上面的button success 是綠色的
其實還有其他選擇可以用


step14: 要新增一個db migration該怎麼做?
rails g migration add_price_to_book active_record
這裏的 g 是 generate 的簡寫
指令打完後
在migrate資料夾會看到最新的migrate檔案.rb 編輯它你想要家的欄位
除了add可以用以外,也可以 rename remove

編輯完後再 
rake db:migrate
以上動作只改了MVC架構當中的M
必須還要再手動改其他兩個才會看得到
接著去編輯(V) views 資料夾當中 books 裡面的 _form.html.erb
加上price
r
記得其他的view也要加上price的部分

接著
還需要controller的部分也要做出修改
再 book_params裡面加入 :price



  • simple_form 套件
gem 'simple_form'
說明看這

再bundle install

因為我們想要讓bootstrap用它所以要用這段指令
  • rails generate simple_form:install --bootstrap
下完之後,重新啟動一次 rails server
rails  s

接著來使用simple form
去views資料夾底下 _form那個html
原本這樣
把它改成這樣
 效果:
 

留言

這個網誌中的熱門文章

[筆記] CRLF跟LF之區別 --- 隱形的 bug

[ML筆記] Batch Normalization

[筆記] 統計實習(1) SAS 基礎用法 (匯入資料並另存SAS新檔,SUBSTR,計算總和與平均,BMI)

[ML筆記] Ensemble - Bagging, Boosting & Stacking