【小河今学 | Bootstrap-v3】响应式后台管理系统网页制作【纯布局】(下)

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">&laquo;</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">&times;</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">&times;</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">&times;</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">&times;</span></button>
                        <strong>JavaScript</strong>
                    </div>
                </div>
            </div>

以上就是全部内容了。

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值