微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap3轮播

和bs2是同样的,改css的时候才发现bs2和3的栅格类名是不一样的- -,害我以为写错了。

<!doctype html>
<html lang="en">
<head>
	<Meta charset="UTF-8">
	<title>bootstrap3</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
	<script type="text/javascript">
	$('.carousel').carousel({
 		 interval: 2000;
	})
	</script>
</head>

<body>
<div class="row">
<div class="col-md-3">

	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">    
   <div class="item active">
	 <img src="http://www.uiimg.com/data/attachment/forum/201211/02/09374758vxmmlbqv84o424.png" alt="...">
   <div class="carousel-caption">
    <h3>平面设计</h3>
    <p>介绍</p>
 	</div>
	</div>

	<div class="item">
	 <img src="http://www.uiimg.com/data/attachment/forum/201211/02/09374758vxmmlbqv84o424.png" alt="...">
   <div class="carousel-caption">
    <h3>平面设计2</h3>
    <p>介绍2</p>
 	</div>
	</div>

	<div class="item">
	 <img src="http://www.uiimg.com/data/attachment/forum/201211/02/09374758vxmmlbqv84o424.png" alt="...">
   <div class="carousel-caption">
    <h3>平面设计3</h3>
    <p>介绍3</p>
 	</div>
	</div>

  </div>

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

</div>
</div>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐