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

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

2024-07-08 09:07:29 前端知识 前端哥 593 528 我要收藏

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这个标签。

  1. alert:警告框样式
  2. alert:警告框红色样式
  3. 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>

以上就是全部内容了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13882.html
标签
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!