摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户中心管理</title> <script type="text/javascript" src="jquer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户中心管理</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./font-awesome/css/font-awesome.css">
<style type="text/css">
.menu a{text-decoration: none;}
</style>
</head>
<body>
<div>
<div >
<div>
<!-- ********************************** 导航栏************************************************- -->
<nav class="navbar navbar-default">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="javascript:;" onclick="iframeView(this)" src ="./html/home.html">管理中心</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="javascript:;" onclick="iframeView(this)" src ="./html/system.html">系统设置</a></li>
<li><a href="javascript:;" onclick="iframeView(this)" src ="./html/style.html">主题配置</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">模块管理 <span></span></a>
<ul>
<li><a href="#">新建模块</a></li>
<li><a href="#">导航栏</a></li>
<li><a href="#">友情链接</a></li>
<li role="separator"></li>
<li><a href="#">网站收藏</a></li>
<li role="separator"></li>
<li><a href="#">图标汇集</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">插件管理</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">应用中心 <span></span></a>
<ul>
<li><a href="#">在线应用</a></li>
<li><a href="#">应用更新</a></li>
<li><a href="#">应用仓库</a></li>
<li role="separator"></li>
<li><a href="#">设置</a></li>
</ul>
</li>
<form class="navbar-form navbar-left">
<div>
<input type="text" placeholder="搜索">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- **********************控制菜单****************************************************** -->
<div class="col-md-2 menu">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div role="tab" id="headingOne">
<h4>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
用户信息
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div>
<div>
<a href="#">个人信息</a>
<a href="#">地址管理</a>
<a href="#">实名认证</a>
<a href="#">微信绑定</a>
<a href="#">支付宝绑定</a>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" id="headingTwo">
<h4>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
帐号安全
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div>
<div>
<a href="#">修改密码</a>
<a href="#">邮箱绑定</a>
<a href="#">手机绑定</a>
<a href="#">两步验证</a>
<a href="#">三方登录</a>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" id="headingThree">
<h4>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
交易中心
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div>
<div>
<a href="#">订单列表</a>
<a href="#">资金流水</a>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" id="headingThree4">
<h4>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree4" aria-expanded="false" aria-controls="collapseThree4">
应用中心
</a>
</h4>
</div>
<div id="collapseThree4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree4">
<div>
<div>
<a href="#">已购应用</a>
<a href="#">应用商城</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="./html/home.html"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".navbar-nav li").click(function () {
$(".navbar-nav li").removeClass("active");
$(this).addClass("active");
});
})
function iframeView(obj){
let src = $(obj).attr('src');
$('iframe').attr('src',src);
}
</script>
</body>
</html>
1.bootstrap框架基于jquery,因此使用前先引入jquery.js库。然后再引入bootstrap.js以及.css。
2.布局(bootstrap 为了兼容各个大小屏幕终端提供了一套响应式栅格系统,系统会自动分为最多12列。)
2.1 在以下屏幕大小会响应相对的布局分布。
1. ( screen < 768px ): 超小屏幕 col-xs-12。
2. (768px <= screen < 992px): 小型屏幕 col-sm-12。
3. (992px <= screen < 1200) : 中型屏幕 col-md-12。
4. (1200 <= screen ) : 大型屏幕 col-lg-12。
2.2 整体结构：
1.必须创建一个容器：class="container"默认有边距。container-fluid 为布满
2.必须创建一个行, class="row"。
3.必须创建栅格（列)class="col-md-x" ,x为12以下整数。
2.3 偏移：
col-md-offset-3 左偏移3格（列）
2.4 嵌套：
<div class = "row">
<div class = "col-md-6">
<div class ="row">
<div class = "col-md-12"></div>
</div>
</div>
<div class = "col-md-6"></div>
</div>
栅格本来只占六格，当套入行（row）的时候要拆分成12格。
2.5 push推 pull拉
push向右推3个格<div class = "col-md-6 col-md-push-3" ></div>
pull向左推3个格<div class = "col-md-6 col-md-pull-3" ></div>
3.表格
3.1 格子内用table-responsive 表格响应类包着，接着再加入table标签（基类 类风格），习惯用thead 和 tbody 。
4.表单。分为三种：1 内联表单，2水平表单 ，3 垂直表单（默认）
4.1 内联表单form-inline ->form-group不显示label 内容，因此将它设为sr-only 类隐藏。
4.2水平表单：form-horizontal ->form-group.label 和input 宽度用占格数来设置并用offset偏移调整位置，达到布局整齐度更加快捷。禁用,只读disabled 和readonly 属性，静态控件用p标签就可以，需要设置属性为form-control-static；导航必须要button
5.图片。默认的是img-responsive 为正常显示图片，其余三种为：
img-rounded,img-circle,img-thumbnail。各为图角矩形，圆形和圆角双边框风格。可加上center-block让图片居中。
6.辅助类：主要为页面设置前景风格，用类名为:text-muted text-primary text-success text-info text-warnin text-danger 和背景风格用类名：bg-primary bg-success bg-info bg-warning bg-danger.
笔记有点偏少，主要还是靠看文档说明来完成框架导航栏的active效果操作，导航菜单和嵌入内容页之前的消息响应。通过这简单的小案例基本对bootstrap框架有所掌握，后续需要不断加强练习提高前端页面布局水平。
批改老师：西门大官人批改时间：2019-03-03 10:44:26
老师总结：完成的页面效果很好，总结也非常好。不过bootstrap虽然是基于jquery的，只是说它的bootstrap.js依赖jquery，但是它的css没有必要在jquery后面引入。
