1. 基礎縮圖
給a標籤新增類class="thumbnail"如下：
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="圖片"></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="圖片"></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="圖片"></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="thumbnail"><img src="img/01.png" alt="圖片"></a>
</div>
</div>2.縮圖新增內容
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/01.png" alt="圖片"></a>
<div class="caption">
<h3>我是圖片標題</h3>
<p>我是對圖片的描述我是對圖片的描述我是對圖片的描述</p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">按鈕</a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-danger">按鈕</a></p>
</div>
</div>
</div>
</div>3.警告框
點選右上角叉號就關閉警示框。可以更改背景色alert-warning、alert-info、alert-success、alert-danger
可關閉的警示框新增類;alert-dismissible和按鈕button.
也可以在警告框中新增a連結：
<p>這裡是提示資訊<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">百度</a></p>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<p>這裡是提示資訊</p>
</div>以上所述是小編給大家介紹的 Bootstrap筆記之縮圖、警告框例項詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援！
您可能感興趣的文章:
Bootstrap警告框（Alert）外掛使用方法Bootstrap縮圖與警告框學習使用bootstrap警告框使用方法解析Bootstrap基本外掛學習筆記之Alert警告框(20)Bootstrap每天必學之警告框外掛bootstrap警告框示例程式碼分享