几个上上个星期看了点bootstrap 和上个星期 在加上昨天 总算是吧http://layoutit.justjavac.com/ 上面的可视化布局给看懂了是怎么回事，呵呵，女人就是笨，也不知道理解得对不对
为了做图片轮播，百度，谷歌导出找资料最后看上了两个一个是FlexSlider 一个就是bootstrap，现在先来学习bootstrap的轮播组件
http://layoutit.justjavac.com/ 这里链接里的可视化布局就是个页面组装的工具，从左边面板拖什么上去就是什么效果，这个对做demo给项目经理看到是蛮好的
资料查看下载链接：
---
http://v3.bootcss.com/getting-started/#download
下面的主要是为了获取里面的链接方便以后下载js和css，呵呵
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>好下面展现下我的例子：
注意：1，针对 IE8 仍然需要额外引入 Respond.js 文件
2，jquery的脚步文件引入时要在respond.js的之前引入
3，有引用到respond.js文件的测试的时候要基于服务器 Apache tomcat 发布的，不能单独使用editplus来做测试，可以放到myeclipse里发布后测试
新建一个名叫bootstrapTest的web project，机构如下：
img下是我要展现的图片
为了测试把所有的js和css 全都放一个目录下的
准备好引用文件
http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js
http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css
http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js
http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js
http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css
http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js
http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css
http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css
http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css
test.html内容：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 图片轮播测试</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap.css" type="text/css"></link>
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script src="respond.min.js"></script>
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span12'>
<div id='carousel-749994' class="carousel slide">
<ol class='carousel-indicators'>
<li class='active' data-target="#carousel-749994" data-slide-to="0">
</li>
<li data-target="#carousel-749994" data-slide-to="1">
</li>
<li data-target="#carousel-749994" data-slide-to="2">
</li>
</ol>
<div class='carousel-inner'>
<div class="item active">
<img alt="" src="img/1.jpg" />
<div class='carousel-caption'>
<h4>
棒球
</h4>
<p>
棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
</p>
</div>
</div>
<div class='item'>
<img alt="" src="img/2.jpg" />
<div class='carousel-caption'>
<h4>
冲浪
</h4>
<p>
冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
</p>
</div>
</div>
<div class='item'>
<img alt="" src="img/3.jpg" />
<div class='carousel-caption'>
<h4>
自行车
</h4>
<p>
以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-749994" data-slide="prev">‹</a>
<a class="right carousel-control" href="#carousel-749994" data-slide="next">›</a>
</div>
</div>
</div>
</div>
</body>
</html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 图片轮播测试</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap.css" type="text/css"></link>
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script src="respond.min.js"></script>
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span12'>
<div id='carousel-749994' class="carousel slide">
<ol class='carousel-indicators'>
<li class='active' data-target="#carousel-749994" data-slide-to="0">
</li>
<li data-target="#carousel-749994" data-slide-to="1">
</li>
<li data-target="#carousel-749994" data-slide-to="2">
</li>
</ol>
<div class='carousel-inner'>
<div class="item active">
<img alt="" src="img/1.jpg" />
<div class='carousel-caption'>
<h4>
棒球
</h4>
<p>
棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
</p>
</div>
</div>
<div class='item'>
<img alt="" src="img/2.jpg" />
<div class='carousel-caption'>
<h4>
冲浪
</h4>
<p>
冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
</p>
</div>
</div>
<div class='item'>
<img alt="" src="img/3.jpg" />
<div class='carousel-caption'>
<h4>
自行车
</h4>
<p>
以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-749994" data-slide="prev">‹</a>
<a class="right carousel-control" href="#carousel-749994" data-slide="next">›</a>
</div>
</div>
</div>
</div>
</body>
</html>
测试：
http://127.0.0.1:8080/bootstrapTest/test.html
哎！不过最后没用这个bootstrap 而是直接写的js来判断下一张这样做的
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
