摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
<title>后台管理系统</title>
<style>
#declare1 *,#declare2 *,a[href="#declare1"],a[href="#declare2"]{
border-radius: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>后台管理系统 <small>用户管理</small></h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<a href="#declare1" class="btn btn-primary" data-toggle="collapse">用户管理</a>
<div class="collapse in" id="declare1">
<div class="btn-group-vertical">
<a href="demo1.html" target="iframe1" class="btn btn-default">修改密码</a>
<a href="demo2.html" target="iframe1" class="btn btn-default">用户列表</a>
<a href="demo3.html" target="iframe1" class="btn btn-default">积分查询</a>
</div>
</div>
<br>
<a href="#declare2" class="btn btn-primary" data-toggle="collapse">商品管理</a>
<div class="collapse" id="declare2">
<div class="btn-group-vertical">
<a href="" class="btn btn-default">分类管理</a>
<a href="" class="btn btn-default">促销管理</a>
<a href="" class="btn btn-default">订单管理</a>
</div>
</div>
</div>
<div class="col-md-10">
<iframe name="iframe1" src="demo1.html" style="width: 1000px;height:600px;" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
<script>
$(function () {
$(".btn-group-vertical a").click(function () {
var $small=$(".page-header h1 small");
var $btVal=$(this).text();
$small.text($btVal);
})
})
</script>
</body>
</html>bootstrap是通过写好的class来搭建网站前端架构，就像搭积木一样，知道每个class的样式和作用，就可以搭建出自己需求的网站前端样式，不过基本上都是定死的，样式有点呆板，需要自己后期用css修改样式，这个网站后台管理的内页偷懒没写，就直接引用之前写好的几个页面。<iframe name="iframe1" src="demo1.html" style="width: 1000px;height:600px;" frameborder="0" scrolling="no"></iframe>通过这段代码和a标签中的target="iframe1"实现绑定，生成切换功能。最后写了各jquery代码，通过a链接中的文本，来实现头部信息的切换。
批改老师：天蓬老师批改时间：2019-01-27 09:06:36
老师总结：Bootstrap 是全球排名第一的前端框架, 获取了绝大多数的世界知名IDE的支持, 值得好好学
