Bootstrap图片

来源:互联网 发布:java consumer accept 编辑:程序博客网 时间:2024/05/10 13:12

1.Bootstrap提供了三个可对图片应用简单样式的class

.img-rounded:添加border-radius:6px来获得图片圆角,为图片添加圆角.img-circle:添加border-radius:50%来让整图片变成圆形.img-thumbnail:添加一些内边距(padding)和一个灰色的边框(缩略图功能)
<img src="/wp-content/uploads/2014/06/download.png"    class="img-rounded"><img src="/wp-content/uploads/2014/06/download.png"    class="img-circle"><img src="/wp-content/uploads/2014/06/download.png"    class="img-thumbnail">

2.响应式图片
添加.img-responsive类让图片支持响应式设计。图片将很好的扩展到父元素。.img-responsive类将max-width:100%和height:auto样式应用在图片上

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
0 0