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

1、Bootstrap打造一个左侧折叠菜单的系统模板(一)_ 这篇文章主要介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一)的相关资料,需要的伴侣可以参考下 1. 前言 最近需要做一个后台管理系统，我准备用法bootstrap弄一个好看的后台模板。网上的好多模板我觉的css和js有点重。 于是就准备完全依靠bootstrap搭建一个属于自己的模板。 首先从左侧的折叠菜单开头。看图。 2. CSS 代码 以下是自定义的css代码，由于系统是内部用法，所以优先考虑chrome,firefox 不考虑IE了。 #main-nav margin-left: 1px; #main-nav.nav-

2、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:

3、-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(startColor

4、str=#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-tab

5、s.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%);

6、 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:

7、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:

8、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 l id=logo配置管理系统（流量包月） /a /

9、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

10、-cog/i 系统管理 span class=pull-right glyphicon glyphicon-chevron-down/span /a ul id=systemSetting class=nav nav-list collapse secondmenu style=height: 0px; lia href=#i class=glyphicon glyphicon-user/i用户管理/a/li lia href=#i class=glyphicon glyphicon-th-list/i菜单管理/a/li lia href=#i class=glyphicon glyphico

11、n-asterisk/i角色管理/a/li lia href=#i class=glyphicon glyphicon-edit/i修改密码/a/li lia 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-right5/span /a /li li a href=./charts.html i class=glyphicon glyphicon-calendar/i 图表统计 /