بنية CSS.
محتوى المنشئ وسوم 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) أن قالبكم يحمّله.