五、讓網頁變得「響應式」

響應式設計是 Bootstrap 的核心特色之一。你只需要使用像是：

HTML
<div class="col-sm-6 col-md-4 col-lg-3">...</div>

這表示：

- 在小螢幕（手機）顯示一列 2 欄

- 在中螢幕（平板）顯示一列 3 欄

- 在大螢幕（桌機）顯示一列 4 欄

這樣一來，同一份程式碼在不同裝置上會自動變化版面，不用額外設定。

六、小技巧分享

1.加入間距
Bootstrap 提供許多內建的間距工具，例如 mt-3（margin-top）、p-2（padding）。數字越大距離越大。

2.自訂樣式不衝突
如果你想自訂樣式，不建議直接修改 Bootstrap 的 CSS，建議額外寫一份自己的 CSS，用自訂 class 或覆寫方式調整。

3.不要全靠 Bootstrap
Bootstrap 很方便，但也容易讓網站看起來「都一樣」。建議用 Bootstrap 打基礎，再加入一些自己的設計風格會更有特色。

結語

Bootstrap 5 就像是前端開發的新手神兵利器。它幫助你快速開發、保持一致性、兼容多裝置。雖然不建議完全依賴，但作為設計網站的起點非常理想。

如果你還是前端新手，建議你從改造 Bootstrap 的範例開始練習，然後慢慢挑戰自己客製化設計，讓網站既專業又有個人風格！