# 在rails專案引入Bootstrap

從Bootstrape先取任意一個程式碼，這裡取Alert

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

將上面程式碼放進任一頁面啟動rails s確認目前狀態，可以發現目前只有一般文字狀態沒有其他效果

---

到終端機輸入：`$ yarn add bootstrap`
安裝後到app/javascript/packs的application.js裡加上`import 'bootstrap'`來引入
重新整理之後用開發者工具會看到網頁出現錯誤

---

再到終端機安裝jquery:`$ yarn add jquery`
又會出現缺少popper.js

---

再到終端機安裝popper.js:`$ yarn add popper.js`
重新整理不再出現錯誤，但目前還是一般文字，這是因為還沒有引入bootstrap的css，可以在node_modules/bootstrap/dist/css下找到bootstrap.css
同樣在app/javascript/packs的application.js裡引入
`import 'bootstrap/dist/css/bootstrap.css'`
(可以複製相對路徑但要刪除開頭的node_modules，因為預設已經是從node_modules開始尋找)

---

回到網頁可以看到原來的一般文字已經有bootstrap的效果了

---
如果想在.erb裡寫jqery因為在window裡是沒有`$`，所以要在app/javascript/packs的application.js引入

import $ from 'jquery'
window.jquery = jquery

引入後就可在erb檔中使用jqery寫法