Bootstrap 圖片
在本章中，我們將學習 Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
- .img-rounded：添加 border-radius:6px 來獲得圖片圓角。
- .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
- .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
請看下麵的實例演示：
實例
<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">
結果如下所示：
<img> 類
以下類可用於任何圖片中。
| 類 | 描述 | 實例 |
|---|---|---|
| .img-rounded | 為圖片添加圓角 (IE8 不支持) | |
| .img-circle | 將圖片變為圓形 (IE8 不支持) | |
| .img-thumbnail | 縮略圖功能 | |
| .img-responsive | 圖片回應式 (將很好地擴展到父元素) |
回應式圖片
通過在 <img> 標籤添加 .img-responsive 類來讓圖片支持回應式設計。 圖片將很好地擴展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：
實例
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque
Terre">