abstrak：<!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>后臺管理系統(tǒng)</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>后臺管理系統(tǒng) <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來搭建網(wǎng)站前端架構(gòu)，就像搭積木一樣，知道每個class的樣式和作用，就可以搭建出自己需求的網(wǎng)站前端樣式，不過基本上都是定死的，樣式有點呆板，需要自己后期用css修改樣式，這個網(wǎng)站后臺管理的內(nèi)頁偷懶沒寫，就直接引用之前寫好的幾個頁面。<iframe name="iframe1" src="demo1.html" style="width: 1000px;height:600px;" frameborder="0" scrolling="no"></iframe>通過這段代碼和a標簽中的target="iframe1"實現(xiàn)綁定，生成切換功能。最后寫了各jquery代碼，通過a鏈接中的文本，來實現(xiàn)頭部信息的切換。
Guru membetulkan：天蓬老師Masa pembetulan：2019-01-27 09:06:36
Rumusan guru：Bootstrap 是全球排名第一的前端框架, 獲取了絕大多數(shù)的世界知名IDE的支持, 值得好好學(xué)