杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

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中根据他们的编写形式来编写自己的图片样式类。

佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。