Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
- .img-rounded：添加 border-radius:6px 來得到圖片圓角。
- .img-circle：添加 border-radius:500px 來讓整個圖片變成圓形。
- .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
請看下面的實例演示：php
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 圖片</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <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"> </body> </html>
結果以下所示：css
<img> 類
如下類可用於任何圖片中。html
| 類 | 描述 | 實例 |
|---|---|---|
| .img-rounded | 爲圖片添加圓角 (IE8 不支持) | 嘗試一下 |
| .img-circle | 將圖片變爲圓形 (IE8 不支持) | 嘗試一下 |
| .img-thumbnail | 縮略圖功能 | 嘗試一下 |
| .img-responsive | 圖片響應式 (將很好地擴展到父元素) | 嘗試一下 |
響應式圖片
經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。jquery
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：bootstrap