任务1:bootstrap的简单学习
<!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>
任务2:轮播图
<!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">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://imgsa.baidu.com/forum/w=580/sign=1ea72de920738bd4c421b239918b876c/dfc558accbef76098f25cbab20dda3cc7cd99e8f.jpg" alt="...">
<div class="carousel-caption">
<h3>秋日</h3>
</div>
</div>
<div class="item">
<img src="https://imgsa.baidu.com/forum/w=580/sign=e153f95501b30f24359aec0bf894d192/251502610c33874471227d485f0fd9f9d62aa0d6.jpg" alt="...">
<div class="carousel-caption">
<h3>1234</h3>
</div>
</div>
<div class="item">
<img src="https://imgsa.baidu.com/forum/w=580/sign=e7e27834e724b899de3c79305e071d59/ea30483eb80e7bec9b3d51d5212eb9389a506bd6.jpg" alt="...">
<div class="carousel-caption">
<h3>1234</h3>
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--准备环境-->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
转载于:https://www.cnblogs.com/shuimohei/p/10559862.html
