前面的话

  图像在网页制作中也是常要用到的元素,本文将详细介绍Bootstrap图像

响应式图片

  通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放

img {
vertical-align: middle;
}
.img-responsive,.thumbnail>img,.thumbnail a >img,.carousel-inner > .item >img,.carousel-inner > .item > a >img {
display: block;
max-width: 100%;
height: auto;
}

  如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center

  在IE8-10浏览器中,设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性,因为这会导致其他图像格式出现错乱

<div>
<img src="http://via.placeholder.com/350x150" class="img-responsive" alt="Responsive image">
</div>

图片形状

  通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状

  1、img-rounded:圆角图片

  2、img-circle:圆形图片

  3、img-thumbnail:缩略图片

  对于圆角图片和圆形图片效果,因为是使用了CSS3的圆角样式border-radius来实现的,所以注意对于IE8以及其以下版本不支持,是没有圆角效果的。

.img-rounded {
border-radius: 6px;
}
.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;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
<div>
<img src="http://via.placeholder.com/140x140" alt="rounded" class="img-rounded">
<img src="http://via.placeholder.com/140x140" alt="circle" class="img-circle">
<img src="http://via.placeholder.com/140x140" alt="thumbnail" class="img-thumbnail">
</div>

Bootstrap图像的更多相关文章

  1. Bootstrap 图像

    一般的样式 在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前,我们将看到 Bootstrap 3 提供的定义图像的一般的样式. img { border: 0; } 这 ...

  2. bootstrap基础知识

    Bootstrap是Twitter推出的一款简洁.直观.强悍的前端开发框架. Bootstrap基于 HTML.CSS.JAVASCRIPT.它由Twitter的设计师Mark Otto和Jacob ...

  3. Bootstrap学习目录

    前面的话 Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系.只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的 ...

  4. Bootstrap-Other:v2 教程

    ylbtech-Bootstrap-Other:v2 教程 1.返回顶部 1. Bootstrap v2 教程 Bootstrap,来自 Twitter,是基于 HTML.CSS.JAVASCRIPT ...

  5. bootstrap学习笔记<七>(图标,图像)

    图像 bootstrap为图像预加载提供了很简洁的样式.(CDN:http://placehold.it/140x140:) PS:该CDN链接后的140x140可以根据网站需要更换合适的尺寸.例如: ...

  6. Bootstrap 之 Carousel

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  7. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  8. bootstrap学习笔记--bootstrap概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  9. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

随机推荐

  1. 新的WireGuard快照发布

    导读 WireGuard首席开发人员Jason Donenfeld宣布发布WireGuard 0.0.20190123,作为Linux系统和其他平台的安全VPN隧道实施的最新快照. WireGuard ...

  2. Twemproxy Redis 介绍与使用

    Twemproxy是一种代理分片机制,由Twitter开源.Twemproxy作为代理,可接受来自多个程序的访问,按照路由规则,转发给后台的各个Redis服务器,再原路返回.该方案很好的解决了单个Re ...

  3. Linux系列教程(五)——Linux常用命令之链接命令和权限管理命令

    前一篇博客我们讲解了Linux文件和目录处理命令,还是老生常淡,对于新手而言,我们不需要完全记住命令的详细语法,记住该命令能完成什么功能,然后需要的时候去查就好了,用的多了我们就自然记住了.这篇博客我 ...

  4. Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  5. socket、tcp、udp、http 的认识及区别

    一.先来一个讲TCP.UDP和HTTP关系的 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输 ...

  6. 使用xshell连接服务器,数字键盘无法使用解决办法

    打开会话管理器,选中需要设置的服务器连接,右键->属性 选中 终端->VT模式->初始数字键盘模式->设为普通 保存,重新连接即可.

  7. 配置Nginx反向代理WebSocket,以代理noVNC为例

    什么是Nginx Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器. Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮 ...

  8. item 11: 比起private undefined function优先使用deleted function

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果你为其他开发者提供代码,并且你想阻止他们调用一个特定的函数,你 ...

  9. TomCat 再次发布我的程序

    打包成.war的步骤就不说了,之后的配置和上一次的不一样. 在Tomcat的conf下的server.xml文件中,重新配置如下 <Service name="xfwweb" ...

  10. VMware/KVM/OpenStack虚拟化之网络模式总结

    一.VMware虚拟机网络模式 Vmware虚拟机有三种网络模式:Bridged (桥接模式).NAT (网络地址转换模式).Host-Only (仅主机模式).下面分别总结下这三种网络模式: 1. ...