轮播(Carousel)插件的标题

2017-07-12 10:49:00
admin
原创
558
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播(Carousel)插件的标题</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
    <!-- 轮播(Carousel)指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播(Carousel)项目 -->
    <div class="carousel-inner">
       <div class="item active">
   <img src="http://www.ybao.org/data/upload/201707/f_4d7798edf527fdd90920a05a13967c0f.png" alt="First slide">
   <div class="carousel-caption">标题 1</div>
  </div>
  <div class="item">
   <img src="http://www.ybao.org/data/upload/201707/f_68037bb9392465433e129a4d99d17ef9.png" alt="Second slide">
   <div class="carousel-caption">标题 2</div>
  </div>
  <div class="item">
   <img src="http://www.ybao.org/data/upload/201707/f_ad71f796499cf0fa69bd467c665a2daf.png" alt="Third slide">
   <div class="carousel-caption">标题 3</div>
  </div>    </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev">&lsaquo;
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">&rsaquo;
    </a>
</div>
</body>
</html>				
				

  • QQ讨论群
  • 关注微信
    • 欢迎咨询
    • 欢迎加入QQ群 16506021
  • 公众号:源宝网络