閱讀(92.3k) 書簽贊(15) 我要糾錯(cuò)

Bootstrap 圖片

2022-05-21 15:17 更新

Bootstrap 圖片

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

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

請(qǐng)看下面的實(shí)例演示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 圖片</title>
   <link  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" ></script>
</head>
<body>

<img src="http://www.o2fo.com/statics/demosource/download.png" class="img-rounded">
<img src="http://www.o2fo.com/statics/demosource/download.png" class="img-circle">
<img src="http://www.o2fo.com/statics/demosource/download.png" class="img-thumbnail">

</body>
</html>

結(jié)果如下所示：

<img> 類

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

類	描述	實(shí)例
.img-rounded	為圖片添加圓角 (IE8 不支持)	嘗試一下
.img-circle	將圖片變?yōu)閳A形 (IE8 不支持)	嘗試一下
.img-thumbnail	縮略圖功能	嘗試一下
.img-responsive	圖片響應(yīng)式 (將很好地?cái)U(kuò)展到父元素)	嘗試一下