鍍金池/ 教程/ HTML/ 圖片
警告框
標簽頁
代碼
輪播
進度條
輔助類
按鈕組
社區(qū)
標簽
導(dǎo)航
響應(yīng)式工具
禁止響應(yīng)式布局
工具提示
概覽
媒體對象
概覽
具有響應(yīng)式特性的嵌入內(nèi)容
Well
折疊
下載
對第三方組件的支持
Glyphicons 字體圖標
編譯 CSS 和 JavaScript 文件
徽章
柵格系統(tǒng)
瀏覽器和設(shè)備的支持情況
輸入框組
表格
滾動監(jiān)聽
下拉菜單
排版
巨幕
按鈕
頁頭
使用 Sass
包含的內(nèi)容
縮略圖
模態(tài)框
基本模板
面版
圖片
路徑導(dǎo)航
分頁
導(dǎo)航條
警告框
過渡效果
從 v2.x 版本升級到 v3.x 版本
工具
可訪問性
彈出框
按鈕式下拉菜單
表單
列表組
按鈕
使用 Less
下拉菜單

圖片

響應(yīng)式圖片

在 Bootstrap 版本 3 中,通過為圖片添加 .img-responsive 類可以讓圖片支持響應(yīng)式布局。其實質(zhì)是為圖片設(shè)置了 max-width: 100%;、 height: auto;display: block; 屬性,從而讓圖片在其父元素中更好的縮放。

如果需要讓使用了 .img-responsive 類的圖片水平居中,請使用 .center-block 類,不要用 .text-center。 請參考助手類章節(jié) 了解更多關(guān)于 .center-block 的用法。

SVG 圖像和 IE 8-10

在 Internet Explorer 8-10 中,設(shè)置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個問題,在出問題的地方添加 width: 100% \9; 即可。Bootstrap 并沒有自動為所有圖像元素設(shè)置這一屬性,因為這會導(dǎo)致其他圖像格式出現(xiàn)錯亂。

<img src="..." class="img-responsive" alt="Responsive image">

圖片形狀

通過為 <img>元素添加以下相應(yīng)的類,可以讓圖片呈現(xiàn)不同的形狀。

跨瀏覽器兼容性

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
上一篇:面版下一篇:基本模板