---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D9%85%D8%B1%D8%AC%D8%B9/%D9%81%D8%A6%D8%A7%D8%AA-css'
title: 'مرجع فئات CSS | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:09:35+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  يستخدم محتوى DXPR Builder فئات Bootstrap 5 مع
  بعض فئاته الخاصة. يسرد هذا المرجع الأكثر
  ترجيحًا للاستخدام أو الاستهداف في CSS.
tags:
  - 'Elements and CSS'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:09:35+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'مرجع فئات CSS'
      description: |-
        يستخدم محتوى DXPR Builder فئات Bootstrap 5 مع
        بعض فئاته الخاصة. يسرد هذا المرجع الأكثر
        ترجيحًا للاستخدام أو الاستهداف في CSS.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:09:35+0000'
      dateModified: '2026-10-24T08:09:35+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D9%85%D8%B1%D8%AC%D8%B9/%D9%81%D8%A6%D8%A7%D8%AA-css'
      articleSection: 'العناصر وCSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D9%85%D8%B1%D8%AC%D8%B9/%D9%81%D8%A6%D8%A7%D8%AA-css'
      description: |-
        يستخدم محتوى DXPR Builder فئات Bootstrap 5 مع
        بعض فئاته الخاصة. يسرد هذا المرجع الأكثر
        ترجيحًا للاستخدام أو الاستهداف في CSS.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[المرجع](/ar/hc/documentation/learn-dxpr-builder/reference) /[العناصر وCSS](/ar/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # مرجع فئات CSS.

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

   ## في هذا الدليل

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

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

1. حدّدوا العنصر.
2. افتحوا **المزيد > الإعدادات**.
3. في القسم **العام**، اختاروا الفئات في حقل **فئات 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 لإظهار المحتوى أو إخفائه على أحجام شاشات محددة:

```html
<!-- 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** للعنصر (في القسم **العام** من الإعدادات) للتحكم في الظهور المتجاوب.