後端框架與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後的成果範例：
留言0
查看全部
你可能也想看
Google News 追蹤
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
介紹
大家第一次聽到，static 肯定很陌生。簡單來說，這個東西就是拿來存放一些我們經常會用到的檔案，比方說：
CSS、JS、Image、Audio、Video......
只要是網頁上可能會用到的檔案，我們基本上都會存在 static 當中，方便我們可以在不同路徑中，快速的存取這些檔案
當我們在撰寫一套系統的時候， 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求， 而傳統的安裝包模式總是太侷限， 需要個別主機獨立安裝， 相當繁瑣， 但隨著時代的演進與互聯網的崛起， 大部分的工作都可以藉由網頁端、裝置端來觸發， 而伺服端則是負責接收指令、運算與回傳結果， 雲端
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
介紹
大家第一次聽到，static 肯定很陌生。簡單來說，這個東西就是拿來存放一些我們經常會用到的檔案，比方說：
CSS、JS、Image、Audio、Video......
只要是網頁上可能會用到的檔案，我們基本上都會存在 static 當中，方便我們可以在不同路徑中，快速的存取這些檔案
當我們在撰寫一套系統的時候， 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求， 而傳統的安裝包模式總是太侷限， 需要個別主機獨立安裝， 相當繁瑣， 但隨著時代的演進與互聯網的崛起， 大部分的工作都可以藉由網頁端、裝置端來觸發， 而伺服端則是負責接收指令、運算與回傳結果， 雲端
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。