<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果</title> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery-3.2.1.js"> </script> <script src="js/bootstrap.js"></script> <script src="js/holder.js"></script> <script> $(function(){ p=0;//初始值 v=5;//每秒加5% progressing=setInterval(function(){ p+=v;//动态增量 if(p>=100){ clearInterval(progressing); } $("#progressing").html(p+"%").css({"width":p+"%"}); },100)// (function () {// var p=10;//初始值// var v=5;//每秒加5%// progressing1=setInterval(function(){// p+=v;//动态增量// if(p>=100){// clearInterval(progressing1);// }// $("#progressing1").html(p+"%").css({"width":p+"%"});// },100)// })();// progressing2=setInterval(function(){// p=20;// v=5;// p+=v;//动态增量// if(p>=100){// clearInterval(progressing2);// }// $("#progressing2").html(p+"%").css({"width":p+"%"});// },100) })
</script> </head><body><div class="container"> <h1 class="page-header">标签、徽章、大屏展播、页面标题、缩略图、进度条、媒体对象、面板、折叠效果</h1> </br> <h2 class="page-header">标签</h2> <h1>守望先锋<span class="label label-success">我是标签</span></h1> <hr/> <h2 class="page-header">徽章</h2> <a href="#">消息<span class="badge">99</span></a><!--徽章--> <hr/> <ul class="list-group"><!--徽章-列表组--> <li class="list-group-item">关注度<span class="badge">20</span></li> <li class="list-group-item">关注度<span class="badge">39</span></li> <li class="list-group-item">关注度<span class="badge">69</span></li> <li class="list-group-item">关注度<span class="badge">99</span></li> </ul> <hr/> <h1>大屏展播</h1> <!--大屏展播--> <div class="jumbotron"> <p>守望先锋</p> <p>虚幻争霸</p> <button class="btn btn-primary btn-lg">开始游戏</button> </div> <hr/> <h2 class="page-header">缩略图</h2> <!--缩略图示例--> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.png" > <div class="caption"> <p>超级玛丽</p> <button class="btn btn-primary btn-lg">开始游戏</button> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/2.png" > <div class="caption"> <p>超级玛丽</p> <button class="btn btn-primary btn-lg">开始游戏</button> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/3.png" > <div class="caption"> <p>超级玛丽</p> <button class="btn btn-primary btn-lg">开始游戏</button> </div> </div> </div> </br> <!--缩略图占位--> <h2 class="page-header">缩略图占位</h2> <div class="row"> <div class="col-md-3"> <img src="holder.js/200x200?random=yes"> </div> <div class="col-md-3"> <img src="holder.js/200x200?random=yes"> </div> <div class="col-md-3"> <img src="holder.js/200x200?random=yes"> </div> <div class="col-md-3"> <img src="holder.js/200x200?random=yes"> </div> </div> </br> <h2 class="page-header">警告框</h2> <!--警告框--> <div class="alert alert-success"> <button class="close" data-dismiss="alert">⨰</button> </div>
<!--进度条--> <h2 class="page-header">进度条</h2> <div class="progress"> <div class="progress-bar progress-bar-success"style="width: 50%"></div> <p>50%</p> </div> <!--进度条的条纹样式--> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 70%"></div> <p>50%</p> </div> <!--进度条的条纹堆叠样式--> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%"></div> <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 30%"></div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 50%"></div> </div> <!--动态进度条--> <div class="progress"> <div id="progressing" class="progress-bar progress-bar-info progress-bar-striped" style="width: 0%"></div> </div> <div class="progress"> <div id="progressing1" class="progress-bar progress-bar-danger progress-bar-striped" style="width: 10%"></div> </div> <div class="progress"> <div id="progressing2" class="progress-bar progress-bar-success progress-bar-striped" style="width: 20%"></div> </div> <br/> <h2 class="page-header">媒体对象</h2> <!--媒体对象--> <div class="media"> <div class="media-left"> <a href=""><img src="holder.js/64x64?random=yes" class="media-object img-circle" /></a> </div> <div class="media-body"> <h3 class="media-heading">媒体头部</h3> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p> </div></div> <div class="media"> <div class="media-left"> <!--media-object --> <a href=""><img src="holder.js/64x64?random=yes" class="media-object img-circle" /></a> </div> <div class="media-body"> <h3 class="media-heading">媒体头部</h3> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p> </div> </div> <div class="media"> <div class="media-left"> <a href=""><img src="holder.js/64x64?random=yes" class="media-object img-circle" /></a> </div> <div class="media-body"> <h3 class="media-heading">媒体头部</h3> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p> </div> </div>
<br/> <h2 class="page-header">面板</h2> <!--面板--> <div class="panel panel-primary"> <div class="panel-heading"> Potomac Computer Systems公司。 </div> <div class="panel-body"> Potomac Computer Systems公司成立，发行ZZT。1992年更名为Epic Mega Games，发行共享游戏，包括《Epic弹球》（Epic Pinball）, 《丛林的吉尔》（Jill of the Jungle ）和《肯的迷宫》（Ken‘s Labyrinth）。1994年开发游戏《爵士兔》（Jazz Jackrabbit），是首部同时运行于Mac和微软Windows操作系统的游戏之一。 </div> <div class="table-responsive"> <table class="table table-striped table-bordered table-condensed"> <tr class="success"> <th>虚幻争霸</th> <th>守望先锋</th> <th>枪火游侠</th> <th>英雄联盟</th> <th>神之浩劫</th> </tr> <tr class="info"> <th>腾讯代理</th> <th>网易代理</th> <th>腾讯代理</th> <th>腾讯代理</th> <th>腾讯代理</th> </tr> <tr class="active"> <th>上市：2017年</th> <th>上市：2016年</th> <th>上市：2017年</th> <th>上市：2011年</th> <th>上市：2015年</th> </tr> <tr class="warning"> <th>游戏类型：MOBA+FPS</th> <th>游戏类型：FPS</th> <th>游戏类型：FPS</th> <th>游戏类型：MOBA</th> <th>游戏类型：MOBA+FPS</th> </tr> <tr class="danger"> <th>制作商：Epic Games</th> <th>制作商：暴雪</th> <th>制作商：Hi-Rez</th> <th>制作商：拳头</th> <th>制作商：Hi-Rez</th> </tr>
</table> </div> <div class="panel-footer">腾讯游戏独家代理</div> <!-- panel-footer 面板脚注 不会继承情景效果的颜色--> </div>
<!--折叠效果--> <h2 class="page-header">折叠效果1</h2> <button class="btn btn-success collapsed btn-lg"data-toggle="collapse" data-target="#coo">点我</button> <div id="coo"> <p id="well">我是折叠的内容</p> </div> <br/> <!--折叠效果2--> <h2 class="page-header">折叠效果2</h2> <div class="panel-group" id="myparent"> <div class="panel panel-success"> <div class="panel-heading"> <!--简单的表述，就是你在我不在，点击第某个出现，点击第另一个，第某个隐藏--> <h4 class="panel-title"> <!--data-parent属性把折叠面板的 id 添加到要展开或折叠的组件的链接或按钮上，可以绑定传递多个--> <a href="javascript:;" data-toggle="collapse" data-target="#tab" data-parent="#myparent">腾讯游戏</a> </h4> </div> <div class="collapse panel-collapse"id="tab"> <div class="panel-body"> <ul> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> </ul> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a href="javascript:;" data-toggle="collapse" data-target="#tab3" data-parent="#myparent">畅游在线</a> </h4> </div> <div class="collapse panel-collapse"id="tab3"> <div class="panel-body"> <ul> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> </ul> </div> </div>
</div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a href="javascript:;" data-toggle="collapse" data-target="#tab2" data-parent="#myparent">网易游戏</a> </h4> </div> <div class="collapse panel-collapse"id="tab2"> <div class="panel-body"> <ul> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> <li><a href="#">隐藏的栏目</a></li> </ul> </div> </div> </div></body></html>
时间： 2024-10-17 02:31:33