後端框架與API 開發(2-1) – 靜態資源下載 Bootstrap
閱讀時間約 4 分鐘
使用靜態檔案下載 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 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單，而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
ts-rest 可以實現從服務器到客戶端的全型別安全，可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
製作檔案後續流程
-->底片-->曬版-->印刷機---印刷
-->出版----------->印刷機---印刷
最先接觸的是底片機，那時照相機還是膠捲時代，而報紙與周刊要印刷前都是輸出成透明黑字圖底片，再經由曬版功序進入印刷機。
出片機
以下廠牌為當時最大宗(中譯名)，西元年是我
菜雞成長故事
寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展，或是想動手做做小專案，故才成就了這一篇心路歷程，這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間，希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考？(雖然我依然還是一個小菜雞，請鞭小力)
#框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式
今天的影片內容，我們來聊聊你有沒有被框架效應綁架了你的判斷？
想想最近新聞瘋狂報導的白飯之亂，公說公有理，婆說婆有理
到底誰才是對的呢？
而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
初學後端的人，可能對如何學習後端技術或語言會感到很困惑。
本篇文章提供了作者的幾種思路，幫助後端學員進行學習
在工作室培訓難免會陷入低潮的原因，本篇文章分析了陷入低潮的原因，及提供預防及解決方法。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單，而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
ts-rest 可以實現從服務器到客戶端的全型別安全，可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
製作檔案後續流程
-->底片-->曬版-->印刷機---印刷
-->出版----------->印刷機---印刷
最先接觸的是底片機，那時照相機還是膠捲時代，而報紙與周刊要印刷前都是輸出成透明黑字圖底片，再經由曬版功序進入印刷機。
出片機
以下廠牌為當時最大宗(中譯名)，西元年是我
菜雞成長故事
寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展，或是想動手做做小專案，故才成就了這一篇心路歷程，這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間，希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考？(雖然我依然還是一個小菜雞，請鞭小力)
#框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式
今天的影片內容，我們來聊聊你有沒有被框架效應綁架了你的判斷？
想想最近新聞瘋狂報導的白飯之亂，公說公有理，婆說婆有理
到底誰才是對的呢？
而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
初學後端的人，可能對如何學習後端技術或語言會感到很困惑。
本篇文章提供了作者的幾種思路，幫助後端學員進行學習
在工作室培訓難免會陷入低潮的原因，本篇文章分析了陷入低潮的原因，及提供預防及解決方法。