bootstrap輪播模板使用方法詳解
更新時間：2017年11月17日 10:45:26 作者：靜靜的fire
這篇文章主要介紹了bootstrap輪播模板的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了bootstrap輪播模板展示的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" rel="external nofollow" >
<style type="text/css">
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel .item img {
width: 100%;
}
.carousel-caption {
z-index: 10;
}
</style>
</head>
<body>
<!-- 輪播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
<div class="container">
<div class="carousel-caption">
文本區(qū)域
</div>
</div>
</div>
<div class="item">
<img src="2F1-130516091446402.jpg" alt="2 slide">
<div class="container">
<div class="carousel-caption">
文本區(qū)域
</div>
</div>
</div>
<div class="item">
<img src="-110910214P238.jpg" alt="3 slide">
<div class="container">
<div class="carousel-caption">
文本區(qū)域
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)裁剪圖片大小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Egg Vue SSR 服務(wù)端渲染數(shù)據(jù)請求與asyncData
這篇文章主要介紹了Egg Vue SSR 服務(wù)端渲染數(shù)據(jù)請求與asyncData，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
關(guān)于UTF-8的客戶端用AJAX方式獲取GB2312的服務(wù)器端亂碼問題的解決辦法
客戶端是UTF-8編碼，這也是現(xiàn)在大家公認(rèn)的標(biāo)準(zhǔn)編碼在這種情況下，實用AJAX異步獲取GB2312編碼的服務(wù)器端信息時，不可避免的要遇到漢字亂碼問題2010-11-11
這篇文章主要介紹了overlib用法,結(jié)合實例較為詳細(xì)的分析了JavaScript插件overlib的相關(guān)使用技巧,需要的朋友可以參考下2015-12-12
location是javascript里邊管理地址欄的內(nèi)置對象，比如location.href就管理頁面的url，用location.href=url就可以直接將頁面重定向url。而location.hash則可以用來獲取或設(shè)置頁面的標(biāo)簽值。2010-03-03
發(fā)布一個高效的JavaScript分析、壓縮工具 JavaScript Analyser
發(fā)布一個高效的JavaScript分析、壓縮工具 JavaScript Analyser...2007-11-11
這篇文章主要介紹了淺談Javascript數(shù)組的使用的相關(guān)資料,包括數(shù)組的大小，數(shù)組的遍歷以及數(shù)組的一些方法，非常細(xì)致，需要的朋友可以參考下2015-07-07
這篇文章主要介紹了使用開源工具制作網(wǎng)頁驗證碼的方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用，需要的可以參考一下2022-09-09
本文主要介紹了js實現(xiàn)彩色條紋滾動條效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03