资源描述:
《bootstrap打造一个左侧折叠菜单的系统模板(一)_javascript技巧》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、Bootstrap打造一个左侧折叠菜单的系统模板(-)1.MB最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板。网上的好多模板我觉的css和js冇点重。于是就打算完全依靠bootstrap搭建一个属于自己的模板。首先从左侧的折叠菜单开始。看图。人用户管理理崇角色管理G分发55B
2、52.CSS代码以下是自定义的css代码,由丁系统是内部使用,所以优先考虑chrome,firefox不考虑IETomargin-left:lpx;}#main-nav.nav-tabs.nav-stacked>li>a{padding:lOpx8px;font-size:12
3、px;font-weight:600;color:#4A515B;background:SE9E9E9;background:-moz~linear-gradient(top,WFAFAFA0%,WE9E9E9100%);background:-webkit-gradient(1inear,lefttop,leftbottom,color-stop(0%,#FAFAFA),color-stop(100%,#E9E9E9));background:-webkit-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);background:-o~lin
4、ear-gradient(top,#FAFAFA0%,#E9E9E9100%);background:-ms-linear-gradient(top,WFAFAFA0%,WE9E9E9100%);background:1inear-gradient(top,ttFAFAFA0%,#E9E9E9100%);filter:progid:DXlmageTransform・Microsoft・gradient(startColorstr=,#FAFAFA',endColorstr=,#E9E9E9');-ms-filter:''progid:DXlmageTransform.Micros
5、oft,gradient(startColorstr=,#FAFAFA,,cndColorstr=,#E9E9E9')";border:lpxsolid#D5D5D5;border-radius:4px;}#main~nav.nav~tabs.nav-stacked>1i>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~lin
6、ear-gradient(top,#4A515B0%,#3C4049100%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,W4A515B),color-stop(100%,#3C4049));background:-webkit~linear-gradient(top,#4A515B0%,#3C4049100%);background:-o~lincar-gradicnt(top,#4A515B0%,#3C4049100%);background:-ms-linear-gradient(
7、top,#4A515B0%,#3C4049100%);background:linear-gradient(top,S4A515B0%,#3C4049100%);filter:progid:DXTmageTransform.Microsoft,gradient(startColorstr=,#4A515B,,cndColorstr=,#3C4049');-ms-filter:z,progid:DXlmageTransform.Microsoft,gradient(startColorstr=,#4A515B,,endColorstr=,#3C4049')";border-colo
8、r:W2B2E33;}#main-nav.nav-tabs.nav-stacked>li.active>a,#main-nav.nav-tabs.nav-stacked>1i>a:hover>span{color:#FFF;}#main-nav.nav-tabs.nav-stacked>li{margin~bottom:4px;}/*定义二级菜单样式*/•secondmcnua{font-size:lOpx;color:S4A515B;text-align:center;}•na