详解Bootstrap四种图片样式
本文给大家介绍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四种图片样式的相关知识,希望大家喜欢。