码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap系列 -- 23. 图片

时间:2015-06-25 22:50:26      阅读:170      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!