详解Bootstrap四种图片样式

前端技术 2023/09/06 JavaScript

在本章中，我们将学习 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-out;}

效果：

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-responsive{display:block;max-width:100%;height:auto;}

效果(img中的width属性值被忽略)：


以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识，希望大家喜欢。

本文地址：https://www.stayed.cn/item/16409

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案