零. 寫在前面

作者最近在一個小專案中需要寫後臺管理介面，在網際網路上繞了一圈，最後決定使用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，可以前往

<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完成後臺管理介面側邊導航欄的製作和個性化微調。

四. 參考資料