• 注册
当前位置:1313e > 默认分类 >正文

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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Bootstrap 图片

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

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

请看下面的实例演示:

实例


尝试一下 »

结果如下所示:

图片

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

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

响应式图片

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

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

实例

转载于:https://my.oschina.net/u/3222944/blog/1491575

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 162202241@qq.com 举报,一经查实,本站将立刻删除。

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录