圖片
圖片要在各種螢幕都不溢出，先加 img-fluid：它等於 max-width: 100% 與 height: auto。對應官方 Images。
<img src="photo.jpg" class="img-fluid" alt="說明文字">
<img src="thumb.jpg" class="img-thumbnail" alt="帶邊框的縮圖">
<img src="hero.jpg" class="object-fit-cover w-100" alt="裁切填滿的橫幅" style="height: 240px;">
| class | 作用 |
|---|---|
img-fluid |
響應式，不超過父層寬 |
img-thumbnail |
淺色邊框與圓角，像相框 |
rounded／rounded-circle |
圓角或正圓（正方形圖才會是正圓） |
object-fit-cover／contain |
裁切填滿或完整放入（5.3 工具類） |
一定要寫 alt
裝飾性圖片可用 alt=""；有資訊的圖用一句人話描述。這跟 Bootstrap 無關，但是無障礙與 SEO 的基本要求。
搭配 網格 時，把 img-fluid 放進 col-* 裡，欄變窄圖片就跟著縮。