Bootstrap Chinese manual
/ Bootstrap 圖片
Bootstrap 圖片
在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應(yīng)用簡單樣式的 class：
.img-rounded：添加 border-radius:6px 來獲得圖片圓角。
.img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
.img-thumbnail：添加一些內(nèi)邊距（padding）和一個灰色的邊框。
請看下面的實(shí)例演示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 圖片</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>
<html>
<head>
<title>Bootstrap 實(shí)例 - 圖片</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>
實(shí)例
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 圖片</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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<img> 類
以下類可用于任何圖片中。
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .img-rounded | 為圖片添加圓角 (IE8 不支持) | 嘗試一下 |
| .img-circle | 將圖片變?yōu)閳A形 (IE8 不支持) | 嘗試一下 |
| .img-thumbnail | 縮略圖功能 | 嘗試一下 |
| .img-responsive | 圖片響應(yīng)式 (將很好地擴(kuò)展到父元素) | 嘗試一下 |
響應(yīng)式圖片
通過在 <img> 標(biāo)簽添加 .img-responsive 類來讓圖片支持響應(yīng)式設(shè)計。 圖片將很好地擴(kuò)展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應(yīng)用在圖片上：
實(shí)例
<!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類讓圖片支持響應(yīng)式，將很好地擴(kuò)展到父元素 (通過改變窗口大小查看效果):</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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例