使用Bootstrap+metisMenu完成简单的后台管理界面

零. 写在前面

作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成。理由1:Bootstrap是目前流行的前端框架,风格简约,简单易用。理由2:metisMenu是轻量级的导航栏jQuery插件,同样简约,使用方便,易上手。

一. 什么是metisMenu?

今天的文章是介绍如何使用Bootstrap+metisMenu来完成一个简单的后台管理界面,Bootstrap前面的文章已经介绍过,如果你还不是很了解Bootstrap,那么可以翻阅作者前面的文章【Web前端框架学习—Bootstrap】
metisMenu是一个jQuery的导航栏插件,使用该插件将节省我们的开发时间,提高开发效率。
今天,作者将以后台管理系统为案例,介绍metisMenu的使用,效果图预览:
这里写图片描述

二. 准备工作

需要使用的文件:

  • bootstrap.min.js
  • bootstrap.min.css
  • metisMenu.min.js
  • metisMenu.min.css

如果你还没有这些文件,那么,你可以点击这里下载它们。

三. 开始

你可以使用本地文件引入css和js,也可以使用CDN资源从云端引入。如果你想从云端引入,可以使用又拍云的CDN加速资源库:http://www.bootcdn.cn/metisMenu

3.1 css文件引入

在< head >标签中引入css文件,包括Bootstrap的css文件和metisMenu的css文件。

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/metisMenu.min.css" rel="stylesheet">
    <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">

3.2 js文件引入

建议在< body >标签中< /body >标签之前引入js文件。

<script src="jquery/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/metisMenu.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>

3.3 侧边导航栏主体

这里,我们先使用metisMenu完成一个默认样式的侧边导航栏。
页面中的图标并没有使用Bootstrap提供的字体库,而是使用的有更多图标的开源字体库fontawesome。如果你想了解fontawesome,可以前往fontawesome中文网

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="/pages/back/index.jsp"><i class="fa fa-graduation-cap fa-fw" aria-hidden="true" ></i>学生信息管理系统</a>
        </div>
        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i
                    class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> 用户信息</a></li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> 设置中心</a></li>
                    <li class="divider"></li>
                    <li><a href="login.jsp"><i class="fa fa-sign-out fa-fw"></i> 登出系统</a></li>
                </ul>
            </li>
        </ul>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li><a href="/pages/back/index.jsp"><i class="fa fa-dashboard fa-fw"></i>系统首页</a></li>
                    <li><a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> 班级管理<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="/pages/back/classes/classes_insert.jsp">增加班级</a></li>
                            <li><a href="/pages/back/classes/classes_list.action">班级列表</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="fa fa-edit fa-fw"></i> 学生管理<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="panels-wells.html">增加学生</a></li>
                            <li><a href="buttons.html">学生列表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-question-circle-o fa-fw" aria-hidden="true"></i>关于系统</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

3.4 侧边导航栏个性化微调

如果你觉得默认样式的侧边导航栏不好看,那么,可以自己写css,对其进行微调美化。
作者觉得默认的侧边导航栏文字太靠左了,想把导航栏文字居中些,于是做出如下修改。

index.html

<link href="css/style.css" rel="stylesheet">

style.css

/*header*/
.navbar-header i{
    padding-left: 1.5em;
    padding-right: 2em;
}
.sidebar ul li i{
    padding-left: 2em;
    padding-right: 2em;
}
.sidebar ul li ul li {
    padding-left: 2.5em
}
.panel-default{
    margin-top: 20px;
}

在index.html中引入style.css后,效果如下图所示:
这里写图片描述

至此,已经完成了使用metisMenu完成后台管理界面侧边导航栏的制作和个性化微调。

四. 参考资料

  1. 读源码 | metisMenu侧边栏插件
  2. metisMenu在GitHub的项目托管
BootstrapAdmin是使用.NET Core + Bootstrap + PetaPoco + HTML 5 + jQuery构建的后台管理平台。可以用于所有的Web应用程序,目前版本已经升级到NET CORE具备跨平台能力。数据库方面同时支持多种数据库,详细列表见后面数据库的详细列表,切换数据源仅需更改配置文件无需重启应用程序,配置简单灵活。UI前端使用流行的Bootstrap框架布局对移动设备的兼容性非常好,自适应目前市场几乎所有终端设备。本系统还具备单一后台支持多前台的特色,提供单点登录(SSO)的能力。 BootstrapAdmin主要功能: 1、通过配置与前台网站集成 2、构建前台系统分层级菜单 3、提供单一后台支持多前台应用配置 4、提供单点登录 5、集成系统认证授权模块 6、提供角色,部门,用户,菜单,前台应用程序授权 6.1、角色对用户授权 6.2、角色对菜单授权 6.3、角色对部门授权 6.4、角色对应用程序授权(多个前台应用公用一个后台权限管理系统) 6.5、部门对用户授权 7、提供字典表用于前台网站个性化配置 8、完全响应式布局(支持电脑、平板、手机等所有主流设备) 9、内置多数据源支持,配置简单立即生效无需重启 10、内置数据内存缓存机制,页面快速响应 11、内置数据 操作日志 与用户 登录日志 跟踪记录用户 登录主机地点 浏览器 操作系统 信息 优势: 1、前台系统不用编写登录、授权、认证模块;只负责编写业务模块即可 2、后台系统无需任何二次开发,直接发布即可使用 3、前台与后台系统分离,分别为不同的系统(域名可独立) 4、可扩展为多租户应用
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

戴翔的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值