RoR week4 一步一步玩rails+bootstrap

step1: 

rails new MyLibrary

step2:

cd MyLibrary

step3:

參考網址如下

https://github.com/twbs/bootstrap-sass

編輯 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' %>

效果

這些相關內容可以去這裡查看

http://getbootstrap.com/css/

例如上面的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'

說明看這

https://github.com/plataformatec/simple_form

再bundle install

因為我們想要讓bootstrap用它所以要用這段指令

• rails generate simple_form:install --bootstrap

下完之後，重新啟動一次 rails server

rails  s

接著來使用simple form

去views資料夾底下 _form那個html

原本這樣

把它改成這樣

 效果：