<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>简单的学习</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--引入font-awesome的css文件-->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<!--加个图标 fa代表大小-->
<i class="fa fa-camera-retro fa-1x"></i>
<i class="fa fa-camera-retrofa-2x"></i>
<i class="fa fa-weixin fa-3x"></i>
<i class="fa fa-weixin fa-4x"></i>
<i class="fa fa-weixin fa-5x"></i>
<i class="fa fa-weixin fa-8x"></i>
<!--列表-->
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> 主页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> 分类</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> 计数</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> 设置</a>
</div>
<!--旋转-->
<i class="fa fa-weixin fa-spin fa-5x"></i>
<i class="fa fa-spinner fa-spin fa-5x"></i>
<i class="fa fa-circle-o-notch fa-spin fa-5x"></i>
<i class="fa fa-refresh fa-spin fa-5x"></i>
<i class="fa fa-cog fa-spin fa-5x"></i>
<i class="fa fa-spinner fa-pulse fa-5x"></i>
<!--层叠-->
<span class="fa-stack fa-4x">
<i class="fa fa-weixin fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
<!--按钮组-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<!--进度条-->
<div class="progress">
<div id="b1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</div>
</div>
<!--准备环境-->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
var width=0;
var t;
var $myBar = $("#b1")
function changeWidth(){
if (width<100){
width++;
$myBar.css("width",width+"%").text(width+"%")
}else {
clearInterval(t);
}
}
t=setInterval(changeWidth,200);
</script>
</body>
</html>