Bootstrap实现圆角、圆形头像和响应式图片
作者：Tiramisu_C 发布时间：2023-08-12 07:16:59
标签：Bootstrap,圆角头像,响应式图片
Bootstrap提供了四种用于<img>类的样式，分别是：
.img-rounded：圆角 (IE8 不支持)，添加 border-radius:6px 来获得图片圆角；
.img-circle：圆形 (IE8 不支持)，添加 border-radius:50％ 来让整个图片变成圆形。
.img-thumbnail：缩略图功能，添加一些内边距（padding）和一个灰色的边框。
.img-responsive：图片响应式 (将很好地扩展到父元素)。
使用：
将类样式直接添加到class中即可：
<img class="img-circle" src="img.jpg" alt="头像"/>
效果如下：
从图中可以看到使用各种样式得到的效果，处理起图片来非常的简单方便。有时候根据需要，比如我们需要用一个具有内边距和灰色边框的圆形头像时，可以将circle和thumbnail两个样式叠加使用，效果如上图circle thumbnail所示。
img-responsive使得我们的图片具有响应式的效果。所谓响应式，就是变化的，随着某一个元素的变化而变化，从而实现自适应的效果。
上图中的responsive两个图片代码如下：
<figure style="width: 150px;height: 150px;">
<figcaption>responsive(150*150)</figcaption>
<img class="img-responsive " src="img.jpg" alt="头像"/>
</figure>
<figure style="width: 100px;height: 100px;">
<figcaption>responsive(100*100)</figcaption>
<img class="img-responsive " src="img.jpg" alt="头像"/>
</figure>
在这里我们没有设置图片的大小，但是设置了包裹他的元素figure 的大小，无论figure为150px*150px或者100px*100px，图片都能够很好的扩展到父元素figure。
本文参考来自：http://www.runoob.com/bootstrap/bootstrap-images.html
0
投稿猜你喜欢
- 我的测试环境是2000sever ie6.0+sp4 MYIE1.31 (成功通过测试）关闭窗口的途径常用4种：1.双击左上角图标2.直接双
前几天在“CSS那些事儿”的群中，一位读者朋友（小土豆）问我书中提到首字下沉的时候为什么要增加一个清除浮动。当时我自己一时迷惑了，为什么呢，- User Centered Design 以用户为中心的设计，一说到这个很多人马上想到互联网和软件的设计，因为在IT、互联网行业提得最多。其
- 在Go语言中，我们可以使用for、append()和copy()进行数组拷贝，对于某些对性能比较敏感且数组拷贝比较多的场景，我们可以会对拷贝
- <script language="vbscript" runat="s
- 一个XML文档如果符合一些基本的规范，那它就是结构规范的。XML格式有一套比HTML简单的解析规则，允许XML解析器不需要外部描述或了解数据
- 看看下面的w3 upload组件例子，很简单： upload.asp<html> <head>
- Firefox 3 有一个很让人讨厌的bug：基于某种目的，在表单提交时 disable 掉提交按钮，通过后退键回到这个页面后，这个提交按钮
- 在安装SQL Server 2000 ，安装进程自动地为“BUILTIN\Administrators&rdqu
- <div class=”A” style=”position:relative;”>A
- 这片文章只对本地存储方法做介绍，若要查看本地存储组件使用方法的介绍请稍等。本地数据持久化（或者也叫做浏览器本地存储）是一种在浏览器中长久保存
- Div的浮动+循环（描述的不清楚，请看图）在设计和布局的时候，碰到图片循环问题，碰到间距问题，怎么样让循环的图片每行的起始点跟上边的titl
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- TeX 排版中文字体嵌入问题，兼谈不拘小节的中文字体设计原文：http://yulewang.spaces.live.com/blog/cn
- 给输入框加个动态背景图<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi
- 听说安全地断开Connection连接的记录集可以提高ASP的运行速度，请问如何实现？很多人会将一个Connection对象存储在Appli
- 一、输出指令ASP的输出指令<％ =expression ％>显示表达式的值。这个输出指令等同于使用Resp
- 1. 简介本文将介绍 Go 语言中的 sync.Cond 并发原语，包括 sync.Cond的基本使用方法、实现原理、使用注意事项以及常见的
- 前言这次，我们要用Pygame写一个Pong游戏先看看效果：需要的模块：Pygame在python文件同目录下新建resources文件夹，
- 没有多大变动，主要是返回错误信息，以便调用函数部分可以alert出来。据说可以用正则表达式校验，下次再研究下。//-------------
