响应式图像

标签：

• .img-rounded：添加 border-radius:6px 来获得图片圆角。
• .img-circle：添加 border-radius:500px 来让整个图片变成圆形。
• .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">

响应式图像：

<div class="container">
      <h2>图片</h2>
      <p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>                 
      <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
    </div>

缩略图：

• 在图像周围添加带有 class .thumbnail 的 <a> 标签。
• 这会添加四个像素的内边距（padding）和一个灰色的边框。
• 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

• <div class="row">
     <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="/wp-content/uploads/2014/06/kittens.jpg" 
           alt="通用的占位符缩略图">
        </a>
     </div>
     <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="/wp-content/uploads/2014/06/kittens.jpg" 
           alt="通用的占位符缩略图">
        </a>
     </div>
     <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="/wp-content/uploads/2014/06/kittens.jpg" 
           alt="通用的占位符缩略图">
        </a>
     </div>
     <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
           <img src="/wp-content/uploads/2014/06/kittens.jpg" 
           alt="通用的占位符缩略图">
        </a>
     </div>
  </div>
  

响应式图像

标签：

原文地址：http://www.cnblogs.com/liuyuanhao/p/4343053.html