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

最新推荐文章于 2024-04-24 15:41:29 发布

LB_laber

最新推荐文章于 2024-04-24 15:41:29 发布

阅读量1.8k

点赞数

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

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

版权

小河今学专栏收录该内容

27 篇文章 4 订阅

订阅专栏

7.30 今天的作业是制作一个响应式网站后台管理项目，由后台首页、用户管理、内容管理、标签管理四个界面组成。后台首页界面由后台导航、内容区域、底部版权区域组成，内容区域又由后台安全提示、网站数据统计、网站热帖、访客统计、服务器状态、团队留言板等六个部分组成。
今天主要完成后台首页内容。
最终实现效果如下：
在这里插入图片描述
首先分析一下页面分为三个部分，主要是导航栏、中间内容和底部，因此根据这个布局我的代码部分具体如下。

一、导航栏

导航栏部分由.navbar-header和.navbar-collapse两部分组成，这里主要是为了在移动端实现导航栏折叠隐藏的功能，具体在另外一篇里面有写【小河今学 | Bootstrap-v3+animate+wow】制作一个简单的响应式网站
这里另外用到一个下拉式的导航，都是Bootstrap里写好的，可以直接拿来用，非常的方便。

<nav class="navbar navbar-default">
        <div class="container">
            <!-- 左侧内容 -->
            <div class="navbar-header">
                <!-- 菜单按钮 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".cps">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- 动态Logo -->
                <a href="index.html" class="navbar-brand"">小河今学后台管理系统</a>
            </div>
            <!-- 导航内容 -->
            <div class="collapse navbar-collapse cps">
                <ul class="nav navbar-nav">
                    <li><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp后台管理</a></li>
                    <li><a href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp用户管理</a></li>
                    <li><a href="content.html"><span class="glyphicon glyphicon-th-list"></span>&nbsp内容管理</a></li>
                    <li><a href="tips.html"><span class="glyphicon glyphicon-tags"></span>&nbsp标签管理</a></li>
                </ul>
                <!-- 右侧内容 -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-asterisk"></span>&nbsp前台首页</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp个人主页</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp个人设置</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp账户中心</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp我的收藏</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:close();"><span class="glyphicon glyphicon-off"></span>&nbsp;退出</a></li>
                </ul>
            </div>
        </div>
    </nav>

二、中间内容

1、警告框

警告框单独一行（记得整个中间部分需要被包裹在.container中），警告框主要用到.alert这个标签。

alert：警告框样式
alert：警告框红色样式
alert-dismissible：用来与按钮链接，使得点击按钮后可以关闭整个警告框（比如这里的button[data-dismiss=“alert”]用来关闭该警告框）

<div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4>网站程序有漏洞，急需修复！</h4>
                    <p>当前版本程序(V1.22)存在严重安全问题，容易造成攻击，请即可修复！</p>
                    <p>
                    <button type="button" class="btn btn-danger">立即修复</button>
                    <button type="button" class="btn btn-default" data-dismiss="alert">稍后处理</button>
                    </p>
                </div>
            </div>
        </div>

2、网站数据统计与网站热帖

同样的网站数据统计与网站热帖放在同一行，用.col-md-6使他们在一行分别各占6列。
这里主要用到了面板，面板主要包括的类名有panel、panel-heading、panel-body，有这三个类名组成一个面板。（panel-default为面板的一个样式）

<!-- 示例 -->
<div class="panel">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">
	...
	</div>
</div>

在这里这两部分分别用到了表格以及列表，在网站数据统计用到表格。
表格就是正常的写表格html，最后在table加上类名.table即可，这里的.table-hover用来实现每一行鼠标悬浮效果。
在网站热帖部分用到了列表。
列表部分也是正常的写ul和li，最后在ul标签上加上.list-group，在li标签上加上.list-group-item就行。

<div class="row">
            <!-- 网站数据统计 -->
            <div class="col-md-6 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">网站数据统计</div>
                    <div class="panel-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>统计项目</th>
                                    <th>今日</th>
                                    <th>昨日</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>注册会员</th>
                                    <td>300</td>   
                                    <td>11400</td>
                                </tr>
                                <tr>
                                    <th>登陆会员</th>
                                    <td>321</td>
                                    <td>355</td>
                                </tr>
                                <tr>
                                    <th>今日发帖</th>
                                    <td>167</td>
                                    <td>472</td>
                                </tr>
                                <tr>
                                    <th>转载次数</th>
                                    <td>537</td>
                                    <td>723</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                  </div>
            </div>
            <!-- 网站热帖 -->
            <div class="col-md-6 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">网站热帖</div>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育， 效果和就业为王<small class="pull-right">2022/08/08</small></a></li>
                        <li class="list-group-item"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育， 效果和就业为王<small class="pull-right">2022/08/08</small></a></li>
                        <li class="list-group-item"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育， 效果和就业为王<small class="pull-right">2022/08/08</small></a></li>
                        <li class="list-group-item"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育， 效果和就业为王<small class="pull-right">2022/08/08</small></a></li>
                        <li class="list-group-item"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 泛Mooc职业教育， 效果和就业为王<small class="pull-right">2022/08/08</small></a></li>
                    </ul>
                </div>
            </div>
        </div>

3、今日访客统计和服务器状态

今日访客统计这里用到了一个图表插件——Echarts，这里简单讲一下怎么引入该插件以及怎么使用该插件。
首先打开Echarts官网或者打开BootCDN，我这里是复制了它的CDN直接复制到我的文件里。<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>
接着在你需要添加这个图表的地方加上<div id="main" style="width: 100%;height:300px;"></div>
在JS部分需要准备初始化echartsvar myChart = echarts.init(document.getElementById('main'));
接着打开官网，找到你需要的图表样式。
在这里插入图片描述

这里我是选择了渐变堆叠面积图，点开你想要的图表样式，在右边即为它的JS代码，你可以直接在这里修改实时查看效果，达到满意的效果之后再复制到自己的文件中。

最后记得显示图表，在JS代码的最后加上myChart.setOption(option);
完整实例如下：

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
            }
        },
        xAxis: [
            {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
            type: 'value'
            }
        ],
        series: [
            {
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                },
                {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
            },
            {
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgb(0, 221, 255)'
                },
                {
                    offset: 1,
                    color: 'rgb(77, 119, 255)'
                }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
            },
            {
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgb(55, 162, 255)'
                },
                {
                    offset: 1,
                    color: 'rgb(116, 21, 219)'
                }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

最后在服务器状态部分主要用到进度条的样式，.progress，在Bootstrap官网有详细的各种样式的进度条和示例代码，这里就不赘述了。

<div class="row">
            <!-- 今日访客统计 -->
            <div class="col-md-6 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">今日访客统计</div>
                    <div class="panel-body">
                        <div id="main" style="width: 100%;height:300px;"></div>
                    </div>
                </div>
            </div>
            <!-- 服务器状态 -->
            <div class="col-md-6 col-sm-12 serve">
                <div class="panel panel-default">
                    <div class="panel-heading">服务器状态</div>
                    <div class="panel-body">
                        <p>内存使用率：40%</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>
                        <p>数据库使用率：20%</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                <span class="sr-only">20% Complete</span>
                            </div>
                        </div>
                        <p>磁盘使用率：60%</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                <span class="sr-only">60% Complete (warning)</span>
                            </div>
                        </div>
                        <p>CPU使用率：80%</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                <span class="sr-only">80% Complete (danger)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

4、留言板

留言板对话框部分主要用到一个.well样式，接着在头像和对话的部分使用media，这是Bootstrap写好的一个对话样式，可以直接拿来使用。

<!-- 留言板 -->
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">团队留言板</div>
                    <div class="panel-body">
                        <div class="col-md-7 col-sm-12">
                            <div class="media well">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="/img/a.png" alt="卓大哥">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">卓大哥</h4>
                                    <p>技术大哥，今晚请把网站程序升级一下哈，现在的系统有漏洞，安全起见！</p>
                                </div>
                            </div>
                            <div class="media well">
                                <div class="media-body text-right">
                                    <h4 class="media-heading">技术大哥</h4>
                                    <p>收到，今晚凌晨2点准时升级！</p>
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object" src="/img/i.png" alt="技术大哥">
                                    </a>
                                </div>
                            </div>
                            <div class="media well">
                                <div class="media-body text-right">
                                    <h4 class="media-heading">技术大哥</h4>
                                    <p>你先在站点发布一下通知哈！</p>
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object" src="/img/i.png" alt="技术大哥">
                                    </a>
                                </div>
                            </div>
                            <div class="media well">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="/img/a.png" alt="卓大哥">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">卓大哥</h4>
                                    <p>好嘞。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 col-sm-12">
                            <form action="">
                                <div class="form-group">
                                    <label for="">输入留言内容</label>
                                    <textarea class="form-control" rows="5" placeholder="输入留言内容"></textarea>
                                    <input type="submit" class="btn btn-default" value="留言" />
                                </div>
                            </form>
                            <div class="panel panel-default">
                                <div class="panel-heading">团队联系手册</div>
                                <div class="panel-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">站长（xxx）<span class="glyphicon glyphicon-phone"></span>1234567890</li>
                                        <li class="list-group-item">技术（xxx）<span class="glyphicon glyphicon-phone"></span>1234567890</li>
                                        <li class="list-group-item">推广（xxx）<span class="glyphicon glyphicon-phone"></span>1234567890</li>
                                        <li class="list-group-item">客服（xxx）<span class="glyphicon glyphicon-phone"></span>1234567890</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

三、底部

<!-- footer版权 -->
    <section id="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">© Copyright 2010-2030 求知讲堂在线教育 深ICP备14041383号 版权所有</div>
            </div>
        </div>
    </section>