這篇文章主要介紹“Bootstrap中的圖片組件和輪廓組件舉例分析”，在日常操作中，相信很多人在Bootstrap中的圖片組件和輪廓組件舉例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Bootstrap中的圖片組件和輪廓組件舉例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

站在用戶的角度思考問題，與客戶深入溝通，找到榆次網(wǎng)站設(shè)計與榆次網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋榆次地區(qū)。

1 圖片

本文節(jié)將學(xué)習(xí)如何讓圖片支持響應(yīng)式行為（這樣它們就不會超出父元素的范圍）以及如何通過類（class）添加些許樣式。

1.1 響應(yīng)式圖片

通過 Bootstrap 所提供的.img-fluid 類讓圖片支持響應(yīng)式布局。其原理是將max-width: 100%; 和 height: auto; 賦予圖片，以便隨父元素一起縮放。

上面container是為了讓圖片居中顯示切四周有邊距，不是圖像組件的一部分。

10.1.2 圖片縮略圖

除了通用類提供的提供的border-radius外，你還可以使用.img-thumbnail 使圖片的外觀具有 1px 寬度的圓形邊框。