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
投稿猜你喜欢
- Python面向对象编程（一）Python面向对象编程（二）Python面向对象编程（三）一、对象的继承Python中支持一个类同时继承多个
基于Bootstrap jQuery.validate Form表单验证实践项目结构 ：github 上源码地址：https://githu- 细心的人都会发现GitHub个人主页有一个记录每天贡献次数的面板，我暂且称之为贡献面板。就像下图那个样子。只要当天在GitHub有提交记录，
- 本文实例为大家分享了python3实现证件照背景替换的具体代码，供大家参考，具体内容如下import cv2import numpy as
- 最近做项目正好需要坐标的转换各地图API坐标系统比较与转换;WGS84坐标系：即地球坐标系，国际上通用的坐标系。设备一般包含GPS芯片或者北
- 本文实例分析了Flask和Django框架中自定义模型类的表名、父类相关问题。分享给大家供大家参考，具体如下：一. Flask和Django
- Accessibility—-可访问性/无障碍访问Accessibility在此处指网页的可访问性。W3C的网页可访问性定义如下：“网页可访
- 目录1.爬虫文件2.items.py3.pipelines.py4.进行持久化存储之前我们使用lxml对梨视频网站中的视频进行了下载，感兴趣
- NLTK 是使用 Python 教学以及实践计算语言学的极好工具。此外，计算语言学与人工 智能、语言/专门语言识别、翻译以及语法检查等领域关
- 1、创建保存mysql备份文件的路径 /mysqldata #mkdir /mysqldata 2、创建/usr/sbin/bakmysql
- 问题：数据库实际大小为600MB, 日志文件实际大小为33MB, 但日志文件占用空间为2.8GB!试了多种方式，SHIRNK DATABAS
- 本文实例讲述了Python封装原理与实现方法。分享给大家供大家参考，具体如下：【封装】 隐藏对象的属性和实现细节，仅对外提供公共访
- 首先看一下目标的验证形态是什么样子的是一种通过验证推理的验证方式，用来防人机破解的确是很有效果，但是，But，这里面已经会有一些破绽，比如：
- 出现原因：缺失相应的whl文件。解决办法：下载并安装对应的whl文件。提供一个whl文件的下载网址：http://www.lfd.uci.e
- 阅读上一篇：交互设计模式(二)-Pagination(分页,标记页数) Tagging(标签)问题摘要用户往往想通过流行或最详尽的主题来浏览
- row_number()over(partition by col1 order by col2)表示根据col1分组，在分组内部根据col
- 本文实例讲述了Python访问MySQL封装的常用类。分享给大家供大家参考。具体如下：python访问mysql比较简单,下面整理的就是一个
- 本文实例讲述了MySQL中USING 和 HAVING 用法。分享给大家供大家参考，具体如下：USING用于表连接时给定连接条件（可以理解为
- 解决这个问题的办法有三种： 1. 增加 MySQL 的 wait_timeout 属性的值。 修改 /etc/mysql/my.cnf文件，
- 引言Go 语言中数组可以存储同一类型的数据，但在结构体中我们可以为不同项定义不同的数据类型结构体是由一系列具有相同类型或不同类型的数据构成的
