Bootstrap縮圖，bootstrap縮圖大小

Bootstrap縮圖，bootstrap縮圖大小
前面的話

　　縮圖在網站中最常用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底部（左側或右側）帶有標題、描述等資訊。Bootstrap架構將這一部獨立成一個模組組件，本文將詳細介紹Bootstrap縮圖

 

概述

　　Boostrap 縮圖的預設設計僅需最少的標籤就能展示帶連結的圖片，通過“thumbnail”樣式配合bootstrap的網格系統來實現縮圖

　　thumbnail中文翻譯是拇指指甲，確實有些像縮圖，中間是圖片，圖片周圍是一小圈空白，外面是邊框和圓角，下面是文字

.thumbnail {  display: block;  padding: 4px;  margin-bottom: 20px;  line-height: 1.42857143;  background-color: #fff;  border: 1px solid #ddd;  border-radius: 4px;  -webkit-transition: all .2s ease-in-out;          transition: all .2s ease-in-out;}.thumbnail > img,.thumbnail a > img {  margin-right: auto;  margin-left: auto;}a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active {  border-color: #428bca;}.thumbnail .caption {  padding: 9px;  color: #333;}

<div class="container">    <div class="row">        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>        </div>        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>        </div>        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>        </div>        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>        </div>    </div></div>

 

自訂內容

　　在僅有縮圖的基礎上，添加了一個div名為“caption“的容器，在這個容器中放置其他內容，比如標題，文本描述，按鈕等

.thumbnail .caption {  padding: 9px;  color: #333;}

<div class="container">    <div class="row">        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>            <div class="caption">                <h3>小火柴的藍色理想</h3>                <p>好的代碼像粥一樣，都是用時間熬出來的</p>                <p>                    <a href="##" class="btn btn-primary">確認</a>                    <a href="##" class="btn btn-info">取消</a>                </p>            </div>         </div>        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>            <div class="caption">                <h3>小火柴的藍色理想</h3>                <p>好的代碼像粥一樣，都是用時間熬出來的</p>                <p>                    <a href="##" class="btn btn-primary">確認</a>                    <a href="##" class="btn btn-info">取消</a>                </p>            </div>         </div>        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>            <div class="caption">                <h3>小火柴的藍色理想</h3>                <p>好的代碼像粥一樣，都是用時間熬出來的</p>                <p>                    <a href="##" class="btn btn-primary">確認</a>                    <a href="##" class="btn btn-info">取消</a>                </p>            </div>         </div>        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="http://via.placeholder.com/100x100"" alt="#">            </a>            <div class="caption">                <h3>小火柴的藍色理想</h3>                <p>好的代碼像粥一樣，都是用時間熬出來的</p>                <p>                    <a href="##" class="btn btn-primary">確認</a>                    <a href="##" class="btn btn-info">取消</a>                </p>            </div>         </div>                    </div></div>