※ 什麼是靜態檔案：
指的是不需要再經過伺服器額外處理的檔案。常見的有，在網頁中載入的 CSS、JavaScript 或圖片檔，這些檔案通常不需要再經過伺服器額外處理，伺服器只需要提供一個連結，讓瀏覽器直接抓取這些檔案即可。
※ 建立一個名為 public 的資料夾：
把所有網頁上需要使用到的 CSS、JavaScript 或者圖檔都放在一個名為 public 的資料夾以方便管理。在 public 裡我們要建立分別名為 stylesheets 和 javascripts 的資料夾，裡面將分別放置稍後會在 HTML 中使用到的 CSS 和 JS 檔案。
※ 下載 Bootstrap 檔案：
官網：https://getbootstrap.com/docs/5.1/getting-started/download/
下載、解壓縮後，你會看到裡面一共有兩個資料夾，分別是 css 和 js：
在 CSS 資料夾中，我們只需要使用 bootstrap.css 、 bootstrap.css.map 、bootstrap-grid.css 和 bootstrap-grid.css.map這四支檔案：把它複製下來，並且貼到剛剛在專案中所建立的 stylesheets 資料夾中。
擁有的功能：
- 響應式排版
- 按鈕樣式（
.btn） - 表單元件（
.form-control） - 導覽列（
.navbar） - 卡片、陰影、邊框、間距等工具類別
在解壓縮的 JS 資料夾中，我們只需要使用 bootstrap.js 和 bootstrap.js.map 這兩支檔案：一樣把它複製下來，然後貼到剛剛在專案中所建立的 javascripts 資料夾中。
※ 下載 Bootstrap 使用到檔案 -Popper.js：
由於在 Bootstrap v5 中有額外使用 Popper.js 這個套件，因此我們需要一並把他下載下來：你會看到 JavaScript 檔案的內容呈現在瀏覽器上，這時可以透過另存新檔把它下載下來即可（MAC 可使用快捷鍵「command + S」；Windows 可使用快捷鍵 「Ctrl + S」）
網址：點此下載 Popper.js 和 Popper.js.map
這 popper 是 JavaScript 檔案，所以放到專案內的 JavaScript 資料夾中。
建立 commit 節點：
[~/todo-list] $ git add .
[~/todo-list] $ git commit -m "feat: add Bootstrap"
※ 載入靜態檔案：
讓我們在網頁中去載入這些靜態檔案。打開編輯器中的 views/layouts/main.handlebars 這支檔案。載入 stylesheets 的檔案，只需要透過 <link> 這個 HTML 標籤，把載入 Bootstrap CSS 檔案的部分寫在 <head> </head>這個區塊的最後面，像這樣：
範例：
<!-- ./views/layouts/main.handlebars -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- link css files here -->
<link rel="stylesheet" href="/stylesheets/bootstrap.css">
</head>
<body>
<!-- ... -->
</body>
</html>
※ 載入 JavaScript 檔案：
只需透過 <script> 這個 HTML 標籤即可。在這裏一共需要載入 popper.js, bootstrap.js 這兩支檔案。要特別留意的是，因為在 Bootstrap 中會用到 popper.js，因此載入時需要留意順序， popper.js 一定要放在 Bootstrap 之前：
<!-- ./views/layouts/main.handlebars -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- link css files here -->
<link rel="stylesheet" href="/stylesheets/bootstrap.css">
</head>
<body>
<!-- ... -->
<!-- include javascript files here -->
<script src="/javascripts/popper.js"></script>
<script src="/javascripts/bootstrap.js"></script>
</body>
</html>
※ 設定 Express 路由以提供靜態檔案：
這句 app.use(express.static('public'))就是在告訴 Express 靜態檔案是放在名為 public 的資料夾中，它不必針對這個資料夾內的檔案做什麼，只要產生對應的路由讓我們可以使用就好。
// app.js
// require packages used in the project
// ...
// setting template engine
// ...
// setting static files
app.use(express.static('public'))
// routes setting
// ...
// start and listen on the Express server
// ...
建立 commit 節點：
[~/todo-list] $ git add .
[~/todo-list] git commit -m "add Bootstrap CSS and JS to public folder"
