Bootstrap打造一个左侧折叠菜单的系统模板(一)
1.前言
最近需要做一个后台管理系统，我打算使用bootstrap弄一个好看的后台模板。网上的好多模板我觉的css和js有点重。
于是就打算完全依靠bootstrap搭建一个属于自己的模板。
首先从左侧的折叠菜单开始。看图。
2.CSS代码
以下是自定义的css代码，由于系统是内部使用，所以优先考虑chrome,firefox不考虑IE了。
#main-nav{
margin-left:1px;
}
#main-nav.nav-tabs.nav-stacked>li>a{
padding:10px8px;
font-size:12px;
font-weight:600;
color:#4A515B;
background:#E9E9E9;
background:-moz-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#FAFAFA),color-stop(100%,#E9E9E9));
background:-webkit-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);
background:-o-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);
background:-ms-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);
background:linear-gradient(top,#FAFAFA0%,#E9E9E9100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E9E9E9');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E9E9E9')";
border:1pxsolid#D5D5D5;
border-radius:4px;
#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,#4A515B0%,#3C4049100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#4A515B),color-stop(100%,#3C4049));
background:-webkit-linear-gradient(top,#4A515B0%,#3C4049100%);
background:-o-linear-gradient(top,#4A515B0%,#3C4049100%);
background:-ms-linear-gradient(top,#4A515B0%,#3C4049100%);
background:linear-gradient(top,#4A515B0%,#3C4049100%);
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{