مرجع فئات CSS.

تعلّم DXPR Builderالمرجعالعناصر وCSS

يستخدم محتوى DXPR Builder فئات Bootstrap 5 مع بعض فئاته الخاصة. يسرد هذا المرجع الأكثر ترجيحًا للاستخدام أو الاستهداف في CSS.

إضافة فئات مخصصة

حدّدوا العنصر.
افتحوا المزيد > الإعدادات.
في القسم العام، اختاروا الفئات في حقل فئات HTML. لكتابة أي اسم فئة، انقروا التحرير كنص وافصلوا بين الفئات بمسافات.

فئات شبكة Bootstrap

فئات الحاوية

الفئة	الوصف
`.container`	حاوية موسّطة بعرض ثابت
`.container-fluid`	حاوية بعرض كامل

فئات الصفوف والأعمدة

الفئة	الوصف
`.row`	حاوية مرنة للأعمدة
`.col-{n}`	عمود يمتد على n/12 من الصف
`.col-sm-{n}`	عرض العمود على small (576px فأعلى)
`.col-md-{n}`	عرض العمود على medium (768px فأعلى)
`.col-lg-{n}`	عرض العمود على large (992px فأعلى)
`.col-xl-{n}`	عرض العمود على XL (1200px فأعلى)

أدوات التباعد في Bootstrap

الهامش

الفئة	الوصف
`.m-{0-5}`	هامش على كل الجوانب
`.mt-{0-5}`	هامش علوي
`.mb-{0-5}`	هامش سفلي
`.ms-{0-5}`	هامش البداية (اليسار في LTR)
`.me-{0-5}`	هامش النهاية (اليمين في LTR)
`.mx-{0-5}`	هامش يمين ويسار
`.my-{0-5}`	هامش علوي وسفلي

الحشو

الفئة	الوصف
`.p-{0-5}`	حشو على كل الجوانب
`.pt-{0-5}`	حشو علوي
`.pb-{0-5}`	حشو سفلي
`.ps-{0-5}`	حشو البداية
`.pe-{0-5}`	حشو النهاية
`.px-{0-5}`	حشو يمين ويسار
`.py-{0-5}`	حشو علوي وسفلي

أدوات النص في Bootstrap

الفئة	الوصف
`.text-start`	نص محاذى لليسار
`.text-center`	نص موسّط
`.text-end`	نص محاذى لليمين
`.fw-bold`	نص عريض
`.fw-light`	نص خفيف الوزن
`.fst-italic`	نص مائل
`.text-uppercase`	نص بأحرف كبيرة
`.text-lowercase`	نص بأحرف صغيرة
`.fs-1` to `.fs-6`	حجم الخط (1 الأكبر)

أدوات الألوان في Bootstrap

ألوان النص

الفئة	الوصف
`.text-primary`	اللون الأساسي للقالب
`.text-secondary`	اللون الثانوي للقالب
`.text-success`	أخضر (نجاح)
`.text-danger`	أحمر (خطر/خطأ)
`.text-warning`	أصفر (تحذير)
`.text-info`	سماوي (معلومات)
`.text-muted`	نص رمادي خافت
`.text-white`	نص أبيض

ألوان الخلفية

الفئة	الوصف
`.bg-primary`	خلفية أساسية
`.bg-secondary`	خلفية ثانوية
`.bg-success`	خلفية خضراء
`.bg-danger`	خلفية حمراء
`.bg-warning`	خلفية صفراء
`.bg-info`	خلفية سماوية
`.bg-light`	خلفية رمادية فاتحة
`.bg-dark`	خلفية داكنة

أدوات العرض في Bootstrap

الفئة	الوصف
`.d-none`	إخفاء العنصر
`.d-block`	عرض كتلة
`.d-inline`	عرض مضمّن
`.d-sm-none`	الإخفاء من small فأعلى
`.d-md-block`	العرض من medium فأعلى
`.d-lg-none`	الإخفاء من large فأعلى

فئات DXPR Builder

فئات العناصر

الفئة	الوصف
`.az-element`	الفئة الأساسية على معظم عناصر المحتوى؛ لا يحملها الزر والصورة، فاستهدفوا `.az-<type>` بدلًا من ذلك
`.az-<type>`	فئة واحدة لكل نوع عنصر، مثل `.az-text` أو `.az-image` أو `.az-images-carousel`؛ ويستخدم عنصر الروابط الاجتماعية `.st-social`
`.az-section`	عنصر القسم
`.row`	عنصر الصف (Bootstrap)؛ وقد يحمل أيضًا محتوى الإصدارات الأقدم `.az-row`
`.col-*`	عنصر العمود (Bootstrap)؛ وقد يحمل أيضًا محتوى الإصدارات الأقدم `.az-column`

فئات الحركة

تستخدم الحركات تسمية animate.css. وبينما يتحرك العنصر يحمل:

الفئة	الوصف
`.animated`	تُضاف بينما تعمل الحركة
`.infinite`	تُضاف عندما يكون اللانهائي مفعّلًا
اسم الحركة، مثل `.fadeIn`	مؤثر الدخول أو الخروج للحركة الذي يُشغَّل

فئات النسخ

الفئة	الوصف
`.az-variant-container`	حاوية اختبار A/B، مع `.rl-experiment`
`.az-variant-wrapper`	كل ذراع نسخة
`.az-variant-original`	الذراع الأصلية (A)
`.az-variant-1`، `.az-variant-2`	الذراعان B وC وهكذا
`.az-variant-active`	الذراع المعروضة حاليًا

استخدام الفئات للظهور المتجاوب

اجمعوا أدوات العرض في Bootstrap لإظهار المحتوى أو إخفائه على أحجام شاشات محددة:

<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

أضيفوا هذه الفئات في حقل فئات HTML للعنصر (في القسم العام من الإعدادات) للتحكم في الظهور المتجاوب.