القوائم المنسدلة (Dropdowns)، التبويبات (Tabs) وأشرطة القوائم (Navbars) في إطار Bootstrap

يُعتبر إطار Bootstrap من أكثر أطر العمل استخداماً في تطوير واجهات الويب الحديثة، نظرًا لما يقدمه من مجموعة أدوات متكاملة لتصميم عناصر واجهة المستخدم بشكل سريع ومرن ومتجاوب. من بين أهم هذه العناصر التي يعتمد عليها المطورون لتوفير تجربة مستخدم تفاعلية وسلسة: القوائم المنسدلة (Dropdowns)، التبويبات (Tabs)، وأشرطة القوائم (Navbars).

تُستخدم هذه المكونات لتوفير التنقل السلس بين الصفحات والمحتوى، وتحسين تنظيم المعلومات، وتسهيل الوصول إليها دون الحاجة لإعادة تحميل الصفحة. وسنقوم في هذا المقال بتناول هذه المكونات بالتفصيل، مع شرح خصائصها وكيفية تنفيذها واستعمالها بطرق عملية.

أولًا: القوائم المنسدلة (Dropdowns)

تعريف القوائم المنسدلة في Bootstrap

القوائم المنسدلة هي عناصر واجهة تُستخدم لعرض مجموعة من الخيارات عند النقر على زر أو رابط. وتُعد من أكثر عناصر التنقل فاعلية، خاصة عندما يتعلق الأمر بتقليل تشويش المستخدم وتنظيم الخيارات ضمن مساحة محدودة.

البنية الأساسية للقائمة المنسدلة

يتم إنشاء القائمة المنسدلة في Bootstrap من خلال كود HTML بسيط، وتعتمد بشكل أساسي على فئة .dropdown وفئة .dropdown-menu.

html
CopyEdit
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    القائمة
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">عنصر 1a>li>
    <li><a class="dropdown-item" href="#">عنصر 2a>li>
    <li><a class="dropdown-item" href="#">عنصر 3a>li>
  ul>
div>

الخصائص المتقدمة للقوائم المنسدلة

1. القائمة المنسدلة داخل أشرطة القوائم

يمكن تضمين القوائم المنسدلة داخل أشرطة التنقل لعرض خيارات متعددة بشكل مدمج.

2. القوائم المنسدلة ذات العناوين النشطة أو المعطلة

من الممكن تعطيل عنصر من عناصر القائمة باستخدام disabled لجعل العنصر غير قابل للنقر.

3. القوائم المنسدلة المتعددة الأعمدة

يمكن ترتيب عناصر القائمة في صفوف أو أعمدة باستخدام الفئات المخصصة مثل dropdown-menu-end, dropdown-menu-start.

4. استخدام الأيقونات أو الصور

يمكن تعزيز تجربة المستخدم من خلال دمج الأيقونات بجانب نصوص القائمة.

ثانيًا: التبويبات (Tabs)

أهمية التبويبات

التبويبات تُعد وسيلة مرنة لتنظيم وعرض محتوى متعدد داخل نفس الصفحة دون الحاجة للتنقل إلى صفحات أخرى. وهي تُستخدم بكثرة في لوحات التحكم وتطبيقات الويب المعقدة.

البنية الأساسية للتبويبات

تقوم التبويبات على عنصر nav يحتوي على روابط تُمثل العناوين، وعنصر آخر يحتوي على المحتوى المرتبط بكل تبويب.

html
CopyEdit
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab">الرئيسيةbutton>
  li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab">الملفbutton>
  li>
ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel">محتوى الرئيسيةdiv>
  <div class="tab-pane fade" id="profile" role="tabpanel">محتوى الملفdiv>
div>

أنواع التبويبات

1. التبويبات الأفقية

وهي الأكثر شيوعًا وتُستخدم في الجزء العلوي للصفحة.

2. التبويبات الرأسية

تُستخدم عندما يكون هناك مساحة أفقية محدودة.

3. التبويبات المتجاوبة

عند تصغير الشاشة، يمكن تحويل التبويبات إلى قوائم منسدلة باستخدام JavaScript أو عبر مكتبات فرعية مدمجة.

دمج التبويبات مع وظائف JavaScript

يمكن استخدام كود JavaScript مدمج مع Bootstrap أو إطار مثل jQuery لتخصيص سلوك التبويبات (مثل التنقل البرمجي بينها، أو تحميل بيانات ديناميكية عند فتح تبويب معين).

ثالثًا: أشرطة القوائم (Navbars)

تعريف أشرطة القوائم

شريط القوائم (Navbar) هو عنصر يُستخدم لتوفير وسيلة تنقل رئيسية في الموقع. يتضمن عادةً روابط إلى الصفحات الرئيسية، شعار الموقع، وقائمة حساب المستخدم أو البحث.

البنية الأساسية لشريط القوائم

html
CopyEdit
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">الشعارa>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" 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 disabled">معطلa>li>
      ul>
    div>
  div>
nav>

الخصائص المتقدمة لشريط القوائم

1. الألوان والثيمات

يمكن استخدام navbar-dark مع bg-dark أو navbar-light مع bg-light لتحديد ألوان الشريط حسب تصميم الموقع.

2. الشريط القابل للتوسع

فئة navbar-expand-lg تُحدد متى يظهر الشريط بشكل موسّع أو مصغّر حسب حجم الشاشة.

3. العلامات التجارية والأيقونات

إضافة شعار الموقع أو صورة إلى شريط القوائم يتم بسهولة باستخدام العنصر .

1. وثائق Bootstrap الرسمية – https://getbootstrap.com/docs

2. Mark Otto et al., “Bootstrap Framework”, GitHub Repository: https://github.com/twbs/bootstrap