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