تطبيق الثيم للصفحة أو لمكوّن | أوضاع الألوان والوضع الداكن في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تعمل سمة data-bs-theme بمرونة هرمية عبر شجرة المستند في مستويين متكاملين:

التفعيل الشامل للصفحة كلها: ضع data-bs-theme="dark" على الوسم الجذري <html> لترث جميع الحاويات والبطاقات والجداول وحقول النماذج والنوافذ المنبثقة الوضع الداكن تلقائياً.
التفعيل الموضعي لمكوّن منفرد: أبقِ الصفحة في الوضع الفاتح الافتراضي، وضع data-bs-theme="dark" على بطاقة تسعير مميزة .card أو قائمة منسدلة .dropdown-menu أو تذييل سفلي فقط، بل ويمكنك وضع data-bs-theme="light" على عنصر داخلي لعكس الثيم محلياً!

الصف 2 كود برمجي

HTML

<div class="row g-3">
  <div class="col-md-6">
    <div class="card p-3">Default Light Card</div>
  </div>
  <div class="col-md-6">
    <div class="card p-3" data-bs-theme="dark">
      <h3 class="h6">Scoped Dark Card</h3>
      <p class="text-body-secondary mb-0">Scoped dark</p>
    </div></div></div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Global vs Scoped Themes تطبيق الثيم للصفحة أو لمكوّن

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (أوضاع الألوان والوضع الداكن في بوتستراب 5)