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; 樣式應用在圖片上: