Bootstrap系列 -- 23. 圖片

 

　　

　　影象在網頁製作中也是常要用到的元素，在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>