您的位置：首页 > Web前端 > BootStrap

Bootstrap系列 -- 23. 图片

2015-06-25 21:07 686 查看
　　

　　图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

　　1、img-responsive：响应式图片，主要针对于响应式设计
　　2、img-rounded：圆角图片
　　3、img-circle：圆形图片
　　4、img-thumbnail：缩略图片

<div class="container">
<div class="row">
<div class="col-sm-4">
<img   alt="140x140" src="http://placehold.it/140x140">
<div>默认图片</div>
</div>
<div class="col-sm-4">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<div>圆角图片</div>
</div>
<div class="col-sm-4">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<div>圆形图片</div>
</div>
<div class="row">
<div class="col-sm-6">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<div>缩略图</div>
</div>
<div class="col-sm-6">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" style="width:40px;height:40px;"/>
<div>响应式图片</div>
</div>
</div>
</div>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航