Bootstrap 5 Fundamentals: الدليل الشامل لبناء واجهات متجاوبة حديثة

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

Bootstrap 5 Fundamentals: الدليل الشامل لبناء واجهات متجاوبة حديثة

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

الدليل الشامل لبناء واجهات متجاوبة حديثة"

تعلم Bootstrap 5 من الصفر: الإعداد، الحاويات، نظام الشبكة، المسافات، التايبوجرافي، الأدوات المتجاوبة، وبناء هيكل صفحة عملي.

1) لماذا Bootstrap 5؟

Bootstrap 5 يوفر لك:

نظام تصميم Mobile-First متجاوب
مكونات جاهزة للاستخدام مباشرة
Utility Classes لتسريع الشغل
توافق قوي مع أغلب المتصفحات
سهولة التخصيص باستخدام Sass Variables

الإصدار الخامس أزال الاعتماد على jQuery، وطور نظام الأدوات بشكل ملحوظ.

3) Containers و Breakpoints

<div class="container">حاوية بعرض ثابت متجاوب</div>
<div class="container-fluid">عرض كامل 100%</div>
<div class="container-sm">عرض كامل حتى نقطة sm</div>
<div class="container-lg">عرض كامل حتى نقطة lg</div>

أشهر نقاط التوقف في Bootstrap 5:

sm >= 576px
md >= 768px
lg >= 992px
xl >= 1200px
xxl >= 1400px

5) أساسيات الـ Grid المتجاوب

<div class="container py-4">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 border rounded bg-white">بطاقة 1</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 border rounded bg-white">بطاقة 2</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 border rounded bg-white">بطاقة 3</div>
    </div>
  </div>
</div>

نصائح Grid:

استخدم .row كأب مباشر
ضع الأعمدة داخل الصف مباشرة
استخدم g-* للتحكم في المسافات
اجمع أكثر من Breakpoint لنفس العمود

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 sticky-top">
      <div class="container">
        <a class="navbar-brand fw-bold" href="#">AlaaDev</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#mainNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="mainNav" class="collapse navbar-collapse">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a class="nav-link" href="#features">المميزات</a></li>
            <li class="nav-item"><a class="nav-link" href="#pricing">الأسعار</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">تواصل</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="py-5">
      <div class="container">
        <div class="row align-items-center g-4">
          <div class="col-lg-6">
            <h1 class="display-4 fw-bold">واجهة متجاوبة في ساعات بدل أسابيع</h1>
            <p class="lead text-secondary">
              Bootstrap يساعد الفريق يسلّم صفحات متناسقة بسرعة كبيرة.
            </p>
            <div class="d-flex gap-2">
              <button class="btn btn-primary btn-lg">ابدأ الآن</button>
              <button class="btn btn-outline-dark btn-lg">عرض حي</button>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="card shadow-sm border-0">
              <div class="card-body p-4">
                <h5 class="fw-bold">ملخص الأسبوع</h5>
                <div class="row g-3 mt-1">
                  <div class="col-6">
                    <div class="p-3 rounded bg-light">
                      <small class="text-muted d-block">المستخدمون</small>
                      <strong class="fs-4">12.4K</strong>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="p-3 rounded bg-light">
                      <small class="text-muted d-block">العملاء المحتملون</small>
                      <strong class="fs-4">842</strong>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

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

الملخص

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

طريقة إعداد Bootstrap
الفرق بين الحاويات ونقاط التوقف
أهم Utilities لتسريع التطوير
أساسيات Grid المتجاوب
هيكل صفحة عملي
مشروع صفحة هبوط كامل

الدرس القادم: Bootstrap Grid بشكل متقدم وأنماط Layout احترافية.

هل تحتاج مساعدة في تنفيذ Bootstrap؟

Bootstrap Bootstrap 5 Responsive Design Grid Layout UI CSS Framework

قسم المقالة

Bootstrap

Bootstrap 5 Fundamentals: الدليل الشامل لبناء واجهات متجاوبة حديثة

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

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

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

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

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

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

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

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

علاء عامر

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

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

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

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

عروض إضافية

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

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

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

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

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

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

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

اتصل بنا الآن

00201014714795

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

[email protected]

علاء عامر

Bootstrap 5 Fundamentals: الدليل الشامل لبناء واجهات متجاوبة حديثة