Bootstrap 教程
-
Bootstrap 字體圖標(biāo)
-
Bootstrap 下拉菜單
-
Bootstrap 按鈕組
-
Bootstrap 按鈕下拉菜單
-
Bootstrap 輸入框組
-
Bootstrap 導(dǎo)航元素
-
Bootstrap 導(dǎo)航欄
-
Bootstrap 面包屑導(dǎo)航
-
Bootstrap 分頁(yè)
-
Bootstrap 標(biāo)簽
-
Bootstrap 徽章
-
Bootstrap 超大屏幕
-
Bootstrap 頁(yè)面標(biāo)題
-
Bootstrap 縮略圖
-
Bootstrap 警告
-
Bootstrap 進(jìn)度條
-
Bootstrap 多媒體對(duì)象
-
Bootstrap 列表組
-
Bootstrap 面板
-
Bootstrap Wells
-
Bootstrap 創(chuàng)建一個(gè)網(wǎng)頁(yè)
Bootstrap 圖片
在本章節(jié)中，我們將學(xué)習(xí) Bootstrap 對(duì)圖片的支持。Bootstrap 提供了三個(gè)可對(duì)圖片應(yīng)用簡(jiǎn)單樣式的 class：
- .img-rounded：添加 border-radius:6px 來獲得圖片圓角。
- .img-circle：添加 border-radius:50% 來讓整個(gè)圖片變成圓形。
- .img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。
請(qǐng)看下面的實(shí)例演示：
實(shí)例
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
運(yùn)行代碼 ?
結(jié)果如下所示：
<img> 類
以下類可用于任何圖片中。
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .img-rounded | 為圖片添加圓角 (IE8 不支持) | 運(yùn)行代碼 |
| .img-circle | 將圖片變?yōu)閳A形 (IE8 不支持) | 運(yùn)行代碼 |
| .img-thumbnail | 縮略圖功能 | 運(yùn)行代碼 |
| .img-responsive | 圖片響應(yīng)式 (將很好地?cái)U(kuò)展到父元素) | 運(yùn)行代碼 |
響應(yīng)式圖片
通過在 <img> 標(biāo)簽添加 .img-responsive 類來讓圖片支持響應(yīng)式設(shè)計(jì)。 圖片將很好地?cái)U(kuò)展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應(yīng)用在圖片上：
提示：通過使用Bootstrap的圖片響應(yīng)式類.img-responsive，你可以讓圖片適配手機(jī)顯示！