1. คำนำ
เมื่อเร็ว ๆ นี้ฉันต้องสร้างระบบการจัดการแบ็กเอนด์และฉันวางแผนที่จะใช้ bootstrap เพื่อสร้างเทมเพลตแบ็กเอนด์ที่ดูดี ฉันคิดว่า CSS และ JS นั้นค่อนข้างหนัก
ดังนั้นฉันจึงวางแผนที่จะพึ่งพา Bootstrap ทั้งหมดเพื่อสร้างเทมเพลตของตัวเอง
เริ่มต้นด้วยเมนูพับทางด้านซ้าย ดูภาพ
2. รหัส CSS
ต่อไปนี้เป็นรหัส CSS ที่กำหนดเอง เนื่องจากระบบถูกนำมาใช้ภายในโครเมี่ยมจึงเป็นที่ต้องการและ Firefox ไม่ได้รับการพิจารณาเช่น
#main-nav {margin-left: 1px;} #main-nav.nav-tabs.nav-stacked> li> a {padding: 10px 8px; font-size: 12px; font-weight: 600; สี: #4a515b; 100%); ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, สี-หยุด (0%, #fafafa), การหยุดสี (100%, #e9e9e9)); พื้นหลัง: -webkit-linear-gradient (Top, #fafafa 0%, #e9e9e9e9e9e9 100%); ความเป็นมา: -ms-linear-gradient (บนสุด, #fafafa 0%, #e9e9e9 100%); ความเป็นมา: เชิงเส้น-กราด (ด้านบน, #fafafa 0%, #e9e9e9 100%); พื้นหลัง: linear-gradient 100%); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr = '#fafafa', endcolorstr = '#e9e9e9');-ms-filter: endcolorstr = ' #e9e9e9'); ชายแดน: 1px ของแข็ง #d5d5d5; border-radius: 4px;} #main-nav.nav-tabs.nav-stacked> li> a> span {color: #4a515b;} #main-nav.nav-tabs.navstack A: โฮเวอร์ {สี: #FFF; พื้นหลัง: #3C4049; พื้นหลัง: -MOZ-LINEAR-GRADIENT (ด้านบน, #4A515B 0%, #3C4049 100%); พื้นหลัง: -webkit-gradient (เส้นตรงด้านบนซ้ายล่าง -webkit-linear-gradient (บนสุด, #4A515B 0%, #3C4049 100%); ความเป็นมา: -O-LINEAR-GRADIENT (ด้านบน, #4A515B 0%, #3C4049 100%); #4A515B 0%,#3C4049 100%); ความเป็นมา: เชิงเส้น-กราด (บนสุด,#4A515B 0%,#3C4049 100%); ตัวกรอง: progid: dimationagetransform.microsoft.gradient (startColorStr = '#4A515B' "progid: dximagetransform.microsoft.gradient (startColorStr = '#4A515B', endColorSTR = '#3C4049')"; สีชายแดน:#2B2E33;}#main-nav.nav-tabs.nav-stacked> li.- {color: #fff;} #main-nav.nav-tabs.nav-stacked> li {margin-bottom: 4px;}/*กำหนดรูปแบบเมนูรอง*/. secondMenu a {font-size: 10px; สี: #4a515b; 5PX;}. NAVBAR-Brand {พื้นหลัง: URL ('') ไม่ซ้ำ 10PX 8PX; แสดง: inline-block; แนวตั้ง-จัดตำแหน่ง: กลาง;3. รหัส HTML
รหัส HTML ค่อนข้างง่าย data-toggle http://v3.bootcss.com/components/ นี่คือบทนำ
<div role = "การนำทาง"> <div> <div> <a href = "/admin/index.html" id = "โลโก้"> ระบบการจัดการการกำหนดค่า (แพ็คเกจเดินทางรายเดือน) </a> </div> </div> <div> <div> href = "#systemsetting" data-toggle = "การล่มสลาย"> <i> </i> การจัดการระบบ <span> </span> </a> <ul id = "systemseting" style = "ความสูง: 0px;"> <li> <a href = "#"> <i> </i> การจัดการ </a> </li> <li> <a href = "#"> <i> </i> การจัดการบทบาท </a> </li> <li> <a href = "#"> <i> </i> แก้ไขรหัสผ่าน </a> </li> <li> href = "./ plans.html"> <i> </i> การจัดการวัสดุ </a> </li> <li> <a href = "./ grid.html"> <i> </i> การกำหนดค่าการแจกจ่าย <span> 5 </span> </a> </li> <li> การกำหนดค่า <span> 5 </span> </a> </li> <li> <a href = "./ charts.html"> <i> </i> สถิติอักขระ </a> </li> <li> <a href = "#"> <i> </i> เกี่ยวกับระบบ </a> </li>
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.1.1.1.1.1.1.1.1. src = "http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
Wulin.com แนะนำหัวข้อที่เกี่ยวข้องกับ bootstrap:
ทักษะการใช้งานส่วนประกอบ bootstrap
สรุปความรู้ที่เกี่ยวข้องกับ bootstrap
ด้านบนเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับ bootstrap การสร้างเทมเพลตระบบสำหรับเมนูการพับซ้าย (I) ในบทความถัดไปเราจะแก้ไขข้อบกพร่องบางอย่างให้คุณ คุณสามารถอ้างถึง bootstrap การสร้างเทมเพลตระบบสำหรับเมนูการพับซ้าย (II) บทนี้แนะนำการแนะนำ bootstrap การสร้างเทมเพลตระบบสำหรับเมนูการพับซ้าย (II) หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!