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 相关文章推荐
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
Vue中props的使用详解
Jun 15 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 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
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
python中使用np.delete()的实例方法
2021/02/01 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
小学生学习感言
2014/03/10 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
家电创业计划书
2019/08/05 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸