1. 서문
최근에 백엔드 관리 시스템을 구축해야하며 부트 스트랩을 사용하여 잘 보이는 백엔드 템플릿을 만들 계획입니다. CSS와 JS가 조금 무겁다 고 생각합니다.
그래서 나는 내 자신의 템플릿을 만들기 위해 Bootstrap에 전적으로 의존 할 계획입니다.
왼쪽의 접이식 메뉴로 시작하십시오. 사진을보세요.
2. CSS 코드
다음은 사용자 정의 CSS 코드입니다. 시스템은 내부적으로 사용되므로 크롬이 선호되며 Firefox는 IE로 간주되지 않습니다.
#main-nav {main-nav {main-left : 1px;} #main-nav.nav-tabs.nav-stacked> li> a {패딩 : 10px 8px; font-size : 12px; font-weight : 600; 컬러 : #4a515b; 배경 : #e9e9; 배경 : -moz-linear-gradient (Top, #fafafa 0%, #a9e99 100%); 배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%, #fafafa), 컬러 스톱 (100%, #e9e9e9)); 배경 : -webkit-linear-gradient (상단, #fafafa 0%, #e9e9e9 100%); #fafafa 0%, -o-linear-gradient (#fafafa 0%, #e9e9). 100%); 배경 : -ms-linear-gradient (상단, #fafafa 0%, #e9e9e9 100%); 배경 : 선형-그라디언트 (#fafafa 0%, #e9e9e9 100%); 배경 : 선형 등급 : 선형, 선형, 배경 : #fafafa 0% 100%); 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#fafafa', endcolorstr = '#e9e9e9');-ms-filter : "progid : dximagetransform.microsoft.gradient (startcolorstr = '#fafa', endcolorstr = ' #e9e9e9'); 국경 : 1px solid #d5d5d5; border-radius : 4px;} #main-nav.nav-tabs.nav-stacked> a> span {color : #4a515b;} #main-nav.nav-tabs.nav-stacked> a, #main-nav. A : 호버 {색상 : #fff; 배경 : #3C4049; 배경 : -Moz-linear-Gradient (상단, #4A515B 0%, #3C4049 100%); 배경 : -WebKit-Gradient (선형, 왼쪽 상단, 컬러 스탑 (0%, #4A515B), 컬러 스토프 (100%, #3C4049); -webkit-linear-gradient (Top, #4a515b 0%, #3c4049 100%); 배경 : -o-linear-gradient (Top, #4a515b 0%, #3c4049 100%); 배경 : -ms-linear-gradient (Top, #4a515b 0%, #3c4049 100%); #4A515B 0%,#3C4049 100%); 배경 : 선형 등급 (상단,#4A515B 0%,#3C4049 100%); 필터 : progid : dximagetransform.microsoft.gradient (startColortr = '#4a515b', endcolorstr = '#3c4049'; "progid : dximagetransform.microsoft.gradient (startColorstr = '#4a515b', endcolorstr = '#3c4049')"; Border-Color :#2b2e33;}#main-nav.nav-tabs.nav-stacked> li.active> a,#main-nav.nav-tab. {색상 : #fff;} #main-nav.nav-tabs.nav-stacked> li {margin-bottom : 4px;}/*2 차 메뉴 스타일을 정의하십시오*/. SecondMenu a {font-size : 10px; color : #4a515b; text-align : center;}. 5PX;}. NAVBAR-BRAND {배경 : URL ( '') NO-Repeat 10PX 8PX; 디스플레이 : 인라인-블록; 수직-균형 : 중간; 패딩 왼쪽 : 50px; 색상 : #fff;}3. HTML 코드
HTML 코드는 비교적 간단합니다. Data-Toggle http://v3.bootcss.com/components/ 여기 소개가 있습니다.
<div role = "navigation"> <div> <div> <a href = "/admin/index.html"id = "logo"> 구성 관리 시스템 (여행 월간 패키지) </a> </div> </div> <div> <ul id = "main-nav"style = ""> <li> <a href = "#"> href = "#systemsetting"data-toggle = "collapse"> <i> </i> 시스템 관리 <span> </span> </a> <ul id = "systemsetting"style = "height : 0px;"> <li> <a href = "#"> <i> </i> <li> <a href = "#"#"> </i> 메뉴 관리 </a> </li> <li> <a href = "#"#"> <i> </i> 역할 관리 </a> </li> <li> <a href ="#"> <i> </i> 비밀번호 수정 </a> <li> <a href ="#"> <i> </i> log view </a> </li> </li> <li> <li> <a href = "./ plans.html"> <i> </i> 재료 관리 </a> </li> <li> <a href = "./ grid.html"> <i> </i> 배포 구성 <Span> 5 </span> </a> </li> <li> <a href = "./ </i> 배포 구성 <Span> 5 </span> </a> </a> <li> <a href = "./ Charts.html"> <i> </i> 문자 통계 </a> </li> <li> <a href = "#"> </i> </a> </li> </div> </div> </div> </div> </div>
4. 참조 CSS 및 JS
<link href = "http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"rel = "stylesheet"> <script src = "http://cdn.bootcss.com/jquery/2.1.1.1.1.1.1.1.1.1.jquery.min.js"> src = "http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
wulin.com은 부트 스트랩 관련 주제를 권장합니다.
부트 스트랩 구성 요소 작동 기술
부트 스트랩 관련 지식 요약
위는 부트 스트랩 왼쪽 접기 메뉴 (i)에 대한 시스템 템플릿 생성에 대한 관련 지식입니다. 다음 기사에서는 몇 가지 버그를 수정하겠습니다. 왼쪽 접이식 메뉴 (ii) 용 시스템 템플릿 생성 부트 스트랩을 참조 할 수 있습니다. 이 장에서는 부트 스트랩의 소개 왼쪽 접이식 메뉴 (II) 용 시스템 템플릿 생성을 소개합니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!