Bootstrap图片的应用

  主要有三种效果：

   第一、 img-rounded：通过添加border-radius:6px使得图片呈现圆角(IE8不支持)

   第二、 img-circle:通过添加border-radius:500px使得图片变成圆形（IE8不支持）

   第三、 img-thumbnail:通过添加padding和一个灰色的边框显示

   为了在其他设备上有更友好的适用性显示我们可以添加：img-responsive.等于设置(max-width:100%,height：auto;)

  

实例代码如下：

   <div class="container">

          <div class="row">

                       <div class="col-lg-4">

                              <img alt="" class="img-responsive img-circle" src="Images/earth.jpg" />

                        </div>

                         <div class="clo-lg-4">

                               <img alt="" class="img-responsive img-rounded" src="Images/rose.jpg" />

                         </div>

                         <div class="clo-lg-4">

                                <img alt="" class="img-responsive img-thunbnail"  src="Images/servicer.jpg"/>

                         </div>

          </div>

</div>

 

效果图如下：