Bootstrap打造一个左侧折叠菜单的系统模板(一)


Posted in Javascript onMay 17, 2016

1. 前言

最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板。网上的好多模板我觉的css和js有点重。

于是就打算完全依靠bootstrap搭建一个属于自己的模板。

首先从左侧的折叠菜单开始。看图。

Bootstrap打造一个左侧折叠菜单的系统模板(一)

2. CSS 代码

以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了。

#main-nav {
margin-left: 1px;
}
#main-nav.nav-tabs.nav-stacked > li > a {
padding: 10px 8px;
font-size: 12px;
font-weight: 600;
color: #4A515B;
background: #E9E9E9;
background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
border: 1px solid #D5D5D5;
border-radius: 4px;
}
#main-nav.nav-tabs.nav-stacked > li > a > span {
color: #4A515B;
}
#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
color: #FFF;
background: #3C4049;
background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
border-color: #2B2E33;
}
#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
color: #FFF;
}
#main-nav.nav-tabs.nav-stacked > li {
margin-bottom: 4px;
}
/*定义二级菜单样式*/
.secondmenu a {
font-size: 10px;
color: #4A515B;
text-align: center;
}
.navbar-static-top {
background-color: #212121;
margin-bottom: 5px;
}
.navbar-brand {
background: url('') no-repeat 10px 8px;
display: inline-block;
vertical-align: middle;
padding-left: 50px;
color: #fff;
}

3. HTML 代码

HTML代码比较简单。data-toggle http://v3.bootcss.com/components/ 这里有介绍。

<div class="navbar navbar-duomi navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/Admin/index.html" id="logo">配置管理系统(流量包月)
</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-th-large"></i>
首页 
</a>
</li>
<li>
<a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
<i class="glyphicon glyphicon-cog"></i>
系统管理
<span class="pull-right glyphicon glyphicon-chevron-down"></span>
</a>
<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
<li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
<li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
</ul>
</li>
<li>
<a href="./plans.html">
<i class="glyphicon glyphicon-credit-card"></i>
物料管理 
</a>
</li>
<li>
<a href="./grid.html">
<i class="glyphicon glyphicon-globe"></i>
分发配置
<span class="label label-warning pull-right">5</span>
</a>
</li>
<li>
<a href="./charts.html">
<i class="glyphicon glyphicon-calendar"></i>
图表统计
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-fire"></i>
关于系统
</a>
</li>
</ul>
</div>
<div class="col-md-10">
主窗口
</div>
</div>
</div>

4. 引用的css 和 js

<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

三水点靠木推荐bootstrap相关专题:

BootStrap组件操作技巧

BootStrap相关知识汇总

以上所述是小编给大家介绍的Bootstrap打造一个左侧折叠菜单的系统模板(一)的相关知识,在下一篇文章将给大家修复一些bug具体详情大家可以参考Bootstrap打造一个左侧折叠菜单的系统模板(二)这一章节介绍,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
详解JS数值Number类型
Feb 07 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
JS数组的常用方法整理
Mar 31 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 #Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 #Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 #Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 #Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 #Javascript
js字符串截取函数slice、substring和substr的比较
May 17 #Javascript
javascript Promise简单学习使用方法小结
May 17 #Javascript
You might like
程序员编程十条戒律
2009/07/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
根据json字符串生成Html的一种方式
2013/01/09 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
flask中过滤器的使用详解
2018/08/01 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python Cartopy的基础使用详解
2020/11/01 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
经典演讲稿范文
2013/12/30 职场文书
生产部管理制度
2014/01/31 职场文书
新法人代表任命书
2014/06/06 职场文书
服务宗旨标语
2014/07/01 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
导游词之镇江焦山
2019/11/21 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB