6.6 图片和图标
Bootstrap
提供了系列图片相关的样式并提供了大量可用的小图标。
6.6.1 图片相关样式
Bootstrap
为图片提供了如下几个样式。
样式类 |
描述 |
.img-responsive |
响应式图片。通过为图片设置max-width:100%; 、height:auto; 和display:block; 等属性,使得图片在父元素中可以得到更好的缩放。 |
.center-block |
如果要让响应式图片水平居中,应设置该样式。 |
.img-rounded |
设置圆角图片。 |
.img-circle |
圆形图片。 |
.img-thumbnail |
缩略图图片。该样式会在图片四周添加一圈淡灰色的边框。 |
|
|
# 程序示例 # |
|
下面页面代码示范了图片相关的样式。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| <!DOCTYPE html> <html>
<head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 图片相关样式 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <div class="container"> <div class="row"> <div class="col-sm-3"> <h3>默认图片</h3> <img src="../javaee_half.png" alt="javeee"> </div> <div class="col-sm-3"> <h3>圆角图片</h3> <img src="../javaee_half.png" alt="javeee" class="img-rounded"> </div> <div class="col-sm-3"> <h3>圆形图片</h3> <img src="../javaee_half.png" alt="javeee" class="img-circle"> </div> <div class="col-sm-3"> <h3>缩略图图片</h3> <img src="../javaee_half.png" alt="javeee" class="img-thumbnail"> </div> </div> <div class="row"> <div class="col-sm-3"> <h3>响应式图片</h3> <img src="../javaee_half.png" alt="javeee" class="img-responsive"> </div> </div> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
|
|
响应式图片会随着它所在的容器的大小改变而自动缩放。当然,缩略图图片也会随着它所在容器的大小改变而自动缩放,但缩略图图片的四周会被添加淡灰色的边框。
需要说明的是,.img-responsive
样式可与.img-rounded
、.img-circle
样式结合使用,例如希望实现响应式
的圆形图片
,可通过如下代码实现。
1
| <img src=". /xxx.png" alt="xxx" class="img-circle img-responslve">
|
原文链接: 6.6 图片和图标 6.6.1 图片相关样式