شرح صفوف ومحتوى الفقرة
ترتكز إتاحة قوائم .nav على قاعدة ذهبية فاصلة: التمييز الدقيق بين روابط الانتقال بين الصفحات وأزرار التبويبات الداخلية. فقوائم الروابط العادية التي تنقل الزائر لعناوين صفحات تستخدم السمة aria-current="page" على الرابط النشط، ويُحظر تماماً إعطاؤها role="tablist" أو role="tab" لأن تلك الأدوار مخصصة حصراً للوحات التبويبات التفاعلية التي سندرسها في الدرس القادم.
ولتعطيل رابط غير متاح، اجمع بين الكلاس .disabled والسمة aria-disabled="true" مع حذف href أو إضافة tabindex="-1" لضمان عدم تفعيله عبر لوحة المفاتيح.
| الكلاس أو السمة | موضع التطبيق | السلوك في Bootstrap 5.3 |
|---|---|---|
.nav | <ul> أو <nav> | إلغاء تنسيق القوائم وتفعيل تخطيط الصندوق المرن |
.nav-item و.nav-link | <li> و<a> | منح الروابط حشواً متوازناً وحالات تركيز وانتقال لوني سلس |
.justify-content-center و-end | حاوية .nav | توسيط الروابط أو محاذاتها لنهاية السطر المنطقية |
.flex-column | حاوية .nav | ترتيب الروابط عمودياً لبناء القوائم الجانبية |
.nav-fill | حاوية .nav | تمديد العناصر على كامل العرض بنسبة تتبع طول النص |
.nav-justified | حاوية .nav | فرض عرض متساوٍ تماماً لجميع العناصر بغض النظر عن نصها |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس بناء قوائم التنقل الأساسية بكلاس .nav بطريقتي القائمة والروابط المباشرة، وضبط محاذاتها الأفقية والعمودية المتجاوبة، والتمييز الدقيق بين .nav-fill و.nav-justified مع مراعاة قواعد الإتاحة. الخطوة التالية: انتقل الآن إلى درس «التبويبات والأزرار الملاحية في بوتستراب 5» لتحويل القوائم إلى تبويبات تفاعلية حية.