bootstrap轮播模板使用方法详解

2024-05-06 16:40:58

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了bootstrap轮播模板展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 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"    <div class="container">     <div class="carousel-caption">      文本区域     </div>    </div>   </div>   <div class="item">    <img src="2F1-130516091446402.jpg"    <div class="container">     <div class="carousel-caption">      文本区域     </div>    </div>   </div>   <div class="item">    <img src="-110910214P238.jpg"    <div class="container">     <div class="carousel-caption">      文本区域     </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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：浅谈Node模块系统及其模式

下一篇：在 Node.js 中使用 async 函数的方法