三、Bootstrap 的核心概念：網格系統（Grid System）

Bootstrap 最強大的地方之一就是它的網格系統。這讓你可以很容易地排列版面。

📦 基本語法：

HTML
<div class="container">
  <div class="row">
    <div class="col">欄位1</div>
    <div class="col">欄位2</div>
    <div class="col">欄位3</div>
  </div>
</div>

這段意思是：在一個容器（container）裡，建立一列（row），再放三個欄位（col），每個欄位會自動平均分配寬度。

🎯 範例說明：

你可以用這個結構來排出三張圖片、三段文字或三個產品介紹區塊。重點是，在不同螢幕大小上會自動調整排列方式，不用自己寫媒體查詢（media query）！

四、常用的元件（Components）

Bootstrap 提供了許多現成的元件，只要加上 class 就可以使用，非常方便。

1. 按鈕（Button）

HTML
<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>

你也可以換不同顏色，例如 btn-success（綠色）、btn-danger（紅色）等。

2. 導覽列（Navbar）

HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">網站名稱</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">首頁</a></li>
        <li class="nav-item"><a class="nav-link" href="#">關於我們</a></li>
        <li class="nav-item"><a class="nav-link" href="#">聯絡</a></li>
      </ul>
    </div>
  </div>
</nav>

這就是一個響應式導覽列，在手機上會自動變成漢堡選單！

3. 卡片（Card）

卡片是一種常見的版面呈現方式，常用於部落格、產品資訊等。

HTML
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="圖片">
  <div class="card-body">
    <h5 class="card-title">卡片標題</h5>
    <p class="card-text">這是一段簡短的卡片介紹文字。</p>
    <a href="#" class="btn btn-primary">了解更多</a>
  </div>
</div>