Bootstrap3轮播

原创 2013年12月05日 22:35:12

和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>


相关文章推荐

XML+A3轮播 超好看的 最流行的

  • 2011年06月03日 18:24
  • 23KB
  • 下载

HTML5+CSS3轮播插件

  • 2017年11月17日 11:13
  • 174KB
  • 下载

数值算法入门-求4轮车 3轮车 2轮车的分配问题的最优解

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX 个人网站: http://www.x86asm.com QQ交流: 643439947 编程生涯: 2001年~至今[14年] 职业生...

怎样用5张幻灯片,在1年内,为2个创业公司,融资3轮,筹得1000万美元?

编者按:本文编译自TechCrunch原文《365 Days, $10 Million, 3 Rounds, 2 Companies, All With 5 Magic Slides》,由Social...

2017暑期实习招聘-产品经理-微软C+E(2)-3轮面试

Title Content 时间 2017-04-25 地点 中关村微软大厦 部门 微软C+E,大数据开发工具 形式 面试 前奏本来微软通知的是去微软2号大楼,到了楼...
  • iyangdi
  • iyangdi
  • 2017年04月25日 21:05
  • 571

BootStrap图片轮播做法

今天做一个图片轮播,在网上找了各种插件,各种bug,还由于是插件不知道怎么改……说多了都是泪。 所以最后用了Bootstrap的方法,也是在网上找到的教程:我看的那本Bootstrap里没有这段,估...
  • Vanqqqq
  • Vanqqqq
  • 2015年05月19日 12:50
  • 2782

bootstrap轮播实例

  • 2014年06月04日 16:07
  • 912KB
  • 下载

基于bootstrap的图片轮播

  • 2017年07月26日 18:47
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap3轮播
举报原因:
原因补充:

(最多只允许输入30个字)