(3) Bootstrap 圖片(Images&Figures)

在Bootstrap 文件(Documentation)>內容(Content) 中，圖片的應用分為 :

• 圖片 images
• 圖片區 Figures : 圖片+描述。

本篇將會依序介紹

• 響應式圖片(Responsive images)
• 縮略圖 (Image thumbnails) 及 圓角樣式 (rounded)
• 對齊圖片(Aligning images)
• 圖片區 (Figures)

圖片 (Images)

響應式圖片(Responsive images)

Bootstrap 中的圖片要達到響應式效果，可在<img>標籤中加入img-fluid 這個 class 名稱

.img-fluid
Bootstrap預設➡️ max-width: 100%; height: auto;

用法如下 :

💡就算是寬度不寬的小張照片，也建議須加上.img-fluid，才能跟著螢幕寬度縮放，達到自適應效果哦~

圖片縮略圖 (Image thumbnails)

• 類似頭像效果
• 會加上1px 外框線
• 圖片邊產生0.25rem (4px) 的 padding 留白
• 0.25rem (4px)圓角 (單純想要圓角樣式可以使用.rounded 這個class名稱)

對齊圖片 (Aligning images)

-利用 float 使圖片靠左、靠右-

在<img>標籤加上 float-left 及 float-right 的 class 名稱

可參考
Bootstrap 文件(Documentation)>通用類別(Utilities)>浮動(Float)主題

⚠️使用完 float，記得要在外層容器加上 clearfix 這個 class 名稱以清除浮動

.clearfix
Bootstrap 預設⬇️

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

-水平置中-

在 Bootstrap 中透過以下兩種方法，可讓圖片達到水平置中 :

1. 在<img>標籤加上 d-block、 mx-auto 這兩個 class 名稱

.d-block
Bootstrap預設➡️display: block;
-
.mx-auto (x軸的 margin 都設為 auto )
Bootstrap預設➡️margin-left: auto; margin-right: auto;

2. 在外層<div>加上text-center這個class名稱

.text-center
Bootstrap預設➡️text-align: center;

由於<img>本身為行內元素，因此當我們在外層<div>設定 text-align: center; 時，<div>中的行內元素都會水平置中對齊。

圖片區 (Figures)

<figure>以及<figcaption>是 html5 才新增的標籤，我們會使用這兩個 html 標籤，再搭配以下3個 Bootstrap 預設的class名稱一起使用 :

.figure
Bootstrap預設➡️ display: inline-block;

📝小補充 :
<figure>標籤本身為區塊元素，若希望將它變成行內元素，就可再加上上面所提到 Bootstrap 預設的 class 名稱 figure。

.figure-img
Bootstrap預設➡️ margin-bottom: 0.5rem; line-height: 1;

.figure-caption
Bootstrap預設➡️ font-size: 90%; color: #6c757d;

整體用法如下 :

進入下一篇 :

(4) Bootstrap 表格 (Tables)

參考資料來源 :

Bootstrap | 六角學院

Images

圖片 (Images)

Figures

圖片區 (Figures)