古风名字,玄幻小说完本,重生之毒妃梅果小说

Bootstrap筆記之縮略圖、警告框?qū)嵗斀?/h1>

2019-11-19 17:12:36

字體：大中小

供稿：網(wǎng)友

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.縮略圖添加內(nèi)容

這里寫圖片描述

<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.警告框

這里寫圖片描述

點擊右上角叉號就關閉警示框?？梢愿谋尘吧玜lert-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筆記之縮略圖、警告框?qū)嵗斀?，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！

上一篇：搭建簡單的nodejs http服務器詳解

下一篇：Bootstrap學習筆記之進度條、媒體對象實例詳解