資源描述:
《bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)_javascript技巧》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(-)1.MB最近需要做一個后臺管理系統(tǒng),我打算使用bootstrap弄一個好看的后臺模板。網(wǎng)上的好多模板我覺的css和js冇點重。于是就打算完全依靠bootstrap搭建一個屬于自己的模板。首先從左側(cè)的折疊菜單開始??磮D。人用戶管理理崇角色管理G分發(fā)55B
2、52.CSS代碼以下是自定義的css代碼,由丁系統(tǒng)是內(nèi)部使用,所以優(yōu)先考慮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