ASTRO Camp JavaScipt workshop 暖身教材

練習在 Rails 裡面用 Webpack 來安裝、使用前端套件

這裡有一個簡單的 Rails 6 專案，基本上所有內容是 scaffold 一鍵做出來的，然後有搭配 acts-as-taggable-on 這個 gem 做了標籤功能。

由於 Rails 內建表單不太好用，我們可以透過 Webpack 裝一些前端套件來優化

熱身任務

workshop 開始之前建議同學可以先練習安裝 Bootstrap
正式 workshop 將會有從此專案再往下做

目標：用 Bootstrap 美化頁面

• 每次新增商品、編輯商品後，畫面是方會有漂亮的通知視窗

  • 顏色不限，有美化就好
  • 可以按右上角x關掉它

• index 頁面美化

  • 風格不限，有美化就好

• new/edit 頁面美化

  • 風格不限，有美化就好

提示

• 可以 Github 的 fork 或直接 git clone 這個 repo
• 可能用到這指令安裝 bootstrap yarn add bootstrap，目前預設裝 4.5.3 版的 bootstrap 即可

參考樣式

原本 index 頁

原本 new 頁

bootstrap 完成後，index 頁

bootstrap 完成後，new 頁