首页 > 代码库 > Bootstrap基础7（标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果）
Bootstrap基础7（标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果）
<!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="http://www.mamicode.com/css/bootstrap.css">
<script src="http://www.mamicode.com/js/jquery-3.2.1.js"> </script>
<script src="http://www.mamicode.com/js/bootstrap.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/#">消息<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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/holder.js/200x200?random=yes">
</div>
<div class="col-md-3">
<img src="http://www.mamicode.com/holder.js/200x200?random=yes">
</div>
<div class="col-md-3">
<img src="http://www.mamicode.com/holder.js/200x200?random=yes">
</div>
<div class="col-md-3">
<img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</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="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</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="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</a></li>
<li><a href="http://www.mamicode.com/#">隐藏的栏目</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Bootstrap基础7（标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。