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

最新推荐文章于 2024-06-07 15:08:13 发布

LB_laber

最新推荐文章于 2024-06-07 15:08:13 发布

阅读量1.6k

点赞数 2

分类专栏：小河今学文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/LB_laber/article/details/126101250

版权

小河今学专栏收录该内容

27 篇文章 4 订阅

订阅专栏

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>