Helpers (工具輔助類別)

這些比較「特殊」，針對特定情境才用得上。

✅ .clearfix

清除浮動，讓容器正常包覆內容。

HTML
<div class="clearfix">
  <img src="..." class="float-start">
  <img src="..." class="float-end">
</div>

✅.stretched-link

讓一個超連結覆蓋整個容器（例如整張卡片可點）。

HTML
<div class="card">
  <img src="..." class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">標題</h5>
    <a href="#" class="stretched-link">查看更多</a>
  </div>
</div>

✅ .visually-hidden

隱藏元素，但仍讓螢幕閱讀器可以讀到，對 無障礙設計很重要。

HTML
<button>
 
  <span class="visually-hidden">通知</span>
</button>

✅ .ratio

設定固定比例的容器，常用於影片或圖片。

HTML
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/..."></iframe>
</div>

🎯 總結

• Utilities = 通用樣式工具（排版、顏色、間距、字體、顯示控制）。

• Helpers = 特殊輔助工具（清除浮動、整卡片可點、無障礙、比例控制）。

• 使用這些 class，可以快速排版，不必重複寫 CSS。