---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/development/css-architecture'
title: 'بنية CSS | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:25:23+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  محتوى المنشئ وسوم Bootstrap 5 إضافة إلى مجموعة صغيرة من فئات az-.
  ومعرفة الفئات التي تظهر على الصفحات المنشورة، وأيها لا يوجد إلا أثناء عمل
  المحرّر، تخبركم بما يستطيع CSS الخاص بقالبكم استهدافه.
tags:
  - 'Architectuur en API’s'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T01:25:23+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'بنية CSS'
      description: |-
        محتوى المنشئ وسوم Bootstrap 5 إضافة إلى مجموعة صغيرة من فئات az-.
        ومعرفة الفئات التي تظهر على الصفحات المنشورة، وأيها لا يوجد إلا أثناء عمل
        المحرّر، تخبركم بما يستطيع CSS الخاص بقالبكم استهدافه.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:25:23+0000'
      dateModified: '2026-10-24T01:25:23+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/documentation/learn-dxpr-builder/development/css-architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/development/css-architecture'
      description: |-
        محتوى المنشئ وسوم Bootstrap 5 إضافة إلى مجموعة صغيرة من فئات az-.
        ومعرفة الفئات التي تظهر على الصفحات المنشورة، وأيها لا يوجد إلا أثناء عمل
        المحرّر، تخبركم بما يستطيع 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
---
[Help Center](/ar/hc)/[Documentation](/ar/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # بنية CSS.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

محتوى المنشئ وسوم Bootstrap 5 إضافة إلى مجموعة صغيرة من فئات `az-`. ومعرفة الفئات التي تظهر على الصفحات المنشورة، وأيها لا يوجد إلا أثناء عمل المحرّر، تخبركم بما يستطيع CSS الخاص بقالبكم استهدافه.

## الفئات على الصفحات المنشورة

### التخطيط

| الوسوم | الفئات |
|---|---|
| المقطع | `az-section`، مع `container` أو `container-fluid` داخله |
| الصف | Bootstrap: الفئة `row` |
| العمود | فئات `col-*` الخاصة بـ Bootstrap، واحدة لكل نقطة توقف |
| عنصر المحتوى | فئة واحدة لكل نوع عنصر، مثل `az-text` أو `az-image` أو `az-images-carousel`؛ وتستخدم روابط التواصل `st-social`. ويحمل معظمها أيضًا `az-element`؛ أما الزر والصورة فلا |

قد يحمل المحتوى المحفوظ بإصدارات أقدم `az-row` و `az-column`. فيتعرّف عليهما المحرّر ويسقطهما في المرة التالية التي يُحفَظ فيها الصف أو العمود.

### المعدّلات

| الفئة | يضبطها |
|---|---|
| `az-row--equal-height` | **أعمدة متساوية الارتفاع** على صف؛ ودونه يحصل الصف على `align-items-start` |
| `az-row--reverse-horizontal` | **عكس الصف** على صف |
| `az-util-vertical-centering` | **توسيط عمودي** على مقطع أو عمود |

### شبكة Bootstrap

تستخدم الأعمدة فئات شبكة Bootstrap:

| الفئة | العرض |
|---|---|
| `col` | يتشارك الصف بالتساوي |
| `col-6` | 50% |
| `col-md-4` | 33% من 768 بكسل |
| `col-lg-3` | 25% من 992 بكسل |

## كتابة CSS مخصص

- اجعلوا قواعد المنشئ الخاصة ضمن `.az-section` أو ضمن فئات الأنواع، مثل `.az-text` أو `.az-button`. فـ `.az-element` يفوّت الزر والصورة.
- لا تتجاوزوا فئات شبكة Bootstrap؛ فيضبط المحرّر عروض الأعمدة عبرها.
- لتنسيق لمرة واحدة، أضيفوا فئة في حقل **فئات HTML** الخاص بالعنصر ونسّقوا تلك الفئة.

## فئات المحرّر فقط

توجد هذه الفئات فقط أثناء عمل المحرّر، فلا تطابقها الصفحات المنشورة أبدًا:

| الفئة | أين |
|---|---|
| `dxpr-builder-ui` | كل قطعة من واجهة المحرّر: أشرطة التحكم والقوائم ومربعات الحوار |
| `controls` | شريط تحكم العنصر |
| `dxpr-editor` | حاوية الحقل في كل وضع عرض إلا المعاينة |
| `az-ctnr` | حاوية الحقل بعد بدء المحرّر |
| `az-sortable-placeholder` | العنصر النائب للإفلات أثناء سحب عنصر |

أنماط المحرّر الخاصة في `dxpr_builder/css/dxpr_builder_backend.css`، مبنية من `dxpr_builder/sass/dxpr_builder_backend.scss`.

## إصدار Bootstrap

يكتب المنشئ وسوم Bootstrap 5. وإذا كان قالبكم لا يحمّل Bootstrap 5، اضبطوا **تحميل ملفات Bootstrap جانبيًا** على **Bootstrap 5** في **DXPR Studio > DXPR Builder > الإعدادات العامة**، ضمن **Bootstrap**. ويفترض **لا شيء (القالب يوفّر Bootstrap)** أن قالبكم يحمّله.