2024-07-04|閱讀時間 ‧ 約 27 分鐘

後端框架與API 開發(2-1) – 靜態資源下載 Bootstrap

使用靜態檔案下載 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 使用到檔案 -Popper.js，因為這 popper 是 JavaScript 檔案，所以放到專案內的 JavaScript 資料夾中。
點此下載 Popper.js 和 Popper.js.map -（Popper.js 官網）

專案架構會像這樣：

套入 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 靜態檔案的資料夾位置。

// setting static files
app.use(express.static('public'))

套用CSS後的成果範例：

分享至

成為作者繼續創作的動力吧！

奧莉薇

追蹤

後端框架與API 開發(2-1) – 靜態資源下載 Bootstrap

使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：

為什麼不透過 npm 下載 Bootstrap的原因主要有以下幾點：

下載 Bootstrap的步驟：

套入 Bootstrap的步驟：

奧莉薇走在成為後端工程師之路上的其他內容

你可能也想看

發表回應

後端框架與API 開發(2-1) – 靜態資源下載 Bootstrap

使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：

為什麼不透過 npm 下載 Bootstrap的原因主要有以下幾點：

下載 Bootstrap的步驟：

套入 Bootstrap的步驟：

奧莉薇走在成為後端工程師之路上 的其他內容

你可能也想看

發表回應

奧莉薇走在成為後端工程師之路上的其他內容