圖片 (Images)

全部經由類別來設定,選擇加入響應式(因而不會大於其父類別所設定的圖片尺寸)與增加輕巧樣式之文件和範例。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去 前端轉職經歷分享

響應式圖片

Bootstrap 中的圖片可利用 .img-fluid 設定為響應式。 max-width:100%;height:auto; 也需一併使用,讓圖片可依父元素屬性進行縮放。

Generic responsive image
<img src="..." class="img-fluid" alt="Responsive image">
SVG 圖片與 IE 10

Internet Explorer 10 中, 加入 .img-fluid 設定的可縮放向量圖形有比例不正確的問題。 要解決這個問題,請在必要時另加 width:100%\ 9; 的設定。 此設定對於其他圖檔格式並不適用,因此 Bootstrap 不會自動加入此設定。

圖片縮略圖

除了 邊框-圓角 公用程式 之外,你可以使用 .img-thumbnail 讓圖片有1px邊框的顯示。

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-thumbnail">

對齊圖片

helper float classestext alignment classes 讓圖片對齊。 block-level 的圖片可以使用 the .mx-auto margin utility class 置中。

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
A generic square placeholder image with rounded corners
<img src="..." class="rounded mx-auto d-block" alt="...">
A generic square placeholder image with rounded corners
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Picture

如果你使用 <picture> 元素為特定的 <img> 指定多個 <source> 元素,請確保將 .img-* 加到 <img> 而不是 <picture> 標籤。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>