Bootstrap Components Masterclass: بناء واجهات أسرع بالمكونات الجاهزة

نقدم مجموعة شاملة من مقالات التعليمية الهامة في تطوير الويب لتحويل أفكارك إلى واقع رقمي

Bootstrap Components Masterclass: بناء واجهات أسرع بالمكونات الجاهزة

Bootstrap 2026-03-21 علاء عامر

بناء واجهات أسرع بالمكونات الجاهزة

شرح عملي لمكونات Bootstrap: Navbar, Cards, Alerts, Accordion, Modal, Tabs, Offcanvas مع أنماط جاهزة للاستخدام في المشاريع

1) منهجية Component-First

ترتيب عملي لبناء أي صفحة:

ابدأ بالهيكل العام (Container / Row / Columns)
أضف شريط التنقل والـ Hero
ابنِ أقسام المحتوى (Cards / Lists)
أضف عناصر التفاعل (Accordion / Tabs / Modal)
أنهِ برسائل النظام والتنبيهات

3) Cards و Badges و Buttons

<div class="card border-0 shadow-sm h-100">
  <img src="/images/blogs/css.jpg" class="card-img-top" alt="صورة المقال" />
  <div class="card-body">
    <span class="badge bg-primary mb-2">Frontend</span>
    <h5 class="card-title">أنماط مكونات Bootstrap</h5>
    <p class="card-text text-muted">ابنِ أقسام المنتج بسرعة وبشكل قابل لإعادة الاستخدام.</p>
    <a href="#" class="btn btn-outline-primary">اقرأ المقال</a>
  </div>
</div>

5) Accordion و Tabs

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#q1">
        هل Bootstrap مناسب لمشاريع الإنتاج؟
      </button>
    </h2>
    <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
      <div class="accordion-body">نعم، خصوصا مع التخصيص الذكي للمكونات والأدوات.</div>
    </div>
  </div>
</div>

<ul class="nav nav-tabs mt-4" id="myTabs" role="tablist">
  <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#overview">نظرة عامة</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#details">تفاصيل</button></li>
</ul>
<div class="tab-content border border-top-0 p-3">
  <div id="overview" class="tab-pane fade show active">محتوى النظرة العامة.</div>
  <div id="details" class="tab-pane fade">محتوى التفاصيل.</div>
</div>

7) مشروع كامل: صفحة استعراض مكونات

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap عرض المكونات</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body class="bg-body-tertiary">
    <nav class="navbar navbar-expand-lg bg-white border-bottom">
      <div class="container">
        <a class="navbar-brand fw-bold" href="#">Alaa UI Kit</a>
      </div>
    </nav>

    <main class="container py-4">
      <div class="alert alert-info">العمل بالمكونات يسرع الإنتاج بشكل واضح.</div>

      <div class="row g-3">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card h-100 shadow-sm border-0">
            <div class="card-body">
              <h5>خطة البداية</h5>
              <p class="text-muted">مناسبة للأفراد في أول المشروع.</p>
              <button class="btn btn-primary w-100">اختر الخطة</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card h-100 shadow-sm border-0">
            <div class="card-body">
              <h5>خطة النمو</h5>
              <p class="text-muted">لفرق التسويق التي تتوسع بسرعة.</p>
              <button class="btn btn-dark w-100">اختر الخطة</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div class="accordion" id="planFaq">
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#planOne">هل يمكن الترقية لاحقا؟</button>
              </h2>
              <div id="planOne" class="accordion-collapse collapse show" data-bs-parent="#planFaq">
                <div class="accordion-body">نعم، يمكنك الترقية في أي وقت بدون توقف.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

الملخص

في هذا الدرس تعلمنا:

نظام التنقل Navbar
البطاقات والشارات والأزرار
التنبيهات وToasts
الأكورديون والتبويبات
Modal وOffcanvas للتفاعلات
مشروع صفحة مكونات كامل

الدرس القادم: نماذج Bootstrap والتحقق من الإدخال.

هل تحتاج مساعدة في تركيب مكونات Bootstrap؟

Bootstrap Components Navbar Cards Modal Accordion Offcanvas UI Patterns

قسم المقالة

Bootstrap

Bootstrap Components Masterclass: بناء واجهات أسرع بالمكونات الجاهزة

شرح عملي لمكونات Bootstrap: Navbar, Cards, Alerts, Accordion, Modal, Tabs, Offcanvas مع أنماط جاهزة للاستخدام في المشاريع.

التواصل والاستشارة

تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.

التخطيط والجدولة

وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.

البرمجة والتطوير

تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.

المراجعة والتسليم

ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.

علاء عامر

مطور ويب محترف بخبرة تزيد عن 10 سنوات في بناء حلول رقمية مبتكرة.

هل تحتاج هذه الخدمة؟

تواصل معي الآن للحصول على استشارة مجانية وعرض سعر

تواصل عبر واتساب رضاكم هو هدفنا الأسمى

عروض إضافية

صيانة وتحديث المواقع

نحافظ على موقعك آمنًا ومحدّثًا دائمًا
ربط الأنظمة وواجهات البرمجة

نربط أنظمتك بواجهات برمجية قوية ومرنة
تصميم وتحسين قواعد البيانات

استعلامات أسرع وهيكلة أوضح وأخطاء أقل
تأمين المواقع والحماية المتقدمة

حماية موقعك من التهديدات السيبرانية
أتمتة العمليات والمهام البرمجية

نؤتمت المهام المتكررة ونوفّر وقتك دائمًا

لديك استفسار؟

اتصل بنا الآن

00201014714795

راسلنا عبر البريد الإلكتروني

[email protected]

علاء عامر

Bootstrap Components Masterclass: بناء واجهات أسرع بالمكونات الجاهزة