Bootstrap5間距工具類：快速調整元素距離技巧
Bootstrap5的間距工具類通過預設類名快速控制元素內邊距（padding）和外邊距（margin），無需複雜CSS。其命名規則爲`{property}-{sides}-{size}`：`m`表示margin，`p`表示padding；方向包括t/b/s/e/x/y/all（上下左右/全方向）；大小0-5對應0rem至3rem的間距（數值越大間距越大）。 實戰中，基礎用法如`p-3`（默認內邊距）、`pt-4`（頂部內邊距）；多方向如`mx-3`（左右外邊距）、`py-5`（上下內邊距）；全方向用`p-4`替代四個方向類名。響應式可加斷點前綴（sm/md等），如`mt-sm-3`（小屏幕頂部間距）。 注意區分margin（外部距離，影響元素位置）與padding（內部距離，撐開自身），可組合多類名，默認`$spacer`變量支持自定義間距。掌握規則後，通過類名組合即可高效調整佈局，提升開發效率。
閱讀全文Bootstrap5下拉菜單：點擊展開的導航選項列表
Bootstrap5下拉菜單可解決菜單項多導致的空間佔用問題，通過摺疊節省空間並保持界面簡潔。使用前需引入Bootstrap5 CSS、Popper.js和Bootstrap JS（順序不可錯）。 核心結構爲：外層 `<div class="dropdown">` 容器，內部包含觸發按鈕（`class="btn dropdown-toggle"`，帶 `data-bs-toggle="dropdown"` 屬性）和選項列表（`class="dropdown-menu"`）。選項列表用 `<li>` 包裹，菜單項爲 `dropdown-item`，支持 `active`（高亮）、`disabled`（禁用）及分割線（`dropdown-divider`）。 交互邏輯內置：點擊觸發按鈕展開/收起列表，點擊菜單項自動關閉，無需額外JS。進階用法支持右對齊（`dropdown-menu-end`）和向上展開（`dropup` 類）。 使用時需確保依賴正確引入，結構無誤（如菜單項在 `<li>` 內），即可快速實現簡潔導航菜單。
閱讀全文Bootstrap5模態框：彈出式內容展示正確打開方式
Bootstrap5模態框用於頁面臨時交互（提示、確認、表單等），覆蓋底層內容防止干擾。其優勢爲開箱即用、響應式、靈活可控，依賴Popper.js實現定位。 使用前需引入Bootstrap5 CSS與JS（含Popper）。核心HTML結構：.modal容器包含.modal-dialog（控制尺寸位置）、.modal-content（含.header、.body、.footer）。.header含標題與關閉按鈕，.body放內容，.footer放操作按鈕。 觸發模態框：按鈕點擊需`data-bs-toggle="modal"`和`data-bs-target="#ID"`；關閉方式有右上角×、ESC鍵、背景點擊、底部按鈕，也可通過JS手動控制（`new bootstrap.Modal(modalId).show()`）。 可自定義大小（.modal-sm/lg/xl），注意依賴Popper.js，避免嵌套，表單需防重複提交，長內容可禁用滾動。掌握結構、觸發關閉與自定義，即可快速實現彈窗交互。
閱讀全文Bootstrap5排版基礎：標題層級與文本樣式設置
Bootstrap5排版工具助力規範網頁文字展示，核心功能分標題層級與文本樣式。標題層級通過`.h1`-`.h6`類定義不同大小標題，保持樣式與語義分離（如`.h1`僅改樣式不改變語義標籤作用），默認帶`margin-bottom:1rem`間距，自動調整標題與正文空隙。文本樣式含對齊（`.text-start`/`.center`/`.end`/`.justify`）、顏色（`.text-*`/`.bg-*`）、粗細（`fw-bold`/`fw-normal`等）、斜體（`fst-italic`）、大小寫轉換（`.text-lowercase`/`.uppercase`/`.capitalize`）、行高（`lh-sm`/`base`/`lg`）及間距工具類，還有引用（`.blockquote`）、無列表符號（`.list-unstyled`）、刪除線（`.text-decoration-line-through`）等特殊樣式。注意語義化優先，區分類與標籤，利用響應式前綴適配設備。掌握核心類名可快速美化文字，結合後續組件效果更佳。
閱讀全文Bootstrap5導航欄：快速實現響應式導航菜單
這篇文章介紹了使用Bootstrap5快速實現響應式導航菜單的方法。首先需通過CDN引入Bootstrap5的CSS和JS文件。基本結構包含`<nav>`標籤配合`.navbar`類，核心組件有品牌標識（`.navbar-brand`）、導航容器（`.navbar-nav`）、導航項（`.nav-item`）、鏈接（`.nav-link`）、摺疊按鈕（`.navbar-toggler`）及摺疊內容（`.collapse.navbar-collapse`），並提供示例代碼。 響應式摺疊邏輯通過`.navbar-expand-*`類控制，如`.navbar-expand-lg`使大屏幕（≥992px）展開，小屏自動摺疊爲漢堡菜單。樣式定製支持背景色（`bg-*`）、文字色（`.navbar-dark/light`）、激活狀態（`.active`）及下拉菜單（`.dropdown-*`）。 擴展功能包括固定頂部（`.fixed-top`）、右側內容（如搜索框）和間距調整。注意事項：需確保CDN順序正確，摺疊按鈕的`data-bs-target`與內容ID匹配，並添加無障礙屬性提升兼容性。通過這些方法可快速實現響應式導航，無需額外CSS
閱讀全文Bootstrap5入門：如何快速安裝與引入到項目中
Bootstrap5是強大的前端框架，可快速構建美觀響應式網頁，提供現成組件與工具類，提升開發效率。其優勢：響應式設計自動適配設備，組件豐富（按鈕、導航欄等），類名定義樣式簡化開發，兼容性良好。 安裝引入有三種方式：CDN（最推薦，無需下載，在<head>引入CSS，</body>前引入含Popper的JS，注意順序）；本地下載（官網下載後放項目目錄，按相對路徑引入）；npm安裝（Node環境下執行npm install bootstrap）。 驗證可通過卡片組件測試，需注意：必須設置響應式視口<meta name="viewport" ...>，JS放Popper後，利用類名複用樣式。掌握這些即可高效開發，後續可探索官方文檔擴展功能。
閱讀全文