進階閱讀 Bootstrap 5 文件：深入理解樣式間距與 JavaScript 效果

更新日期： 2024 年 11 月 12 日

在理解了 Bootstrap 5 的基本佈局與網格系統後，可以進一步學習一些進階功能。

例如樣式間距、排版屬性、圖層層級、基礎樣式工具（utilities）、邊框設置，以及 JavaScript 效果。

這些功能能幫助我們，更靈活地控制網站的外觀和互動效果。

Gutters：控制間距

認識 Gutters（間距）

在 Bootstrap 中，“gutters” 是指元素之間的間距，主要通過 padding 的方式來控制。

Bootstrap 提供了許多預設的間距類別，例如 px-4 就代表在 x 軸（水平）上的 padding 間距為 4 個等級（gap）。

這些類別能快速地為元素設置一致的間距，讓頁面顯得更整齊。

Gutters 使用範例

使用 px-4 這類間距設定，可以快速控制左右間距，達到符合設計要求的間隔。

當需要調整不同方向的間距時，還可以使用 py-4（垂直間距）或 p-4（上下左右全方位間距）等類別。

排版屬性：Display 與 z-index

排版屬性的設定：Display 類別

Bootstrap 提供許多顯示設定類別，讓我們可以在不同螢幕尺寸下靈活地控制顯示屬性。

例如 d-sm-flex 表示在手機尺寸（small）下將元素的 display 屬性設置為 flex，實現彈性佈局。

這樣可以避免手動寫 CSS，直接利用 Bootstrap 的類別達到響應式效果。

圖層順序設定：z-index

Bootstrap 也提供了 z-index 層級類別，讓我們控制元素的圖層疊放順序，避免因為不同層級的元素而造成畫面重疊。

例如使用 .z-index-1、.z-index-2 等類別可以指定不同的層級，確保元素按設計的疊放順序顯示。

基礎樣式工具：背景色、內外距等 Utilities

Bootstrap 5 包含許多方便的樣式工具（Utilities），讓我們能快速設定各種 CSS 樣式，例如背景色、內外距等。

背景色與文字顏色

Bootstrap 提供多種背景顏色和文字顏色選項，例如 bg-primary 表示主要背景色，而 text-white 則表示白色文字。以下是一段範例代碼，展示了這些設定：

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

在這段代碼中，p-3 設置了 padding 的層級為 3，mb-2 設定了底部的 margin 為 2，bg-primary 設定背景色為主要顏色，而 text-white 則將文字顏色設為白色。

這樣的 Utilities 可以快速完成樣式設定，而無需額外撰寫 CSS。

邊框設定與圓角

Bootstrap 的邊框工具也相當靈活，可以設置不同的邊框粗細，從 border-0 到 border-6，代表無邊框到粗邊框的設置。

此外，Bootstrap 提供了邊框圓角工具，例如 rounded 類別可以設定元素的圓角，讓元素的顯示效果更具設計感。

使用 JavaScript 效果：以 Accordion 為例

Bootstrap 除了 CSS 樣式外，還提供了一些 JavaScript 效果，例如折疊（accordion）、彈跳、滑動等動態效果。

以下我們以折疊選單（Accordion）為例，了解如何在網頁中嵌入互動效果。

Accordion 的基本結構

以下是 Bootstrap 文件中的一段 Accordion 代碼範例：

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
      </div>
    </div>
  </div>
</div>

理解 Accordion 的關鍵屬性

• id 屬性：例如 id="headingOne" 是這個 Accordion 項目的唯一標識符。
• aria-labelledby 屬性：這個屬性連結到 headingOne，確保無障礙工具能識別和讀取對應的區塊。
• data-bs-toggle 和 data-bs-target：data-bs-toggle="collapse" 表示當按鈕被點擊時，目標區塊會展開或折疊，而 data-bs-target="#collapseOne" 則指定要折疊的區塊（這裡是 #collapseOne）。

這些屬性和 id 的對應是實現折疊效果的關鍵。

在設計折疊選單時，可以透過 Bootstrap 提供的 JavaScript API 來控制顯示效果。

總結

通過學習 Bootstrap 5 的進階文件，我們可以更靈活地設計出符合需求的網頁。

以下是建議的學習步驟：

1. 間距設定（Gutters）：理解 px-4 這類 padding 工具，快速控制元素之間的距離。
2. 排版屬性和 z-index：使用 d-sm-flex 控制顯示方式，利用 z-index 控制元素層級。
3. 基礎樣式工具（Utilities）：如背景顏色、文字顏色、邊框、圓角等，讓樣式快速成型。
4. JavaScript 效果：以 Accordion 為例，學習如何利用 Bootstrap 的 JavaScript 功能來創建互動式效果。

這些進階工具的掌握，能讓我們在使用 Bootstrap 5 時更得心應手，迅速創建出美觀且具有互動效果的網頁。