源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详解Bootstrap四种图片样式

  • 时间:2020-06-07 19:32 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解Bootstrap四种图片样式
在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距(padding)和一个灰色的边框 img-responsive 图片响应式 [b]1、img-rounded[/b]
<!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;} 效果: [img]http://files.jb51.net/file_images/article/201601/201601041032365.png[/img] [b]2、img-circle[/b]
<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-circle" >    
  </div> 
</body> 
.img-circle{border-radius:50%;} 效果(因为本图片的宽高大小不同,所以呈现出椭圆,如果将width和height设置相同,那么会呈现出一个圆): [img]http://files.jb51.net/file_images/article/201601/201601041032366.png[/img] [b]3、img-thumbnail[/b]
<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;} 效果: [img]http://files.jb51.net/file_images/article/201601/201601041032367.png[/img] [b]4、img-responsize[/b]
<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属性值被忽略): [img]http://files.jb51.net/file_images/article/201601/201601041032368.png[/img] 以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识,希望大家喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部