在Bootstrap中自带了几种图片样式,能够让你很快地对其进行使用,这几种样式使用起来相当简单,让我们一起来看看怎么快速调用Bootstrap图片样式。
Bootstrap图片圆角样式
在现今的网站建设中,由于扁平化设计的趋势,我们经常会用用到一些CSS3的特性,例如圆角、渐变、阴影等。同样我们也可以用Bootstrap迅速对图片进行圆角设置,
代码如下:
<img src="/img/pic.jgp" alt="圆角图片" class="img-rounded">
不过需要注意的是,由于IE8并不支持圆角属性,所以这一效果在IE8及以下浏览器无法查看。
Bootstrap图片圆形样式
除了圆角样式之外,我们也很喜欢在一些图片调用情况下采用圆形图片,同样在Bootstrap也为这种情况设置了一个样式,
代码如下:
<img src="/img/pic.jpg" alt="圆形图片" class="img-circle">
Bootstrap缩略图样式
如果我们需要在文章的简介处加入缩略图,那么也可以直接通过Bootstrap自带的图片缩略图样式对图片进行设置,
代码如下:
<img src="/img/pic.jpg" alt="缩略图图片" class="img-thumbnail">
Bootstrap响应式图片样式
由于响应式布局的风靡,我们常常需要在网站中引入对图片进行响应式处理,从而适应各个终端,采用Bootstrap也能快速地达到这个目标,也只需要添加响应式图片类即可
<img src="/img/pic.jpg" alt="响应式图片" class="img-responsive">