bootstrap菜单展开收起_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: 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