Bootstrap 圖片

在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應(yīng)用簡單樣式的 class：

.img-rounded：添加 border-radius:6px 來獲得圖片圓角。
.img-circle：添加 border-radius:500px 來讓整個圖片變成圓形。
.img-thumbnail：添加一些內(nèi)邊距（padding）和一個灰色的邊框。

請看下面的實例演示：

<!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>

結(jié)果如下所示：

<img> 類

以下類可用于任何圖片中。

類	描述	實例
.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)用在圖片上：

實例

 <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

效果預(yù)覽 ?

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Bootstrap 圖片

<img> 類

響應(yīng)式圖片

實例