使用Bootstrap+metisMenu完成简单的后台管理界面
来源:互联网 发布:java.util jar包 编辑:程序博客网 时间:2024/05/16 11:49
零. 写在前面
作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用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完成后台管理界面侧边导航栏的制作和个性化微调。
四. 参考资料
- 读源码 | metisMenu侧边栏插件
- metisMenu在GitHub的项目托管
- 使用Bootstrap+metisMenu完成简单的后台管理界面
- 使用bootstrap设计的后台管理界面
- 完成管理平台的bootstrap界面布局
- 基于Bootstrap的后台管理界面
- spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
- bootstrap 实现后台管理界面
- 一个代码简单的后台管理界面
- bootstrap 后台管理系统工作界面布局方式
- Extjs之简单后台管理界面示例
- 免费的 Bootstrap 的后台管理模板
- 免费的Bootstrap管理后台模板集合
- 纯bootstrap写的后台管理页面
- bootstrap 后台管理页面
- bootstrap后台管理模板
- bootstrap后台管理模板
- 使用bootstrap搭建后台界面(一)列表展示
- 使用bootstrap搭建后台界面(一)列表展示
- 使用Layui搭建后台管理界面
- kmp算法的优化
- SQL 优化经验总结34条
- POI中设置Excel单元格格式样式(居中,字体,边框等)
- glide设置
- C#无需第三方插件实现json和table互转
- 使用Bootstrap+metisMenu完成简单的后台管理界面
- 大龄程序员如何保持自己的职场竞争力
- 使用 PHPStorm 与 Xdebug 调试 Laravel (一)
- 草稿
- chapter21灰度直方图
- $.ajax 中的contentType
- 大数据为什么对人们来说如此重要?
- 穷举法典例
- Android列表中展开与收起详情