快捷導(dǎo)航

Bootstrap縮略圖與警告框?qū)W習(xí)使用

更新時間：2017年02月08日 15:22:14 作者：輕擾時光

這篇文章主要為大家詳細(xì)介紹了Bootstrap縮略圖與警告框?qū)W習(xí)使用的相關(guān)資料，希望通過這篇文章和大家更多的去學(xué)習(xí)Bootstrap縮略圖與警告框，從中得到收獲

本文實(shí)例為大家分享了Bootstrap縮略圖與警告框的具體代碼，供大家參考，具體內(nèi)容如下

<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container">
 <div class="row">
 <div class="col-lg-3"><!--thumbnail為縮略圖,外圍加了邊框并變?yōu)閳A角-->
 <a href="http://www.dbjr.com.cn" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="http://www.dbjr.com.cn" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="http://www.dbjr.com.cn" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="http://www.dbjr.com.cn" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 </div>
 <div class="row">
 <div class="col-lg-4">
 <div class="thumbnail"><!--給父級加上thumbnail-->
  <a href="http://www.dbjr.com.cn">
  <img src="../logo.jpg"/>
  </a>
  <div class="caption"><!--可以增加圖片與文字之間的距離-->
  <h3>水果</h3>
  <p>蘋果梨橘子葡萄柚子香蕉蘋果梨橘子葡萄柚子香蕉</p>
  </div>
 </div>
 </div>
 </div>
 </div>
 <div class="container">
 <div class="row">
 <p class="alert alert-danger">這里是一個警告框?。?！<button class="close" data-dismiss="alert">&times;</button></p><!--data-dismiss="alert"使其與js進(jìn)行交互-->
 </div>
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

前端防止用戶重復(fù)提交js實(shí)現(xiàn)代碼示例
這篇文章主要給大家介紹了關(guān)于前端防止用戶重復(fù)提交js實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起看看吧
2018-09-09
詳解Javascript中的原型OOP
相信現(xiàn)在的很多程序員或多或少的都會寫JS，大部分也知道JS是基于原型的語言，但是如果問及JS原生對象（Object,Function,Array,Date等）的這個原型鏈長什么樣子？估計(jì)能回答出來的人就少了，所以這篇文章就給大家詳細(xì)介紹下，有需要的可以參考借鑒。
2016-10-10
在Javascript操作JSON對象，增加刪除修改的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄贘avascript操作JSON對象，增加刪除修改的簡單實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
laydate 顯示結(jié)束時間不小于開始時間的實(shí)例
下面小編就為大家?guī)硪黄猯aydate 顯示結(jié)束時間不小于開始時間的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
一文總結(jié)JavaScript中常見的設(shè)計(jì)模式
在程序設(shè)計(jì)中有很多實(shí)用的設(shè)計(jì)模式，而其中大部分語言的實(shí)現(xiàn)都是基于“類”。在程序設(shè)計(jì)中有很多實(shí)用的設(shè)計(jì)模式，而其中大部分語言的實(shí)現(xiàn)都是基于“類”。，本文將總結(jié)了JavaScript中常見的十五種設(shè)計(jì)模式，感興趣的朋友可以參考下
2023-05-05
微信小程序遍歷Echarts圖表實(shí)現(xiàn)多個餅圖
這篇文章主要介紹了微信小程序遍歷Echarts圖表實(shí)現(xiàn)多個餅圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及遇到的坑
JavaScript是一個神奇的語言，字符串轉(zhuǎn)數(shù)字有5種方法，各有各的坑法!接下來通過本文給大家介紹JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及其陷阱，感興趣的朋友一起看看吧
2018-07-07
使用原生js實(shí)現(xiàn)頁面蒙灰(mask)效果示例代碼
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當(dāng)然jquery也提供了這種蒙灰方法，下面有個示例，大家可以參考下
2014-06-06
微信小程序中使用echarts的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序中使用echarts的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
一文詳解Proxy和Object.defineProperty的使用與區(qū)別
在JavaScript中,對象是一種核心的數(shù)據(jù)結(jié)構(gòu),而對對象的操作也是開發(fā)中經(jīng)常遇到的任務(wù),本文將深入比較Proxy和Object.defineProperty,感興趣的小伙伴可以了解下
2023-12-12