使用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;

}