使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
- 客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
- 效能優化：如果你的網站只使用 Bootstrap 的部分功能，那麼你可以刪除不需要的 CSS 和 JavaScript 代碼，這樣可以減少檔案的大小，提高網站的加載速度。
- 離線開發：如果你下載了 Bootstrap 的靜態檔案並將其存放在本地，那麼你就可以在沒有網路連接的情況下進行開發。
- 版本控制：下載靜態檔案可以讓你控制使用的 Bootstrap 版本。如果 Bootstrap 更新了新版本，你可以選擇是否更新你的檔案，而不會被迫使用最新的版本。
為什麼不透過 npm 下載 Bootstrap的原因主要有以下幾點：
- 簡單性：直接從官網下載 Bootstrap 或使用 CDN 是最簡單的方法。你不需要設置任何額外的工具或配置，只需要將下載的檔案放入你的專案中，或者在你的 HTML 檔案中添加一個鏈接到 CDN。
- 前端使用：如你所說，Node.js 是後端技術，而 Bootstrap 主要是用於前端。如果你沒有使用像 webpack 這樣的模組打包工具，你將無法直接在前端使用透過 npm 下載的 Bootstrap。
- 學習目的：對於初學者來說，直接下載 Bootstrap 或使用 CDN 可以讓他們更快地開始使用 Bootstrap，而不需要先學習如何使用 npm 或 webpack。
下載 Bootstrap的步驟：
- 在根目錄下開一個
public 資料夾，在 public 裡再建立分別名為 stylesheets 和 javascripts 的資料夾，將在 HTML 中使用到的 CSS、JavaScript 或者圖檔都放進去資料夾以方便管理。
- 下載 Bootstrap 檔案：先到 Bootstrap 的官方網站點選 Download 下載 Bootstrap。
- 解壓縮後，你會看到裡面一共有兩個資料夾，分別是
css 和 js：
- 在 CSS 資料夾中，我們只需要使用
bootstrap.css 和 bootstrap.css.map 這兩支檔案，把它複製貼到剛剛在專案中所建立的 stylesheets 資料夾中：
- 在解壓縮的 JS 資料夾中，我們只需要使用
bootstrap.js 和 bootstrap.js.map 這兩支檔案把它複製貼到所建立的 javascripts 資料夾中：
套入 Bootstrap的步驟：
$ nodemon app.js
$ npm run dev
- 打開編輯器中的
views/layouts/main.handlebars 這支檔案，只需要透過 <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>
- 透過 <script> 這個 HTML 標籤，載入 popper.js, bootstrap.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 路由，告訴 Express 靜態檔案的資料夾位置。
app.use(express.static('public'))
