التنقلات (Navigation) في Bootstrap

الدرس العاشر: التنقلات (Navigation) في Bootstrap

التنقلات (Navigation) هي جزء أساسي في تصميم واجهات المستخدم، حيث تسمح للمستخدم بالتنقل بين صفحات الموقع بسهولة. في Bootstrap، توجد العديد من الأدوات والمكونات الجاهزة التي تسهل إنشاء قوائم التنقل وتخصيصها بما يتناسب مع احتياجات التصميم. في هذا الدرس، سنتعلم كيفية إنشاء قوائم تنقل باستخدام الفئة .navbar، وكيفية تخصيص القوائم لتكون أفقية أو عمودية، بالإضافة إلى كيفية إضافة مكونات مثل navbar-brand و navbar-toggler.

---

1. إنشاء قوائم تنقل باستخدام الفئة .navbar

الفئة الأساسية لإنشاء قائمة تنقل في Bootstrap هي .navbar. توفر هذه الفئة مكونات مرنة وسهلة الاستخدام لإنشاء شريط تنقل يمكن تخصيصه وفقًا لمتطلبات التصميم. يمكن أن يحتوي شريط التنقل على عناصر متعددة مثل روابط، أزرار، وعناصر أخرى.

أ. الهيكل الأساسي لقائمة التنقل

يحتوي الهيكل الأساسي لقائمة التنقل على عدة عناصر رئيسية مثل:

• العلامة التجارية (Brand) التي تمثل اسم الموقع أو الشعار.
• قائمة الروابط (Nav items) التي تحتوي على الروابط الرئيسية للموقع.
• زر التبديل (Toggler button) لعرض القائمة في الأجهزة الصغيرة.

مثال عملي:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">موقعي</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">الرئيسية</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">الخدمات</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">عن الموقع</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">التواصل</a>
      </li>
    </ul>
  </div>
</nav>

• .navbar: الفئة الرئيسية التي تضيف شريط التنقل.
• .navbar-expand-lg: تجعل القائمة قابلة للتوسيع في الأجهزة ذات الشاشات الكبيرة (مثل الحواسيب المكتبية) وتهدف إلى التكيف مع الشاشات الصغيرة.
• .navbar-light bg-light: تضيف لون الخلفية الفاتحة والتنسيق البصري لشريط التنقل.
• navbar-toggler: هو زر التبديل الذي يظهر في الأجهزة الصغيرة لفتح وإغلاق القائمة.
• .navbar-nav: تحتوي على الروابط داخل شريط التنقل.

---

2. تخصيص قوائم التنقل: قائمة أفقية وعمودية

في Bootstrap، يمكنك تخصيص قائمة التنقل لتكون إما أفقية أو عمودية بسهولة باستخدام الفئات الجاهزة. سنتعرف على كيفية تخصيص كل نوع.

أ. قائمة تنقل أفقية

القائمة الأفقية هي الشكل الأكثر شيوعًا لشريط التنقل في المواقع، حيث يتم ترتيب الروابط بجانب بعضها البعض من اليسار إلى اليمين. لجعل القائمة أفقية، استخدم الفئة .navbar-nav.

مثال عملي:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">موقعي</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">الرئيسية</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">الخدمات</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">عن الموقع</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">التواصل</a>
      </li>
    </ul>
  </div>
</nav>

في هذا المثال، يتم ترتيب العناصر أفقيًا باستخدام الفئة .navbar-nav التي تقوم بوضع العناصر بجانب بعضها.

ب. قائمة تنقل عمودية

لتخصيص شريط التنقل ليكون عموديًا، يمكنك استخدام الفئة .nav بدلاً من .navbar-nav. يمكن وضع هذه القائمة داخل أي عنصر مثل div أو aside لإظهار الروابط بشكل عمودي.

مثال عملي:

<div class="nav flex-column">
  <a class="nav-link active" href="#">الرئيسية</a>
  <a class="nav-link" href="#">الخدمات</a>
  <a class="nav-link" href="#">عن الموقع</a>
  <a class="nav-link" href="#">التواصل</a>
</div>

• .nav: فئة الأساس للقائمة.
• .flex-column: تستخدم لتنظيم العناصر بشكل عمودي بدلاً من أفقي.

---

3. إضافة مكونات مثل الـ navbar-brand و navbar-toggler

تقدم Bootstrap مكونات إضافية تتيح لك تخصيص شريط التنقل بشكل أفضل، مثل navbar-brand لعرض الشعار أو اسم الموقع، و navbar-toggler لإظهار زر التبديل في الشاشات الصغيرة.

أ. navbar-brand

الفئة .navbar-brand تستخدم لعرض الشعار أو اسم الموقع في الزاوية اليسرى من شريط التنقل. يمكن أن يكون هذا النص أو صورة.

مثال عملي:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="logo.png" alt="شعار الموقع" width="30" height="30" class="d-inline-block align-top">
    موقعي الإلكتروني
  </a>
</nav>

• تم استخدام <img> داخل .navbar-brand لعرض الشعار.

ب. navbar-toggler

زر التبديل navbar-toggler يظهر في الأجهزة الصغيرة ويستخدم لفتح أو إغلاق قائمة التنقل. يحتوي الزر على أيقونة (عادة ما تكون 3 خطوط أفقية) لتوضيح وظيفة التبديل.

مثال عملي:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">موقعي</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">الرئيسية</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">الخدمات</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">عن الموقع</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">التواصل</a>
      </li>
    </ul>
  </div>
</nav>

• navbar-toggler: يتيح لك إظهار أو إخفاء قائمة التنقل في الأجهزة الصغيرة.
• navbar-toggler-icon: هو الأيقونة التي تظهر في الزر لتوضيح أنه يمكن التبديل.

---

4. خصائص إضافية لقوائم التنقل في Bootstrap

تستطيع أيضًا تخصيص شريط التنقل لإضافة بعض التحسينات مثل:

• إضافة الروابط المنسدلة (Dropdown).
• إضافة تنسيق مختلف لأزرار التنقل مثل .btn أو .btn-link.

أ. إضافة روابط منسدلة

يمكنك إضافة روابط منسدلة باستخدام الفئات الجاهزة مثل .dropdown, .dropdown-toggle, و .dropdown-menu.

مثال عملي:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">موقعي</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">الرئيسية</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          المزيد
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">الخيارات 1</a></li>
          <li><a class="dropdown-item" href="#">الخيارات 2</a></li>
          <li><a class="dropdown-item" href="#">الخيارات 3</a></li>
        </ul>
      </li>
   

• .dropdown: يستخدم لإنشاء عنصر منسدلة.
• .dropdown-toggle: الفئة المستخدمة لربط العنصر المنسدل بزر قابل للنقر.
• .dropdown-menu: تحتوي على العناصر المنسدلة.

---

الخاتمة

في هذا الدرس، تعلمنا كيفية استخدام فئة .navbar لإنشاء قوائم تنقل فعّالة وجميلة باستخدام Bootstrap. كما قمنا باستكشاف كيفية تخصيص قائمة التنقل لتكون أفقية أو عمودية، وكيفية إضافة مكونات مثل العلامة التجارية (navbar-brand) وزر التبديل (navbar-toggler). القوائم المنسدلة هي أيضًا من الخيارات الرائعة التي تقدمها Bootstrap لإضافة المزيد من التفاعل للموقع.