1. مقدمة
أحتاج مؤخرًا إلى إنشاء نظام إدارة الخلفية ، وأخطط لاستخدام bootstrap لإنشاء قالب خلفي جيد المظهر. أعتقد أن CSS و JS ثقيلان بعض الشيء.
لذلك أخطط للاعتماد بالكامل على bootstrap لبناء القالب الخاص بي.
ابدأ بالقائمة القابلة للطي على اليسار. انظر إلى الصورة.
2. رمز CSS
فيما يلي رمز CSS المخصص. نظرًا لأن النظام يستخدم داخليًا ، يفضل Chrome ولا يعتبر Firefox IE.
#main-nav {margin-left: 1px ؛} #main-nav.nav-tabs.nav-tacked> li> a {padding: 10px 8px ؛ font-size: 12px ؛ font-weight: 600 ؛ color: #4a515b ؛ 100 ٪) ؛ الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0 ٪ ، #fafafa) ، توقف اللون (100 ٪ ، #e9e9e9)) ؛ 100 ٪) ؛ الخلفية: -MS-Linar-Radient (TOP ، #FAFA 0 ٪ ، #E9E9E9 100 ٪) ؛ الخلفية: Linear-Radient (Top ، #fafa 0 ٪ ، #e9e9e9 100 ٪) ؛ Background: top ، tope-egradient (top ، #fafafa 0 ٪ ، #e9e9 100 ٪) 100 ٪) ؛ مرشح: progid: dimizageTransform.microsoft.gradient (startColorStr = '#fafafa' ، endcolorstr = '#e9e9e9') ؛-ms-filter: 1px Solid #d5d5d5 ؛ الحدود radius: 4px ؛} #main-nav.nav-tabs.nav-tacked> li> a> span {color: #4a515b ؛} #main-nav #3C4049 ؛ الخلفية: -Moz-Linar-Radient (أعلى ، #4A515B 0 ٪ ، #3C4049 100 ٪) ؛ الخلفية: -webkit-radient (خطي ، أعلى ، أسفل اليسار ، توقف اللون (0 ٪ ، #4A515B) ، color-stop (100 ٪ ، #3C4049) #4A515B 0 ٪ ، #3C4049 100 ٪) ؛ الخلفية: -O-Linar-Radient (أعلى ، #4A515B 0 ٪ ، #3C4049 100 ٪) ؛ الخلفية: -MS-LINEAR-RGARIENT (TOP ، #4A515B 0 ٪ ، #3C4049 100 ٪) ؛ 100 ٪) ؛ الخلفية: التصوير الخطي (TOP ،#4A515B 0 ٪ ،#3C4049 100 ٪) ؛ مرشح: progid: dximagetransform.microsoft.gradient (startColorstr = '#4A515B' ، endcolorstr = '#3C4049') ؛-ms-filter: "progID: dimizeagetransform.microsoft.gradient (startColorstr = '#4A515B' ، endcolorstr = '#3C4049') #fff ؛} #main-nav.nav-tabs.nav-tacked> li {margin-bottom: 4px ؛}/*تعريف نمط القائمة الثانوية*/. secondmenu a {font-size: 10px ؛ color: #4a515b ؛ text-align: center ؛}. 5px ؛}3. كود HTML
رمز HTML بسيط نسبيا. بيانات toggle http://v3.bootcss.com/components/ هنا مقدمة.
<div rol = "savigation"> <viv> <viv> <a href = "/admin/index.html" id = "logo"> نظام إدارة التكوين (حزمة السفر الشهرية) </a> </viv> </viv> <viv> <div> <ul id = "main-nav" style = "" href = "#systemsetting" data-toggle = "collapse"> <i> </i> إدارة النظام <span> </a> </a> <ul id = "systemsetting" style = "height: 0px ؛"> <li> <a href = "#" الإدارة </a> </li> <li> <a href = "#"> <i> <i> </i> إدارة الأدوار </a> </li> <li> <a href = "#"> <i> </i> تعديل كلمة المرور </a> </li> <li> <li> href = "./ plans.html"> <i> </i> إدارة المواد </a> </li> <li> <a href = "./ grid.html"> <i> </i> تكوين التوزيع <span> </span> </a> </li> <i> <i> التكوين <span> 5 </apan> </a> </li> <li> <a href = "./ charts.html"> <i> <i>
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/jquery/jquery.min src = "http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
يوصي wulin.com بمواضيع ذات صلة بالتمهيد:
مهارات تشغيل مكون Bootstrap
ملخص المعرفة المتعلقة بالتمهيد
ما سبق هو المعرفة ذات الصلة حول Bootstrap إنشاء قالب نظام لقائمة الطي الأيسر (I). في المقالة التالية ، سنصلح بعض الأخطاء لك. يمكنك الرجوع إلى Bootstrap إنشاء قالب نظام لقائمة الطي الأيسر (II). يقدم هذا الفصل إدخال bootstrap إنشاء قالب نظام لقائمة الطي الأيسر (II). إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!