快捷導(dǎo)航

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

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

這篇文章主要為大家詳細(xì)介紹了Bootstrap縮略圖與警告框?qū)W習(xí)使用的相關(guān)資料，希望通過(guò)這篇文章和大家更多的去學(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://m.fzitv.net" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="http://m.fzitv.net" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="http://m.fzitv.net" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 <div class="col-lg-3">
 <a href="http://m.fzitv.net" class="thumbnail">
  <img src="../logo.jpg"/>
 </a>
 </div>
 </div>
 <div class="row">
 <div class="col-lg-4">
 <div class="thumbnail"><!--給父級(jí)加上thumbnail-->
  <a href="http://m.fzitv.net">
  <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">這里是一個(gè)警告框！??！<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>

效果圖：

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

您可能感興趣的文章:

相關(guān)文章

JavaScript處理XML DOM、XPath和XSLT方法詳解
這篇文章介紹了JavaScript處理XML DOM、XPath和XSLT的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
實(shí)現(xiàn)隔行換色效果的兩種方式【實(shí)用】
本文主要介紹了實(shí)現(xiàn)隔行顏色交替鼠標(biāo)經(jīng)過(guò)高亮顏色的兩種方式的具體實(shí)例，有助于理解和使用。方案一：純CSS編寫；方案二：js代碼編寫。需要的朋友可以參考下
2016-11-11
$JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析$
JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析
這篇文章主要介紹了JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
基于jquery的高性能td和input切換并可修改內(nèi)容實(shí)現(xiàn)代碼
在實(shí)際工作中，我們會(huì)碰到這樣一個(gè)情況。在頁(yè)面中顯示著100個(gè)數(shù)據(jù)，同時(shí)用戶還希望他可以更改其中的數(shù)據(jù)，普通的方式可能如下
2011-01-01
js中的WebSocket使用及說(shuō)明
這篇文章主要介紹了js中的WebSocket使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果,涉及javascript定時(shí)器觸發(fā)動(dòng)態(tài)改變頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
JavaScript繪制游戲地圖并且操控人物移動(dòng)
JavaScript開發(fā)小游戲,目標(biāo)是使用JavaScript繪制簡(jiǎn)單的二維地圖,采用二維數(shù)組存儲(chǔ)地圖信息,使用表格繪制地圖,每個(gè)td單元格存儲(chǔ)數(shù)據(jù),使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵,按鍵觸發(fā)時(shí)人物做出相應(yīng)操作,人物下一步碰撞到障礙物,終止人物運(yùn)動(dòng)
2023-10-10
JavaScript閉包實(shí)例講解
眾所周知，JavaScript沒有塊級(jí)作用域，只有函數(shù)作用域。那就意味著定義在函數(shù)中的參數(shù)和變量在函數(shù)外部是不可見的，而在一個(gè)函數(shù)內(nèi)部任何位置定義的變量，在該函數(shù)內(nèi)部任何地方都可見
2014-04-04
JavaScript設(shè)計(jì)模式之抽象工廠模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之抽象工廠模式介紹,抽象工廠模式就是對(duì)功能類單獨(dú)創(chuàng)建工廠類,這樣就不必修改之前的代碼,又?jǐn)U展了功能,需要的朋友可以參考下
2014-12-12
解讀JavaScript代碼 var ie = !-[1,] 最短的IE判定代碼
這句代碼在IE9之前曾被稱為世界上最短的IE判定代碼。代碼雖短但確包含了不少javascript基礎(chǔ)知識(shí)在里面。
2011-05-05