當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap中实现图片圆角效果

發(fā)布時(shí)間：2023/12/2 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap中实现图片圆角效果小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Bootstrap 對(duì)圖片的支持。Bootstrap 提供了三個(gè)可對(duì)圖片應(yīng)用簡單樣式的 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?href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"?rel="stylesheet">??

???<script?src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>??

???<script?src="http://libs.baidu.com/bootstrap/3.0.3/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)式 (將很好地?cái)U(kuò)展到父元素)

總結(jié)

以上是生活随笔為你收集整理的Bootstrap中实现图片圆角效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：解决IE8下body{ overflow
下一篇： Bootstrap中的条纹进度条使用案例