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>


BootStrap3.X--Carousel轮播不自动播放问题

先看一下Carousel的正确写法(代码,这里使用的是Bootstrap 3.2版本): ...
  • jl381169437
  • jl381169437
  • 2016年08月19日 17:28
  • 2323

Bootstrap图片轮播

Bootstrap提供了carousel插件,实现图片轮播非常方便。代码 Document
  • napoay
  • napoay
  • 2016年01月12日 09:26
  • 5357

Bootstrap3 轮播之个人学习笔记

Bootstrap3 轮播,详细学习请参考官方文档,这里只是个人的学习笔记
  • example440982
  • example440982
  • 2017年07月05日 11:59
  • 166

django bootstrap3

django bootstrap3的简单使用
  • aca_jingru
  • aca_jingru
  • 2015年09月11日 13:30
  • 2060

Bootstrap3.3.5响应式导航栏 实例

源代码: 涵涵博客响应式布局 ...
  • u012997311
  • u012997311
  • 2016年07月01日 11:01
  • 1733

Bootstrap3 概述

注意:HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 ......
  • duruiqi_fx
  • duruiqi_fx
  • 2016年11月22日 14:31
  • 7532

Bootstrap3 datetimepicker控件使用实例详解

Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文...
  • alan_liuyue
  • alan_liuyue
  • 2017年08月21日 16:01
  • 627

Bootstrap实现基于carousel.js框架的轮播图效果(无过渡动画)

声明式触发需要使用到的几个data-*属性1.data-ride:作用在最外层容器上,固定值:carousel 2.data-target:作用在class=carousel-indicators的每...
  • qq_27905183
  • qq_27905183
  • 2017年05月01日 22:30
  • 999

《基于BootStrap3的JSP项目实例教程》第4讲

本讲主要讲述JSP指令元素,JSP的指令元素主要包括:page指令、include指令。它们都是JSP中的编译指令。编译指令就是告诉JSP的引擎,如何处理其他的JSP网页。JSP编译指令的语法格式如下...
  • starlee2000
  • starlee2000
  • 2015年08月16日 09:41
  • 1078

刚刚看完BOOTSTRAP3,BOOTSTRAP4就来临了

刚看完了bootstrap3 ,bootstrap4就来临了, 提供了更多的样式,不过当前还属于测试版, 版本:v4.0.0-alpha.6 | 文档更新于:2017-07-25 网址:h...
  • shuilan0066
  • shuilan0066
  • 2017年07月28日 17:00
  • 1018
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap3轮播
举报原因:
原因补充:

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