Bootstrap图片样式使用方法

在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">

 

写在最后

Bootstrap图片样式的类确实让我们调用起来更加方便快捷，当然，如果你有需要自定义的图片样式，可以在CSS中根据他们的编写形式来编写自己的图片样式类。