Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)_

1、Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)_ 這篇文章主要介紹了Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)的相關(guān)資料,需要的伴侶可以參考下 1. 前言 最近需要做一個后臺管理系統(tǒng)，我準備用法bootstrap弄一個好看的后臺模板。網(wǎng)上的好多模板我覺的css和js有點重。 于是就準備完全依靠bootstrap搭建一個屬于自己的模板。 首先從左側(cè)的折疊菜單開頭?？磮D。 2. CSS 代碼 以下是自定義的css代碼，由于系統(tǒng)是內(nèi)部用法，所以優(yōu)先考慮chrome,firefox 不考慮IE了。 #main-nav margin-left: 1px; #main-nav.nav-

2、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:

3、-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(startColor

4、str=#FAFAFA, endColorstr=#E9E9E9); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FAFAFA, endColorstr=#E9E9E9); border: 1px solid #D5D5D5; border-radius: 4px; #main-nav.nav-tabs.nav-stacked li a span color: #4A515B; #main-nav.nav-tabs.nav-stacked li.active a, #main-nav.nav-tab

5、s.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%);

6、 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%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A515B, endColorstr=#3C4049); -ms-filter: progid:

7、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 color: #FFF; #main-nav.nav-tabs.nav-stacked li margin-bottom: 4px; /*定義二級菜單樣式*/ .secondmenu a font-size:

8、10px; color: #4A515B; text-align: center; .navbar-static-top background-color: #212121; margin-bottom: 5px; .navbar-brand background: url() no-repeat 10px 8px; display: inline-block; vertical-align: middle; padding-left: 50px; color: #fff; 3. HTML 代碼 HTML代碼比較簡潔。data-toggle l id=logo配置管理系統(tǒng)（流量包月） /a /

9、div /div /div div class=container-fluid div class=row div class=col-md-2 ul id=main-nav class=nav nav-tabs nav-stacked style= li class=active a href=# i class=glyphicon glyphicon-th-large/i 首頁 /a /li li a href=#systemSetting class=nav-header collapsed data-toggle=collapse i class=glyphicon glyphicon

10、-cog/i 系統(tǒng)管理 span class=pull-right glyphicon glyphicon-chevron-down/span /a ul id=systemSetting class=nav nav-list collapse secondmenu style=height: 0px; lia href=#i class=glyphicon glyphicon-user/i用戶管理/a/li lia href=#i class=glyphicon glyphicon-th-list/i菜單管理/a/li lia href=#i class=glyphicon glyphico

11、n-asterisk/i角色管理/a/li lia href=#i class=glyphicon glyphicon-edit/i修改密碼/a/li lia href=#i class=glyphicon glyphicon-eye-open/i日志查看/a/li /ul /li li a href=./plans.html i class=glyphicon glyphicon-credit-card/i 物料管理 /a /li li a href=./grid.html i class=glyphicon glyphicon-globe/i 分發(fā)配置 span class=label label-warning pull-right5/span /a /li li a href=./charts.html i class=glyphicon glyphicon-calendar/i 圖表統(tǒng)計 /