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

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

主要介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一)的相关资料,需要的朋友可以参考下

1. 前言前言

最近需要做一个后台管理系统，我打算使用bootstrap弄一个好看的后台模板。网上的好多模板我觉的css和js有点重。

于是就打算完全依靠bootstrap搭建一个属于自己的模板。

首先从左侧的折叠菜单开始。看图。

2. CSS 代码代码

以下是自定义的css代码，由于系统是内部使用，所以优先考虑chrome,firefox 不考虑IE了。

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');

}

#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%);