Bootstrap 圖片
在本章中，我們將學習 Bootstrap 對圖片的支持。 Bootstrap 提供了三個可對圖片套用簡單樣式的class：
.img-rounded：加上border-radius:6px# 來獲得圖片圓角。
.img-circle：新增 border-radius:50% 來讓整個圖片變成圓形。
.img-thumbnail：加入一些內邊距（padding）和一個灰色的邊框。
請看下面的實例示範：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 圖片</title>
<link href="/bootstrap/css/bootstrap.min.cs rel="stylesheet">#sheet /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;
<img src="/wp-content/uploads/2014；
<img src="/wp-content/uploads/2014;
<img src="/wp-content/uploads/2014;
<img src="/wp-content/uploads/2014;
<img src="/wp-content/uploads/2014;
<img src="/wp-content/uploads/2014 /06/download.png" <html>
<head>
<title>Bootstrap 實例 - 圖片</title>
<link href="/bootstrap/css/bootstrap.min.cs rel="stylesheet">#sheet /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;
<img src="/wp-content/uploads/2014；
<img src="/wp-content/uploads/2014;
<img src="/wp-content/uploads/2014;
<img src="/wp-content/uploads/2014;
<img src="/wp-content/uploads/2014;
</body>
</html>#實例
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 图片</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>
運行實例»
點擊"運行實例"按鈕查看線上實例
| #<img> 類別 | 以下類別可用於任何圖片中。 | |
|---|---|---|
| 類別 | 描述 | 實例 |
| .img-rounded | 為圖片新增圓角(IE8 不支援) | 試試看 |
| #.img-circle | 將圖片變成圓形(IE8不支援) | 嘗試 |
| .img-thumbnail | 縮圖功能 | 試試看 |
響應式圖片
透過在 <img> 標籤上新增 .img-responsive 類別來讓圖片支援響應式設計。 圖片將很好地擴展到父元素。
.img-responsive 類別將max-width: 100%; 和height: auto; 樣式應用在圖片上：
實例
#
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>图片</h2> <p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p> <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
