文档章节

学习Bootstrap知识记录点-----图片操作

覃光林
 覃光林
发布于 2017/07/28 15:25
字数 285
阅读 6
收藏 0

Bootstrap 图片

在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class:

  • .img-rounded:添加 border-radius:6px 来获得图片圆角。
  • .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
  • .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

请看下面的实例演示:

实例

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded"> <img src="/wp-content/uploads/2014/06/download.png" class="img-circle"> <img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">


尝试一下 »

结果如下所示:

图片

<img> 类

以下类可用于任何图片中。

描述 实例
.img-rounded 为图片添加圆角 (IE8 不支持) 尝试一下
.img-circle 将图片变为圆形 (IE8 不支持) 尝试一下
.img-thumbnail 缩略图功能 尝试一下
.img-responsive 图片响应式 (将很好地扩展到父元素) 尝试一下

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上:

实例

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

© 著作权归作者所有

覃光林
粉丝 12
博文 124
码字总数 60000
作品 0
深圳
QA/测试工程师
私信 提问
34岁!100天!学会Java编程(Day20-Day28)—Web前端编程

什么是Web前端? 引子:Web编程深似海 原计划用8天时间进行Web前端的学习,结果拖延了,原因自然是对这部分内容学习的难度估计不足。我的方法还是试图一开始了解web编程的全貌,结果发现整个...

魏小筠
2017/11/25
0
0
Android 开发(一)项目概况

开始写博客,自己是边学习边做开发,将自己开发的过程记录下来,能够对学习的知识进行梳理,也可以对学习做个总结。 首先是对项目的介绍: 做一个功能全面的软件,希望能将自己学习到的知识都...

jysong
2013/09/07
0
0
学习之路/目录

目标 从今日起,我将开启我的学习模式,我会将我每学习的一个技能,分享学习的过程和内容,在记录自己知识点的同时也分享经验,有不足之处还希望朋友们见谅,毕竟本人能力有限。 路线 我的知...

DennisGuo
2015/11/23
55
0
从零开始学 Web 之 移动Web(九)微金所案例

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/16
0
0
[译] 用 30 分钟建立一个网站的方式来学习 Bootstrap 4

原文地址:Learn Bootstrap 4 in 30 minutes by building a landing page website 原文作者:SaidHayani@ 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Zheng7426...

zheng7426
2018/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

解决vim打开之后乱码的问题

在Windows中的文档,传输到Linux系统中(使用rz命令),出现乱码 root@localhost ~]# rpm -qf `which iconv` glibc-common-2.17-105.el7.x86_64 [root@localhost ~]# rpm -ihv /mnt/Packages......

寰宇01
16分钟前
0
0
aldi 2017年1月记录

../../tools/CBLAS/lib/cblas_LINUX.a ../../tools/lapack-3.4.2/liblapacke.a \../../tools/lapack-3.4.2/librefblas.a -lgfortran \../../tools/lapack-3.4.2/liblapack.a \../../......

MtrS
17分钟前
0
0
Choerodon如何进行日志收集与告警

作者:董文启 应用程序日志是由软件应用程序记录的事件文件, 它一般包含错误,信息事件和警告。一个良好的日志系统有助于快速发现问题,定位问题,同时也为业务分析起到一定的作用。 传统E...

Choerodon
29分钟前
1
0
js二维码生成插件“jquery.qrcode.min.js”

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>生成二维码</title> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scri......

泉天下
32分钟前
0
0
Spring AOP之同一个对象方法内部自调用导致事务失效问题

对于像我这种喜欢滥用AOP的程序员,遇到坑也是习惯了,不仅仅是事务,其实只要脱离了Spring容器管理的所有对象,对于SpringAOP的注解都会失效,因为他们不是Spring容器的代理类,SpringAOP,就切入不...

xiaomin0322
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部