BS4(2)-基本版面運用

範例結果

以上中文描述源自BS4中文網

一、準備工作

二、圖片設定

(一)大張圖片產生捲軸時,依視窗自適應處理

S0:header之下加入圖片

S1:圖片自適應處理

【Documentaion(文件)】>【Content(內容)】>【Images(圖片)】(連結處)

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

(二)組圖

(1)【Documentaion(文件)】>【Content(內容)】>【Figures(圖片區)】(連結處)

使用內建的 .figure、 figure-img 和 .figure-caption 類別,設定 HTML5 <figure>和 <figcaption> 的底線樣式。 圖檔沒有明確指定尺寸,因此請務必在 <img> 標籤加入 .img-fluid 設定圖片為響應式。

(2)【Documentaion(文件)】>【Content(內容)】>【Images(圖片)】(連結處)

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

(3)【Documentaion(文件)】>【Utilities(通用類別)】>【Borders(邊框)】(連結處)