bootstrap学习使用
发布时间:2020-12-17 21:10:07 所属栏目:安全 来源:网络整理
导读:几个上上个星期看了点bootstrap 和上个星期 在加上昨天 总算是吧http://layoutit.justjavac.com/ 上面的可视化布局给看懂了是怎么回事,呵呵,女人就是笨,也不知道理解得对不对 为了做图片轮播,百度,谷歌导出找资料最后看上了两个一个是FlexSlider 一个就
几个上上个星期看了点bootstrap 和上个星期 在加上昨天 总算是吧http://layoutit.justjavac.com/ 上面的可视化布局给看懂了是怎么回事,呵呵,女人就是笨,也不知道理解得对不对 为了做图片轮播,百度,谷歌导出找资料最后看上了两个一个是FlexSlider 一个就是bootstrap,现在先来学习bootstrap的轮播组件 http://layoutit.justjavac.com/ 这里链接里的可视化布局就是个页面组装的工具,从左边面板拖什么上去就是什么效果,这个对做demo给项目经理看到是蛮好的 资料查看下载链接:http://www.bootcss.com/ --- 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主题文件(一般不用引入) --> "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 文件 --> "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>
好下面展现下我的例子:
注意: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/css/bootstrap.min.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> 测试:
http://127.0.0.1:8080/bootstrapTest/test.html
真是不知道这编辑器里怎么上传例子呢,只看到能上传图片
哎!不过最后没用这个bootstrap 而是直接写的js来判断下一张这样做的
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |