اليوم سوف نلقي نظرة على آثار مكون CSS والطبقات الأكثر أهمية. هذه الفصول ليست صعبة. المفتاح هو إتقانهم بكفاءة ، واستخدامها مجتمعة ، واستخدامها بمرونة. بالنسبة لمقالات حول نمط CSS وتخطيطها في أول المادتين ، يمكنك قراءتها في المقالات السابقة.
1. مكونات التنقل
لقد صنعت التنقل بنفسي. حاليا لا يوجد سوى قائمة من المستوى الأول. في المقالة التالية ، سيتم منح قائمة من المستوى الثاني ، تتضمن المكونات الإضافية JS ، لذلك لن أصفها هنا.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> قائمة المستوى الثاني </title> <style> .sidebar-menu {margin: 20px auto ؛ width: 180px ؛}/*أعد كتابة نمط الماوس المنزلق*/. اللون: #fff ؛} </style> <link href = "css/bootstrap.css" rel = "STYLESHEET"> <Link Href = "CSS/BOOTSTRAP.MIN.CSS src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/boottrap.min.js القائمة-> <viv> <ul> <li rob = "العرض التقديمي"> <a href = "#"> <span> </af> الصفحة الرئيسية </a> </li> <li rob = "عرض تقديمي"> <a href = "#" rob = "العرض التقديمي"> <a href = "#"> <span> </span> مفقود </a> </li> <li rob = "العرض التقديمي"> <a href = "#" <span> </span> لوحة الرسائل </a> </li> <li rob = "العرض التقديمي"> <a href = "#" </ul> </viv> </body> </html>الآثار هي كما يلي:
تجدر الإشارة إلى النقاط التالية في الملاحة:
1: يعتمد مكون التنقل على فئة NAV. (أي عند استخدام فصول أخرى ، يجب عليك كتابة هذا الفصل)
2: ضمان إمكانية الوصول إلى مكونات التنقل (إضافة سمة الدور)
3: تشمل الفصول المعنية NAV-TABS ، و NAV-PILLS (صنع كبسولات الملاحة) ، و NAV-STACKED (اجعل التنقل الأفقي في التنقل العمودي) ، NAV-ENRANDER (اجعل التنقل على قدم المساواة)
4: بالنسبة للفئة المعطلة ، عند إضافة روابط في صفحة التنقل (بما في ذلك علامات التبويب وصفحات التنقل) ، يتم تعطيلها فقط على السطح (يصبح اللون رماديًا ، ويتغير شكل الماوس) ، ولا تزال الوظيفة الفعلية موجودة.
5: استخدم التنقل مع القائمة المنسدلة.
دعونا نلقي نظرة على الفرعية التالية: يمكنك لصق الرمز واختباره بنفسك ، ولم يعد أخذ لقطات شاشة.
<!-يعتمد التنقل على فئة فئة Nav class-tabs class-> <ul> <li rob = "العرض التقديمي"> <a href = "#"> home </a> </li> --- الرجاء إضافة سمة الدور <li roly = "presentation"> <a href = "#"> ملف تعريف </a> </li> <li </ul> <!-علامات تبويب الكبسولة مرتبة رأسياً-stacked-> <ul> <li rob = "العرض التقديمي"> <a href = "#" <!-محاذاة التنقل في كلا الطرفين-NAV تم تحديدها لتحقيق محاذاة عمود التنقل-> <ul> <li rob = "العرض التقديمي"> <a href = "#" <br> <br>
دعنا نلقي نظرة على حالة التنقل مع القائمة المنسدلة:
<ul> <li rob = "عرض تقديمي"> <a data-toggle = "sropdown" href = "#" rol = "button" aria-haspopup = "true" 111 </a> </li> <li> <a href = "#"> الإجراء 222 </a> </li> <li> <a href = "#" -Divider تعني إضافة المقسمات ، وعادة ما تستخدم LI الفارغ أو span. <li rob = "العرض التقديمي"> <a href = "#"> ملف تعريف </a> </li> <li rob = "العرض التقديمي"> <a href = "#"> الرسائل </a> </li> </ul>
في الواقع ، لاستخدام القائمة المنسدلة من فئة القائمة المنسدلة ، يكون التنسيق الأساسي مثل ما سبق ، أو إذا قمت بإدارة الرابط A إلى زر ، وما إلى ذلك ، يمكنك استخدامه بمرونة.
2. مكون شريط الملاحة
ملحوظة:
1: يقوم شريط التنقل بترتيب جميع المكونات أفقيًا ولف المكونات ، على غرار التنقل الأفقي
2: ضمان إمكانية الوصول. استخدم <nav> أو <div roly = "التنقل">
3: تشمل الفصول المتورطة في قضبان التنقل ما يلي: غير قاطع (لتنفيذ لون الخلفية كأسود ونص أبيض) ، القاع المُثبّت في القوارب البحرية (قضبان التنقل الثابتة في الأعلى والأسفل)
NAVBAR-LEFT | NAVBAR-RIGHT (عادةً ما أضف NAVBAR-RIGH
استخدم هذه الفئة لتحقيق تأثير التركيز الرأسي) ، شكل Navbar (لتحقيق المحاذاة الرأسية) ، و Navber Brand (Set Brand Icon) ، Navbar-Collapse (Collapse)
دعونا نلقي نظرة على تأثير طي النقل البحري ، الرمز هو كما يلي:
<!-شريط التنقل المنهار يعني طي-> <v> <viv> <viv>-رأس شريط navigation <button type = "button" data-toggle = "collapse" data-arget = "#bs-example-navbar-collapse-1" aria-Expanded = "false"> told> span> <span> </span> </utton> <a href = "#"> العلامة التجارية </a> </viv> <div id = "bs-example-navbar-collapse-1">-العمود folding <ul> <li> <a href = "#"> link </span> </a> </li> <li> <li> <li> HREF = "#" data-toggle = "REPDOWN" rob = "button" aria-haspopup = "true" aria-Expanded = "false"> topdown <span> </aa> <ul> <li> <li> <a href = "#"#" آخر هنا </a> </li> <li> <A HREF = "#"> الرابط المنفصل </a> </li> <li rob = "flearator"> </li> <li> <a href = "#" type = "submit"> إرسال </button> </form> <ul> <li> <a href = "#"> الارتباط </a> </li> <li> <a href = "#" data-toggle = "tropdown" rol = "button" aria-haspup = "true" aria-expanded = "false"> href = "#"> الإجراء </a> </li> <li> <a href = "#"> إجراء آخر </a> </li> <li> <a href = "#" <button type = "button" data-toggle = "collapse" data-arget = "#bs-example-navbar-collapse-1" aria-expanded = "false" <span> Toggle Navigation </span> </span> </span> </span> </span> </span> </span> </span>
التأثير على النحو التالي:
أي عندما تتقلص شاشة المستعرض الخاصة بي ، ستصبح المكونات الأصلية خطوطًا مطوية (ثلاثة خطوط أفقية) على الجانب الأيمن من خط العلامة التجارية. انقر فوق الزر الأفقي الثلاثة وسيتم عرض المكون.
3. مكونات ترقيم الصفحات
ملحوظة:
1: استخدم ترقيم الصفحات (أضف صفارة الصفحات لجعلها أكبر)
2: تحقيق محاذاة بدوره بدوره وتنفيذ محاذاة بدوره (توجد الأمام والخلف في كلا الطرفين على التوالي).
الرمز كما يلي:
<!-فئة الصفحات-> <v> <ul> <li> <a href = "#" aria-label = "previous"> <span aria-hidden = "true"> «</span> </a> </li> <li> <a href ="#"> 1 </a> </li> <a href =" href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> </li> <s href = "#" aria-hidden = "true"> »» </span> </a> </li> </ul> </v>
إذا قمت بتنفيذ الترحيل ، فما عليك سوى إضافة <ul>.
تأثير بدوره على النحو التالي: استخدم بشكل أساسي فئة النداء
<!-flip-up-> <nav> <ul> <li> <a href = "#"> السابق </a> </li> <li> <a href = "#"> التالي </a> </li> </ul> </nav> <! aria-hidden = "true"> ← </span> أقدم </a> </li> <li> <a href = "#"> الأحدث <span aria-hidden = "true"> → </a> </li> </ul> </lav> </nav>
آثار اثنين أعلاه هي كما يلي:
4. شارة
الوظيفة: تقديم المعلومات بأرقام لافتة للنظر.
<!-شارة-> <a href = "#"> صندوق الوارد <span> 42 </span> </a> <button type = "button"> message <span> 4 </span> </utton>
الآثار هي كما يلي:
يمكن أيضًا استخدام إضافة هذا النوع من فئة الشارة مع التنقل ، إلخ.
5. مكون الصورة المصغرة
استخدمه مع نظام نقطي وفئة الصورة المصغرة. الرمز كما يلي: يمكن اختباره بنفسك
<!-Thumbnail Thumbnail-> <viv> <viv> <viv> <img src = "111.png"> <viv> <h3> تسمية Thumbnail Thumbnail </h3> <p> <a href = "#" rob = "button"> button </a> </p> </viv> <viv> <div> src = "111.png"> <viv> <h3> تسمية thumbnail </h3> <p> <a href = "#" rob = "button"> زر </a> </p> </viv> </viv> <!-> HREF = "#" ROLE = "BUNTY"> زر </a> </p> </viv> </viv> <!-ثالث-> <div> <viv> <img src = "111.png"> <viv> <h3> thumbnail label </h3> <p> </viv> </viv> </viv> </viv> </viv> </viv>
6. صندوق تحذير قابل للإغلاق
استخدام الفصل: يتم نشر التنبيه القابل للتنبيه وزر واحد على النحو التالي:
<!-وفر زر إغلاق لمربع التحذير-> <div rom = "Alert"> <button type = "button" data-dismiss = "Alert" aria-label = "close"> <span aria-hidden = "true" تأكد من السلوك الصحيح على جميع الأجهزة ->
فيما يتعلق بالمشهد ، يمكنك استبداله بنفسك. لا مزيد من الوصف. قم بتعيين ارتباط Alert Link لتعيين اللون الذي يطابق مربع التحذير الحالي.
7. شريط التقدم
استخدم الفصل: شريط التقدم والتقدم لتنفيذ الرسوم المتحركة
<!-شريط التقدم-> <div> <div rol = "progressbar" aria-valuenow = "60" aria-valuemax = "100" aria-valuemin = "0"> 60 ٪ </viv> </div> <! aria-valueMax = "100"> 80 ٪ </div> </viv> <viv> <div rol = "progressBar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100" style = "min-wid:"> 2 ٪ </div>
لتحقيق شريط التقدم لتأثير الرسوم المتحركة ، استخدم BAR-BAR-striped لتحقيق تأثير الرسوم المتحركة وإضافة نشط. الرمز كما يلي: لا مزيد من لقطات الشاشة
<!-استخدم التقدم المخططي في فئة الشريط-> <viv> <div rom = "progressBar" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100"> span> 40 ٪ كاملة </span> 100 ٪ </div> </div>
يمكنك أيضًا تغيير لون خطوط شريط التقدم مع لون المشهد.
8. قائمة قائمة ، مكونات مجموعة الإدخال
دعنا نلقي نظرة أولاً على مجموعة القائمة ، وخاصةً باستخدام فئة مجموعة القائمة ، وثانياً ، تتم كتابة عناصر القائمة مع عنصر مجموعة قائمة. الرمز كما يلي:
<!-مجموعة قائمة-> <ul> <li> <span> 3 </span> 1111 </li> <li> <span> 5 </span> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> </ul>-الروابط يمكن أيضًا إضافة درجات السيناريو كجماعة قائمة-<div> href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <a href = "#"> 55555 </a> </div> <!-مجموعة قائمة ، استخدم div ، ولا يمكن استخدامها. type = "button"> 2222 </button> <button type = "button"> 3333 </button> <button type = "button"> 4444 </ button> <!-ercy group item-> <viv> <a href = "#"> <h4> stere group item </h4> <p> 11111 </p> </a> <a href = " <p> 22222 </p> </a> </viv>
دعنا نلقي نظرة على مجموعة الإدخال ، استخدم فئة مجموعة الإدخال للف المكونات معًا. الرمز كما يلي:
<!-مجموعة الإدخال-> <viv>-يتم تضمين المكونات في مجموعة INOUT <span> <button type = "button"> go </utton> </span> <input
9. تضمين محتوى الميزات المستجيبة
فهم ما يعنيه وما هو المحتوى المدمج؟ كيف تضمنه؟ فكيف ترد؟
التضمين: هذا هو ، استخدم علامات مثل <frame> و <inmbed> و <video> و <jould> لتقديم محتوى الملف الخارجي. أعتقد أن الجميع يعرف السمات الجديدة في HTML5. الفيديو ، الراديو ، إلخ.
الاستجابة: قم بإنشاء مقياس ثابت تلقائيًا بناءً على عرض الحاوية الخارجية المضمنة ، مما يسمح للمتصفح بتحديد حجم الفيديو أو المحتوى تلقائيًا ، ويمكن أن يتوسع على الأجهزة المختلفة.
إذا كنت تريد أن يتطابق النمط النهائي للخصائص الأخرى ، فيمكنك أيضًا استخدام فئة مستجيبة.
الرمز كما يلي:
<viv> <frame src = "..."> </frame> </viv> <viv> <frame src = "..."
دعونا نلقي نظرة على ما يعنيه التضمين-16BY9 و inspried -4by3 على التوالي.
لنلقي نظرة على وحدة التحكم:
.embed-fonsivive-4by3 {--- 4 يمثل أفقيًا ، 3 يمثل عموديًا ، أي نسبة التحجيم ، أي مقياس 4: 3 حشوة: 75 ٪ ؛} .. التضمين-الاستجابة-16BY9 {padding-bottom: 56.25 ٪ ؛}حافظ على نسبة العرض إلى الارتفاع ، إذا تم حساب العرض بنسبة 100 ٪ ، فهو 100 ٪ * 3/4 = 75 ٪. في هذا الوقت ، قم بتعيين نسبة العرض إلى الارتفاع عن طريق تعيين حشوة البوتوم. عندما تكبر في المتصفح ،
أخيرًا ، حافظ على نسبة التحجيم هذه للتوسع.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.