在本章中，我們將學習 Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
請看下面的實例演示：
<!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="/attachments/uploads/2014/06/download.png" class="img-rounded"> <img src="/attachments/uploads/2014/06/download.png" class="img-circle"> <img src="/attachments/uploads/2014/06/download.png" class="img-thumbnail"> </body> </html>
結果如下所示：
以下類可用于任何圖片中。
| 類 | 描述 | 實例 |
|---|---|---|
| .img-rounded | 為圖片添加圓角 (IE8 不支持) | 嘗試一下 |
| .img-circle | 將圖片變為圓形 (IE8 不支持) | 嘗試一下 |
| .img-thumbnail | 縮略圖功能 | 嘗試一下 |
| .img-responsive | 圖片響應式 (將很好地擴展到父元素) | 嘗試一下 |
通過在 <img> 標簽添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
