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 不能释放内存.
Sep 07 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 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多态的实现详解
2013/06/09 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
js实现时间日期校验
2020/05/26 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
综合测评自我鉴定
2013/10/08 职场文书
日语专业个人的求职信
2013/12/03 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
2014年师德承诺书
2014/05/23 职场文书
施工安全生产承诺书
2014/05/23 职场文书
办公室岗位职责
2015/02/04 职场文书
外贸英文求职信范文
2015/03/19 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
用Python实现Newton插值法
2021/04/17 Python
python 实现体质指数BMI计算
2021/05/26 Python