詳解Bootstrap四種圖片樣式_javascript技巧
- WBOY原創
- 2016-05-16 15:22:15928瀏覽
在本章中，我們將學習 Bootstrap 對圖片的支持。 Bootstrap 提供了四個可對圖片套用簡單樣式的class，分別是：
img-rounded 增加 border-radius:6px 以獲得圖片圓角
img-circle 增加 border-radius:50% 讓整張圖片變成圓形
img-thumbnail 增加一些內邊距（padding）和一個灰色的邊框
img-responsive 圖片響應式
1、img-rounded
<!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
<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
<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;
background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-outout;border-radius:4px;transition:all 0.2s ease-in-outout;
4、img-responsize
<body style="padding: 20px;">
<div class = "container" style = "width:150px;">
<img src = "5.jpg" class="img-responsive" width="400px" >
</div>
</body>
效果(img中的width屬性值被忽略)：
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn