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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
javascript中this关键字详解
Dec 12 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
在vue中嵌入外部网站的实现
Nov 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中操作Excel实例代码
2010/04/29 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
Python yield 小结和实例
2014/04/25 Python
python实现telnet客户端的方法
2015/04/15 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
结构工程研究生求职信
2013/10/13 职场文书
毕业生就业自荐信
2013/12/04 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
公司合作意向书
2014/04/01 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
检讨书怎么写
2015/01/23 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers