انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 50
دورة بوتستراب 5

قوائم التنقل Navs في بوتستراب 5Bootstrap 5 Navs

أتقن بناء قوائم التنقل الأساسية .nav في بوتستراب 5، ومحاذاة الروابط أفقياً وعمودياً، والفرق الهندسي بين .nav-fill و.nav-justified وضوابط الإتاحة.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
0
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

Horizontal Nav Alignment المحاذاة الأفقية لروابط التنقل

تصطف عناصر .nav افتراضياً عند حافة البداية المنطقية للسطر؛ أي اليمين في الواجهات العربية واليسار في الإنجليزية. وبفضل بناء المكوّن على display: flex، يمكنك التحكم بموضعه الأفقي فوراً دون كتابة سطر تنسيق إضافي.

أضف الكلاس .justify-content-center لتوسيط روابط الأقسام الفرعية أسفل عنوان الصفحة الرئيسي، أو استخدم .justify-content-end لدفع الروابط المساعدة نحو نهاية السطر المنطقية.

HTML 
<nav class="nav justify-content-center border-bottom pb-2">
  <a class="nav-link active" href="#">Home</a>
  <a class="nav-link" href="#">Features</a>
  <a class="nav-link" href="#">Support</a>
</nav>
جرّب بنفسك

Vertical Stacked Navs قوائم التنقل العمودية الجانبية

تحتاج صفحات إعدادات الحساب والفهارس الجانبية للتوثيق إلى رصّ الروابط عمودياً فوق بعضها. أضف الكلاس .flex-column بجانب .nav ليصبح المحور المرن رأسياً ويمتد كل رابط على كامل عرض القائمة الجانبية.

ويمكنك دمج الاستجابة المتدرجة بذكاء عبر .flex-column .flex-sm-row؛ فتتراص الروابط عمودياً على الهواتف الضيقة لسهولة النقر بالإبهام، ثم تتحول تلقائياً إلى صف أفقي بدءاً من عرض 576px فأعلى.

HTML 
<nav class="nav flex-column flex-sm-row">
  <a class="nav-link active" href="#">Profile</a>
  <a class="nav-link" href="#">Billing</a>
  <a class="nav-link disabled"
    aria-disabled="true">Audit</a>
</nav>
جرّب بنفسك

Fill vs Justified Navs التمدد النسبي مقابل التساوي

يوفر بوتستراب 5 كلاسين لتمديد عناصر التنقل على كامل عرض الحاوية الأب بنسبة 100%، غير أن معادلتهما الهندسية تختلف جوهرياً:

  • التمدد النسبي عبر .nav-fill — يمنح كل عنصر خاصية flex: 1 1 auto فيوزع الفراغ المتبقي نسبياً، مما يجعل الرابط ذا العنوان الطويل أعرض من الرابط القصير.
  • التساوي الصارم عبر .nav-justified — يضبط الأساس المرن على flex-basis: 0 مع flex-grow: 1، فيفرض عرضاً متطابقاً بالبكسل على جميع العناصر مهما تباينت أطوال كلماتها.
مخطط يقارن توزيع العرض بين .nav التلقائي و.nav-fill النسبي و.nav-justified المتساوي
HTML 
<nav class="nav nav-justified bg-body-tertiary p-2 rounded">
  <a class="nav-link active" href="#">All</a>
  <a class="nav-link" href="#">Enterprise Solutions</a>
  <a class="nav-link" href="#">API</a>
</nav>
جرّب بنفسك

Accessible Nav States الحالات النشطة وإتاحة القوائم

ترتكز إتاحة قوائم .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» لتحويل القوائم إلى تبويبات تفاعلية حية.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Base Nav Component مكوّن التنقل الأساسي
البنية المرنة الأساسية في بوتستراب 5 المكونة من .nav و.nav-link والتي تُبنى فوقها القوائم والتبويبات.
للمراجعة
02 Proportional Fill (.nav-fill) التمدد النسبي
نمط يمدد عناصر القائمة لملء كامل السطر مع منح العناصر ذات النصوص الأطول مساحة عرض أكبر.
للمراجعة
03 Equal Justification (.nav-justified) التساوي العرضي الصارم
نمط يعتمد على flex-basis: 0 ليحصل كل عنصر في القائمة على عرض أفقي متطابق تماماً.
للمراجعة
04 Responsive Stacking التكديس المتجاوب
دمج .flex-column مع كلاسات مثل .flex-sm-row لرص الروابط عمودياً على الهاتف وأفقياً على الشاشات الأكبر.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 CSS أوراق الأنماط المتتالية
Cascading Style Sheets
قواعد التنسيق التي تدير تخطيط الصندوق المرن والمسافات وانتقالات الألوان داخل مكوّن التنقل.
للمراجعة
02 ARIA تطبيقات الإنترنت الغنية المتاحة
Accessible Rich Internet Applications
سمات الإتاحة القياسية مثل aria-current="page" وaria-disabled="true" المطبقة على روابط التنقل.
للمراجعة
03 LTR الاتجاه من اليسار إلى اليمين
Left-to-Right
اتجاه القراءة الافتراضي للغات اللاتينية حيث تبدأ محاذاة عناصر .nav من الحافة اليسرى.
للمراجعة
04 RTL الاتجاه من اليمين إلى اليسار
Right-to-Left
اتجاه القراءة العربي حيث تبدأ عناصر قائمة .nav تلقائياً من الحافة اليمنى.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. ابنِ قائمة <nav class="nav flex-column flex-md-row justify-content-md-center"> تضم أربعة روابط .nav-link، وميّز الأول كصفحة حالية عبر aria-current="page" وعطّل الأخير بإتاحة سليمة.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. أنشئ قائمتي تنقل متتاليتين تضمان رابطاً قصيراً وآخر طويل النص، وطبّق .nav-fill على الأولى و.nav-justified على الثانية لملاحظة فرق توزيع العرض.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

ما نموذج التخطيط الذي يبني عليه بوتستراب 5 مكوّن .nav؟

02

يمكن تطبيق الكلاس .nav مباشرةً على وسم <nav> بداخله روابط <a class="nav-link"> دون اشتراط وجود <ul> و<li>.

03

ما الكلاس المساعد الذي يرتب عناصر .nav عمودياً لبناء قائمة إعدادات جانبية؟

04

ما الفرق البصري الدقيق بين الكلاسين .nav-fill و.nav-justified؟

05

ينبغي إضافة السمة role="tablist" إلى كل قائمة <ul class="nav"> عادية تتكون من روابط انتقال بين الصفحات.

06

ما التركيب الصحيح لتوسيط قائمة .nav أفقياً في منتصف الحاوية؟

07

كيف تتصرف قائمة تحمل الكلاسين .flex-column و.flex-sm-row على هاتف بعرض 390px مقارنةً بجهاز لوحي بعرض 800px؟

08

عند إضافة .disabled إلى وسم رابط داخل .nav، ما الإجراء المكمل لمنع تفعيله عبر لوحة المفاتيح؟