作者最近在一个小项目中需要写后台管理界面，在互联网上绕了一圈，最后决定使用Bootstrap+metisMenu来完成。理由1：Bootstrap是目前流行的前端框架，风格简约，简单易用。理由2：metisMenu是轻量级的导航栏jQuery插件，同样简约，使用方便，易上手。
今天的文章是介绍如何使用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
在< head >标签中引入css文件，包括Bootstrap的css文件和metisMenu的css文件。
建议在< body >标签中< /body >标签之前引入js文件。
这里，我们先使用metisMenu完成一个默认样式的侧边导航栏。
页面中的图标并没有使用Bootstrap提供的字体库，雅思基础词汇而是使用的有更多图标的开源字体库fontawesome。如果你想了解fontawesome，可以前往fontawesome中文网。
如果你觉得默认样式的侧边导航栏不好看，那么，可以自己写css，对其进行微调美化。
作者觉得默认的侧边导航栏文字太靠左了，想把导航栏文字居中些，于是做出如下修改。
index.html
style.css
在index.html中引入style.css后，效果如下图所示：
至此，已经完成了使用metisMenu完成后台管理界面侧边导航栏的制作和个性化微调。
- 读源码 | metisMenu侧边栏插件
- metisMenu在GitHub的项目托管