bootstrap輪播模板使用方法詳解
更新時(shí)間：2017年11月17日 10:45:26 作者：靜靜的fire
這篇文章主要介紹了bootstrap輪播模板的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
常見Ajax下載文件方式以及報(bào)錯(cuò)解決辦法
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動(dòng)態(tài)和交互式網(wǎng)頁的技術(shù),它的主要優(yōu)勢在于能夠在不刷新整個(gè)網(wǎng)頁的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見Ajax下載文件方式以及報(bào)錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2024-01-01
js實(shí)現(xiàn)手機(jī)web圖片左右滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手機(jī)web圖片左右滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
本文主要介紹了如何在 TypeScript 中聲明全局變量,在TypeScript中,可以使用declare關(guān)鍵字來聲明全局變量,這樣的聲明告訴編譯器該變量是在其他地方定義的,而不需要實(shí)際的實(shí)現(xiàn),文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08 
這篇文章主要介紹了詳解微信小程序之scroll-view的flex布局問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01 
js傳各種類型參數(shù)到Controller層的整理方式
這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02 
axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端,下面這篇文章主要給大家介紹了關(guān)于axios概念介紹和基本使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06 
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑欄過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08 
跟我學(xué)習(xí)javascript的函數(shù)調(diào)用和構(gòu)造函數(shù)調(diào)用
跟我學(xué)習(xí)javascript的函數(shù)和構(gòu)造函數(shù)調(diào)用，主要包括三方面內(nèi)容函數(shù)調(diào)用、方法調(diào)用以及構(gòu)造函數(shù)調(diào)用，想要了解這些內(nèi)容的朋友千萬不要錯(cuò)過下面的內(nèi)容。
2015-11-11