Bootstrap Utilities and Customization: ابنِ Design System خاص بك

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

Bootstrap Utilities and Customization: ابنِ Design System خاص بك

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

أدوات Bootstrap وتخصيصها: أنشئ نظام التصميم الخاص بك

دليل احترافي من إعداد علاء عامر - مطور ومصمم مواقع ويب خبير

1) البناء السريع باستخدام Utilities

Utilities في Bootstrap تسمح لك بتركيب الواجهة مباشرة داخل HTML.

<section class="py-5 bg-body-tertiary">
  <div class="container">
    <h2 class="fw-bold text-dark mb-2">تركيب واجهة بالأدوات</h2>
    <p class="text-secondary mb-4">ابنِ بلوكات نظيفة بأقل قدر ممكن من CSS المخصص.</p>

    <div class="d-flex flex-column flex-md-row gap-3 align-items-md-center">
      <button class="btn btn-primary px-4">الإجراء الأساسي</button>
      <button class="btn btn-outline-secondary px-4">إجراء ثانوي</button>
    </div>
  </div>
</section>

3) Color Modes و CSS Variables

Bootstrap 5.3 يدعم أنماط الألوان بشكل ممتاز.

<html lang="ar" dir="rtl" data-bs-theme="light"></html>

تبديل الثيم ديناميكيًا:

<button id="themeToggle" class="btn btn-outline-dark">تبديل الثيم</button>

<script>
  const root = document.documentElement;
  const button = document.getElementById("themeToggle");

  button.addEventListener("click", () => {
    const current = root.getAttribute("data-bs-theme") || "light";
    root.setAttribute("data-bs-theme", current === "light" ? "dark" : "light");
  });
</script>

5) تخصيص Bootstrap عبر Sass

// custom.scss
$primary: #0f766e;
$secondary: #334155;
$border-radius: 0.75rem;
$font-family-sans-serif: "Poppins", system-ui, sans-serif;

@import "bootstrap/scss/bootstrap";

بعد التجميع، كل مكونات المشروع ستتبنى نفس الهوية.

7) مشروع كامل: صفحة منتج بثيم مخصص

<!doctype html>
<html lang="ar" dir="rtl" data-bs-theme="light">
  <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"
    />
    <style>
      :root {
        --brand-accent: #ff7a00;
      }

      .btn-brand {
        background: var(--brand-accent);
        border-color: var(--brand-accent);
        color: #fff;
      }

      .btn-brand:hover {
        background: #e66e00;
        border-color: #e66e00;
        color: #fff;
      }

      .hero-card {
        border-radius: 1.25rem;
      }
    </style>
  </head>
  <body class="bg-body-tertiary">
    <header class="border-bottom bg-body">
      <div class="container py-3 d-flex justify-content-between align-items-center">
        <strong class="fs-5">Alaa Commerce</strong>
        <button id="themeToggle" class="btn btn-outline-secondary btn-sm">تبديل الثيم</button>
      </div>
    </header>

    <main class="container py-5">
      <div class="row g-4 align-items-center">
        <div class="col-lg-6">
          <span class="badge text-bg-warning mb-2">إصدار جديد</span>
          <h1 class="display-5 fw-bold">ابنِ واجهة متسقة مع هوية البراند باستخدام Bootstrap</h1>
          <p class="lead text-secondary">استخدم Utilities للسرعة وطبقة تخصيص خفيفة للهوية.</p>
          <div class="d-flex gap-2">
            <button class="btn btn-brand btn-lg">اشتر الآن</button>
            <button class="btn btn-outline-dark btn-lg">مشاهدة العرض</button>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="card hero-card border-0 shadow-sm">
            <div class="card-body p-4">
              <h5 class="fw-bold">إحصائيات المنتج</h5>
              <ul class="list-group list-group-flush mt-3">
                <li class="list-group-item d-flex justify-content-between px-0"><span>تحسن التحويل</span><strong>+24%</strong></li>
                <li class="list-group-item d-flex justify-content-between px-0"><span>زمن الإطلاق</span><strong>-40%</strong></li>
                <li class="list-group-item d-flex justify-content-between px-0"><span>مكونات قابلة لإعادة الاستخدام</span><strong>48</strong></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>

    <script>
      const root = document.documentElement;
      const toggle = document.getElementById("themeToggle");
      toggle.addEventListener("click", () => {
        const mode = root.getAttribute("data-bs-theme") === "dark" ? "light" : "dark";
        root.setAttribute("data-bs-theme", mode);
      });
    </script>

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

الملخص

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

البناء السريع بالـ Utilities
المسافات والعرض المتجاوب
تبديل الثيم عبر data-bs-theme
إضافة طبقة CSS للهوية
تخصيص Bootstrap عبر Sass
مشروع صفحة منتج كامل

الدرس القادم: تحسين أداء Bootstrap وهندسة المشاريع الكبيرة.

هل تحتاج مساعدة في بناء Design System على Bootstrap؟

Bootstrap Utilities Sass Theming Design System CSS Variables Customization

قسم المقالة

Bootstrap

Bootstrap Utilities and Customization: ابنِ Design System خاص بك

تعلم Utilities في Bootstrap، وCSS Variables، وتخصيص Sass، ودعم الثيم الفاتح/الداكن، وبناء نظام تصميم قابل للتوسع.

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

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

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

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

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

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

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

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

علاء عامر

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

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

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

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

عروض إضافية

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

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

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

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

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

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

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

اتصل بنا الآن

00201014714795

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

[email protected]

علاء عامر

Bootstrap Utilities and Customization: ابنِ Design System خاص بك