首页 > 其他 > 详细

Bootstrap系列 -- 23. 图片

时间:2015-06-25 22:47:10      阅读:347      评论:0      收藏:0      [点我收藏+]

 

  

  图像在网页制作中也是常要用到的元素,在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> 

 

Bootstrap系列 -- 23. 图片

原文:http://www.cnblogs.com/qingyuan/p/4600949.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!