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

 更新時(shí)間：2017年03月09日 14:50:33   作者：erdouzhang  

本文通過實(shí)例給大家詳解介紹了Bootstrap筆記之縮略圖、警告框知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

 1. 基礎(chǔ)縮略圖

給a標(biāo)簽添加類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>我是圖片標(biāo)題</h3>
        <p>我是對(duì)圖片的描述我是對(duì)圖片的描述我是對(duì)圖片的描述</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.警告框

點(diǎn)擊右上角叉號(hào)就關(guān)閉警示框。可以更改背景色alert-warning、alert-info、alert-success、alert-danger

可關(guān)閉的警示框添加類;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">&times;</button>
  <p>這里是提示信息</p>
</div>

以上所述是小編給大家介紹的 Bootstrap筆記之縮略圖、警告框?qū)嵗斀?，希望?duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

• Bootstrap警告框（Alert）插件使用方法
• Bootstrap縮略圖與警告框?qū)W習(xí)使用
• bootstrap警告框使用方法解析
• Bootstrap基本插件學(xué)習(xí)筆記之Alert警告框(20)
• Bootstrap每天必學(xué)之警告框插件
• bootstrap警告框示例代碼分享

• bootstrap
• 縮略圖
• 警告框

相關(guān)文章

• 

  javascript中call和apply的用法示例分析

  這篇文章主要介紹了javascript中call和apply的用法示例分析，非常的詳細(xì),需要的朋友可以參考下

  2015-04-04
• 

  詳解JavaScript如何實(shí)現(xiàn)并發(fā)控制的Promise隊(duì)列調(diào)度器

  Promise是JavaScript中一種處理異步操作的技術(shù)，提供了一種更優(yōu)雅的方式來處理并發(fā)任務(wù)和串行化操作，本文主要介紹了實(shí)現(xiàn)并發(fā)控制的Promise隊(duì)列調(diào)度器的方法，需要的可以參考一下

  2023-07-07
• 

  利用D3.js實(shí)現(xiàn)最簡單的柱狀圖示例代碼

  D3.js是一個(gè)基于數(shù)據(jù)操作文檔JavaScript庫。D3幫助你給數(shù)據(jù)帶來活力通過使用HTML、SVG和CSS。D3重視Web標(biāo)準(zhǔn)為你提供現(xiàn)代瀏覽器的全部功能，而不是給你一個(gè)專有的框架。最近在學(xué)習(xí)D3.js，這個(gè)例子是通過d3.js畫一個(gè)簡單的柱狀圖。下面來一起看看吧。

  2016-12-12
• 

  ES6知識(shí)點(diǎn)整理之對(duì)象解構(gòu)賦值應(yīng)用示例

  這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之對(duì)象解構(gòu)賦值應(yīng)用,結(jié)合實(shí)例形式分析了ES6對(duì)象解構(gòu)賦值相關(guān)概念、原理、出現(xiàn)的問題及相應(yīng)解決方法,需要的朋友可以參考下

  2019-04-04
• 

  ExtJs使用自定義插件動(dòng)態(tài)保存表頭配置(隱藏或顯示)

  這篇文章主要介紹了ExtJs使用自定義插件動(dòng)態(tài)保存表頭配置(隱藏或顯示) ,需要的朋友可以參考下

  2018-09-09
• 

  JS中如何讓異步執(zhí)行的方法同步執(zhí)行

  在寫js的時(shí)候,很多時(shí)候都會(huì)遇到異步轉(zhuǎn)同步的問題,下面這篇文章主要給大家介紹了關(guān)于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

  2024-04-04
• 

  基于JS實(shí)現(xiàn)web端錄音與播放功能

  這篇文章主要介紹了純js實(shí)現(xiàn)web端錄音與播放功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

  2019-04-04
• 

  JavaScript+HTML?實(shí)現(xiàn)網(wǎng)頁錄制音頻與下載

  在這個(gè)數(shù)字化的時(shí)代,網(wǎng)頁端的音頻處理能力已經(jīng)成為一個(gè)非常熱門的需求,本文將詳細(xì)介紹如何利用 getUserMedia 和 MediaRecorder 這兩個(gè)強(qiáng)大的 API,實(shí)現(xiàn)網(wǎng)頁端音頻的錄制、處理和播放等功能,需要的朋友可以參考下

  2024-07-07
• 

  JS正則表達(dá)式修飾符global(/g)用法分析

  這篇文章主要介紹了JS正則表達(dá)式修飾符global(/g)用法,結(jié)合實(shí)例形式分析了JS全局匹配修飾符/g的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

  2016-12-12
• 

  原生js實(shí)現(xiàn)選項(xiàng)卡功能

  本文主要介紹了原生js實(shí)現(xiàn)選項(xiàng)卡功能的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

  2017-03-03

最新評(píng)論