7.31 今天作业是在昨天的基础上接着完善整个后台管理系统布局,主要完成用户管理、内容管理和标签管理这三个部分。
先放上最后完成的效果图
从上面几张图可以看出有很多部分是重复的,所以在这里先讲重复的部分。
首先是导航栏和底部版权标注,沿用了上次的导航栏和footer。
接着可以看到用化管理和内容管理两个部分都有侧边栏部分,因此这个部分的代码也是一样。
最后是底部的分页效果也是重复的。
接下来就直接上代码吧,由于导航栏和footer部分沿用了一上次作业的代码,这里就不重复po出来了。
一、用户管理
1、用户管理
整个页面很明显分为两个部分,分别是侧边栏和右边的内容主体。
所以还是先写.container和.row,在父级下分为侧边栏(2栏),主体内容(10栏)。
首先是侧边栏的代码如下:
<!-- 侧边栏 -->
<div class="col-md-2 col-sm-12">
<div class="list-group">
<a href="user.html" class="list-group-item active">用户管理</a>
<a href="user-search.html" class="list-group-item">用户搜索</a>
<a href="#" class="list-group-item" data-toggle="modal" data-target="#myModal">添加用户</a>
</div>
</div>
使用Bootstrap封装好的类名.list-group,这里注意不能用ul>li标签,否则无法形成hover效果,同时也没法进行链接跳转,所以这里要用a标签代替li标签。
接着是主体内容部分,这一块又分为页头、小导航栏、主体内容和分页导航。
代码如下:
<!-- 内容 -->
<div class="col-md-10 col-sm-12">
<div class="page-header">
<h3>用户管理</h3>
</div>
<!-- 小导航 -->
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="user.html">用户列表</a></li>
<li role="presentation"><a href="user-search.html">用户搜索</a></li>
<li role="presentation" data-toggle="modal" data-target="#myModal"><a href="#">添加用户</a></li>
</ul>
<!-- 内容 -->
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>信箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th>01</th>
<td>张三</td>
<td>111111111@qq.com</td>
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
操作
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li><a href="#">锁定</a></li>
<li><a href="#">修改密码</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<!-- 分页 -->
<nav class="pull-right">
<ul class="pagination">
<li>
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1<span class="sr-only"></span></span>
</li>
<li>
<span>2<span class="sr-only"></span></span>
</li>
<li>
<span>3<span class="sr-only"></span></span>
</li>
<li>
<span>4<span class="sr-only"></span></span>
</li>
<li>
<span>5<span class="sr-only"></span></span>
</li>
<li>
<span>6<span class="sr-only"></span></span>
</li>
<li>
<span>
<span aria-hidden="true">»</span>
</span>
</li>
</ul>
</nav>
</div>
这里的页头、小导航栏以及分页导航栏都会重复用到。
2、用户搜索
用户搜索具体布局也和用户管理一样分为左右两部分,侧边栏就不再赘述,只需要改变激活的对象即可(加上类名active)。
右边的主体内容中页头和小导航也没有变,只需改变激活对象。主要的内容中由表格换成了警告框和表单,具体代码如下:
<!-- 内容 -->
<div class="alert alert-info" role="alert">
<strong>技巧提示:</strong>
支持模糊搜索和匹配搜索,匹配搜索使用*代替!
</div>
<form action="">
<div class="form-group">
<label for="">用户名</label>
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="">UID</label>
<input type="text" class="form-control" placeholder="请输入用户ID">
</div>
<div class="form-group">
<label for="">用户组</label>
<select class="form-control">
<option>限制会员</option>
<option>新手上路</option>
<option>注册会员</option>
<option>中级会员</option>
<option>高级会员</option>
</select>
</div>
<button class="btn btn-default">提交</button>
</form>
3、添加用户
添加用户的部分用到了Bootstrap封装的模态框,具体的代码如下:
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">添加用户</h4>
</div>
<div class="modal-body">
<form action="">
<div class="form-group">
<label for="">用户名</label>
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="">用户密码</label>
<input type="password" class="form-control" placeholder="请输入用户密码">
</div>
<div class="form-group">
<label for="">确认用户密码</label>
<input type="password" class="form-control" placeholder="请再次输入用户密码">
</div>
<div class="form-group">
<label for="">用户邮箱</label>
<input type="password" class="form-control" placeholder="请输入用户密码">
</div>
<div class="form-group">
<label for="">所属用户组</label>
<select class="form-control">
<option>限制会员</option>
<option>新手上路</option>
<option>注册会员</option>
<option>中级会员</option>
<option>高级会员</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
同时要将其绑定到添加用户的按钮上:
<a href="#" class="list-group-item" data-toggle="modal" data-target="#myModal">添加用户</a>
二、内容管理
内容管理的布局与用户管理没有什么区别,只是换了主体内容。
三、标签管理
标签管理部分分为页头、搜索、标签。
页头部分同样使用Bootstrap封装好的类名page-header就可以,搜索部分为了让input和按钮在同一行上,需要将两个部分分别放在.col-md-10和.col-md-2的父级下。
最后标签内容使用的是警告框进行处理,为了让他们不全部独占一行,需要加上pull-left类名使其浮动。
<!-- 内容 -->
<div class="col-md-10 col-sm-12">
<div class="page-header">
<h3>TAG标签管理</h3>
</div>
<!-- 内容 -->
<div class="col-md-10 col-sm-12">
<form action="">
<input type="text" class="form-control" placeholder="请输入套添加的标签">
</form>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default">添加</button>
</div>
<div class="col-md-12">
<div class="alert alert-info alert-dismissible pull-left" role="alert" id="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>引导程序</strong>
</div>
<div class="alert alert-info alert-dismissible pull-left" role="alert" id="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>前端开发</strong>
</div>
<div class="alert alert-info alert-dismissible pull-left" role="alert" id="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>JavaScript</strong>
</div>
</div>
</div>
以上就是全部内容了。