Bootstrap教程(13)--圖像和縮略圖組

1. 概述

圖檔比文字傳達資訊更加直覺、更加具象，具備不可代替的意義。

必不可少的，Bootstrap也為圖像提供了一定支援，本篇就來具體介紹下。

2. 響應式圖像

通過給圖像設定.img-responsive類，即可将圖像設定為響應式圖像，可以自動适應容器的大小。

<img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-responsive">

1

3. 圖像樣式

Bootstrap還為圖像提供了三種常見的樣式：

.img-rounded：圓角圖像

.img-thumbnail：縮略圖樣式

.img-circle：圓形樣式

示例代碼：

<div class="row">
           <div class="col-md-4">
               <img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-responsive">
           </div>
           <div class="col-md-4">
               <img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-thumbnail">
           </div>
           <div class="col-md-4">
               <img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-circle">
           </div>
       </div>
      

對應效果如下，注意縮略圖是有一個邊框效果的。

4. 縮略圖組

除了可以将單一圖像設定為縮略圖，還可以将一組圖像都設定為縮略圖樣式，此時需要為圖像外圍容器設定

.thumbnail

類。

<div class="row" style="margin-top:8px;">
            <div class="col-xs-4 ">
                <div class="thumbnail">
                    <img src="bootstrap-logo.jpg" alt="Bootstrap logo">
                </div>
            </div>
            <div class="col-xs-4 ">
                <div class="thumbnail">
                    <img src="bootstrap-logo.jpg" alt="Bootstrap logo">
                </div>
            </div>
            <div class="col-xs-4 ">
                <div class="thumbnail">
                    <img src="bootstrap-logo.jpg" alt="Bootstrap logo">
                </div>
            </div>
        </div>
      

效果如下：

5. 小結

Bootstrap為圖像和縮略圖組提供了簡單的樣式類，主要是作為一個基礎效果，其實還提供了一定的靈活度，程式開發人員可以在此基礎上進一步定制。