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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
js同时按下两个方向键
Dec 01 Javascript
学习ExtJS Window常用方法
Oct 07 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JavaScript 作用域scope简单汇总
Oct 23 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python Django基础二之URL路由系统
2019/07/18 Python
Python数学形态学实例分析
2019/09/06 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
学习十八大的心得体会
2014/09/01 职场文书
学校教师培训工作总结
2015/10/14 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python