في إطار bootstrap ، الملاحة مستقلة كمكون تنقل. وفقًا للإصدارات المختلفة ، يمكن العثور على رمز المصدر المقابل:
أقل: Navs.less
ساس: _navs.scss
التنقل على شكل علامة ، والمعروف أيضًا باسم Tab Mavigation
يتم تنفيذ التنقل على شكل علامة من خلال نمط .NAV-TABS. عند صنع التنقل على شكل علامة ، تحتاج إلى إلحاق اسم الفصل .NAV-TABS إلى الحاوية باستخدام اسم فئة التنقل الأصلي .NAV
<ul> <li> <a href = "#"> عنوان الملاحة 1 </a> </li> <li> <a href = "#"> عنوان الملاحة 2 </a> </li> <li> <a href = "#" العنوان 5 </a> </li> </ul>
مبدأ:
عرض عناصر القائمة LI في الكتل وترتيبها على نفس المستوى ، ثم حدد تأثير نمط وتعليق الماوس للقوائم غير المرتفعة
.nav-tabs {border-bottom: 1px solid #ddd ؛}. li> a: hover {border-color: #EEE #EE #DDD ؛}بشكل عام ، سيكون لعلامة التبويب عنصرًا محددًا حاليًا ، تحتاج فقط إلى إضافة اسم الفصل.
<ul> <li> <a href = "#"> عنوان الملاحة 1 </a> </li> <li> <a href = "#"> عنوان الملاحة 2 </a> </li> <li> <a href = "#" العنوان 5 </a> </li> </ul>
.nav-tabs> li.active> a ، .nav-tabs> li.active> a: hover ، .nav-tabs> li.active> a: focus {color: #555 ؛ المؤشر: الافتراضي ؛ خلفية اللون: #fff ؛ الحدود: 1 بكسل Solid #DDD ؛ بلون الحدود القاع: شفاف ؛}بالإضافة إلى الخيارات الحالية ، تحتوي بعض علامات التبويب أيضًا على حالة معطلة. لتحقيق هذا التأثير ، ما عليك سوى إضافة اسم الفئة المعطل على عنصر العلامة.
.nav> li.disabled> a {color: #999 ؛}. تدمير النص: لا شيء ؛ المؤشر: لا يسمح للسماع ؛ لون الخلفية: شفاف ؛}إذا كنت ترغب في تحقيق تأثير النقر على عنصر القائمة لتبديل المحتوى ، فأنت بحاجة إلى التعاون مع المكون الإضافي JS
كبسولة (حبوب منع الحمل) الملاحة
تم تمييزه حاليًا بتأثير الزاوية المستديرة ، وتشبه طريقة التنفيذ الخاصة به التنقل في Tab ، ومع نفس الهيكل ، تحتاج فقط إلى استبدال اسم الفصل. Nav-tabs باسم الفصل. Nav-Pills
.nav-pills> li {float: left ؛}. خلفية اللون: #428BCA ؛}الملاحة العمودية المكدسة
بالإضافة إلى التنقل الأفقي ، هناك أيضًا تنقل رأسي. لإنشاء التنقل العمودي المكدّد ، تحتاج فقط إلى إضافة اسم الفصل. Nav-Stacked على أساس.
بالمقارنة مع التنقل في الكبسولة ، فإن الشيء الرئيسي هو منع عناصر التنقل من العائمة ، وترتيبها رأسياً ، ثم ترك تباعد معين لعناصر التنقل المجاورة.
.nav-stacked> li {float: none ؛}. nav-stacked> li + li {margin-top: 2px ؛ Margin-Left: 0 ؛} <ul> <li> <a href = "#"> عنوان الملاحة 0 </a> </li> <li> <a href = "#"> عنوان الملاحة 1 </a> </li> <li> <li> <a href = "#" HREF = "#"> عنوان الملاحة 4 </a> </li> <li> <a href = "#"> عنوان الملاحة 5 </a> </li> </ul>يشبه ملاحة التراص العمودي خط تقسيم بين مجموعة القائمة المنسدلة والمجموعة ، وهناك أيضًا خط تقسيم بين عناصر التنقل. فقط أضف <li class = "divider"> </li> بين عناصر التنقل.
<ul> <li> <a href = "#"> عنوان الملاحة 0 </a> </li> <li> <a href = "#"> عنوان الملاحة 1 </a> </li> <li> <a href = "#"> عنوان الملاحة 2 </a> </li> </li> <li> <ihref = "#" HREF = "#"> عنوان الملاحة 4 </a> </li> <li> <a href = "#"> عنوان الملاحة 5 </a> </li> </ul>
.NAV .NAV-Divider {الارتفاع: 1px ؛ الهامش: 9px 0 ؛ تجاوز: مخفي ؛ خلفية اللون: #e5e5e5 ؛}التنقل التكيفي
يشير التنقل التكيفي إلى التنقل الذي يحتل عرض الحاوية بأكمله ، ويمكن أن تتكيف عناصر القائمة مع عرض خلايا الجدول. التنقل التكيفي هو نفس مكون الزر التكيفي الذي تم إجراؤه بواسطة .BTN-Group المذكورة سابقًا سابقًا ، ولكن عند إجراء التنقل التكيفي ، يجب استخدام اسم الفصل.
مبدأ:
اضبط العرض على 100 ٪ على القائمة UL ، ثم ضبط الشاشة: خلايا الجدول لكل عنصر من عناصر القائمة LI ، بحيث تحاكي القائمة شكل خلية جدول ؛
.NAV-Justified {width: 100 ٪ ؛}. text-align: center ؛}. اليسار: auto ؛}@media (min-width: 768px) {.NAV-Justified> li {display: table-cell ؛ العرض: 1 ٪ ؛ . }}هناك حالة استعلام وسائط أعلاه: Media (Min-Width: 768px) {...} يعني أن التنقل التكيفي لا يمكن عرضه إلا في النمط أعلاه إذا كان عرض نافذة المتصفح أكبر من 768 بكسل ، ولكن عندما يكون عرض نافذة المتصفح أقل من 768 بكسل ، فسيتم عرضه بالنمط أدناه.
يتم استخدام .NAV-TABS و .NAV المعمول بها معًا ، مما يعني التنقل التكيفي في علامة التبويب. عندما يكون عرض نافذة المتصفح أقل من 768 بكسل ، تتم معالجة إضافية في النمط.
.nav-tabs.nav {عرض: 100 ٪ ؛ border-bottom: 0 ؛}. text-align: center ؛}. اليسار: auto ؛}@media (min-width: 768px) {.nav-tabs.nav-justified> li {display: table-cell ؛ العرض: .active> a:. الحدود الحدودية: 4px 4px 0 0 ؛ . }}قائمة التنقل بالإضافة إلى القائمة المنسدلة (التنقل الثانوي)
لإنشاء التنقل الثانوي ، تحتاج فقط إلى استخدام LI كحاوية الأصل ، واستخدم اسم الفصل.
<ul> <li> <a href = "#"> navigation menuity1 </a> </li> <li> <A HREF = "#"> menuigation 2 </a> </li> <li> <a href = "#"> navigation 3 </a> </li> <li> Menu4 </a> </li> <li> <adata-toggle = "sropdown"> navigation menugion5 <span> </a> <ul> <li> Menu3 </a> </li> <li> <a href = "#"> القائمة المنسدلة 4 </a> </li> </li> </li> <li> <a href = "#"
الملاحة الخبز
يتم استخدام فتات الخبز بشكل عام للتنقل ، ووظائفها الرئيسية هي إخبار المستخدم بالموقع الحالي للصفحة. فتات الخبز هي أيضًا مكون وحدة مستقلة في إطار bootstrap.
أقل: فتات الخبز
Sass: _breadcrumbs.scss
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"
.breadcrumb {padding: 8px 15px ؛ margin-bottom: 20px ؛ style style: none ؛ background-color: #f5f5f5 ؛ border-radius: 4px ؛}. "// 00a0" ؛}. breadcrumb> .active {color: #999 ؛}ما سبق يستخدم li+li: قبل تنفيذ الفاصل بين li و li. هذا الحل غير مدعوم في النسخة السفلية من IE.
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.