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

posted @ 2017-03-10 13:26  FUNCTIONQTANG  阅读(8005)  评论(0编辑  收藏  举报