本文給大家介紹Bootstrap 對圖片的支持，Bootstrap提供了四個可對圖片應用簡單樣式的class，對Bootstrap四種圖片class相關知識感興趣的朋友一起學習吧
在本章中，我們將學習 Bootstrap 對圖片的支持。Bootstrap 提供了四個可對圖片應用簡單樣式的class，分別是：
img-rounded 添加 border-radius:6px 來獲得圖片圓角
img-circle 添加 border-radius:50% 來讓整個圖片變成圓形
img-thumbnail 添加一些內邊距（padding）和一個灰色的邊框
img-responsive 圖片響應式
1、img-rounded
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!doctype html>
<html lang=
"en"
>
<head>
<!--網站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼-->
<meta http-equiv=
"content-type"
content=
"text/html;charset=utf-8"
/>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta name=
"Keywords"
content=
"關鍵詞一，關鍵詞二"
>
<meta name=
"Description"
content=
"網站描述內容"
>
<meta name=
"Author"
content=
"Yvette Lau"
>
<meta name =
"viewport"
content =
" width = device-width, initial-scale = 1 "
>
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel=
"stylesheet"
type=
"text/css"
href=
"../bootstrap-3.3.5-dist/css/bootstrap.min.css"
>
</head>
<body style=
"padding: 20px;"
>
<div class =
"container"
>
<img src =
"5.jpg"
class=
"img-rounded"
>
</div>
</body>
</html>
|
.img-rounded{border-radius:6px;}
效果：
2、img-circle
|
1
2
3
4
5
|
<body style=
"padding: 20px;"
>
<div class =
"container"
>
<img src =
"5.jpg"
class=
"img-circle"
>
</div>
</body>
|
.img-circle{border-radius:50%;}
效果(因為本圖片的寬高大小不同，所以呈現出橢圓，如果將width和height設置相同，那么會呈現出一個圓)：
3、img-thumbnail
|
1
2
3
4
5
6
7
|
<body style=
"padding: 20px;"
>
<div class =
"container"
>
<img src =
"5.jpg"
class=
"img-thumbnail"
>
<img src =
"4.jpg"
class=
"img-thumbnail"
>
<img src =
"3.jpg"
class=
"img-thumbnail"
>
</div>
</body>
|
.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}
效果：
4、img-responsize
|
1
2
3
4
5
|
<body style=
"padding: 20px;"
>
<div class =
"container"
style =
"width:150px;"
>
<img src =
"5.jpg"
class=
"img-responsive"
width=
"400px"
>
</div>
</body>
|
.img-responsive{display:block;max-width:100%;height:auto;}
效果(img中的width屬性值被忽略)：
以上內容分步驟給大家介紹了Bootstrap四種圖片樣式的相關知識，希望大家喜歡。