Bootstrap基礎7（標簽、徽章、大屏展播、頁面標題、縮略圖、進度條、面板、折疊效果）
阿新 • • 發佈：2017-05-23
footer ctype success htm header bit src int get
<!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>
Bootstrap基礎7（標簽、徽章、大屏展播、頁面標題、縮略圖、進度條、面板、折疊效果）