脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 图片

详解Bootstrap四种图片样式

 更新时间：2016年01月04日 10:34:35   投稿：mrr  
本文给大家介绍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

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

您可能感兴趣的文章:

相关文章

  • 使用js实现复制功能

    使用js实现复制功能

    这篇文章主要为大家详细介绍了使用js实现复制功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 微信小程序之事件交互操作实例分析

    微信小程序之事件交互操作实例分析

    这篇文章主要介绍了微信小程序之事件交互操作,结合实例形式分析了微信小程序事件响应、交互及界面布局等相关操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • js实现自定义进度条效果

    js实现自定义进度条效果

    本文主要介绍了js实现自定义进度条效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js+数组实现网页上显示时间/星期几的实用方法

    js+数组实现网页上显示时间/星期几的实用方法

    在网页上显示时间(年月日/时分秒),很多新手朋友都想实现这样的功能，本文整理了一些实用技巧，杀出来与大家分享，感兴趣的朋友可以了解下
    2013-01-01
  • webpack@v4升级踩坑(小结)

    webpack@v4升级踩坑(小结)

    这篇文章主要介绍了webpack@v4升级踩坑(小结),之前就尝试了升级，由于部分插件的原因，未能成功,今天就来试一下在我的项目中升级会遇到哪些坑。感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Vue项目中关于全局css的处理

    Vue项目中关于全局css的处理

    我们在写CSS的时候，会遇到大量相同的属性(比如：margin-top:10px)这种属性几乎每个vue页面都有。这个时候，我们可以把css挂载到全局上，供所有vue页面使用，同时也方便修改。感兴趣的同学可以参考一下
    2023-04-04
  • 分析JS中this引发的bug

    分析JS中this引发的bug

    这篇文章主要介绍了分析JavaScript中this引发的bug以及相关的处理方法分析，一起学习下吧。
    2017-12-12
  • JS解决iframe之间通信和自适应高度的问题

    JS解决iframe之间通信和自适应高度的问题

    关于iframe之间的通信问题与自适应高度问题网上有很多，那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题，有需要的可以参考借鉴。
    2016-08-08
  • 如何使用 Intl.RelativeTimeFormat 在 JavaScript 中进行相对时间格式化

    如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs

    Intl.RelativeTimeFormat是JavaScript提供的一个国际化API,用于格式化相对时间,如"3天前"或"2年后",支持多种语言和配置选项,适用于社交媒体时间戳和事件提醒等场景,它简化了国际化的相对时间显示,使开发者能够根据用户的语言和区域设置轻松实现时间格式化
    2024-09-09
  • 小程序自动化测试的示例代码

    小程序自动化测试的示例代码

    这篇文章主要介绍了小程序自动化测试，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论