Bootstrap筆記之縮圖、警告框例項詳解

Bootstrap筆記之縮圖、警告框例項詳解

 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警告框示例程式碼分享