---
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%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%B4%D8%A8%D9%83%D8%A9-bootstrap'
title: 'تخطيط عروض الأعمدة على شبكة الأعمدة الاثني عشر | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:23:44+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  كل صف تضيفونه يجلس على شبكة Bootstrap: اثنا عشر مسارًا متساويًا تتشاركها
  أعمدته. فتخطيط مثل 1/3 + 2/3 يمنح عمودًا أربعة مسارات والآخر ثمانية. استخدموا
  هذه الصفحة لتخطيط عروض مجموعها صحيح، ولمنح الصف تخطيطًا ثانيًا للشاشات الأصغر.
  ولإضافة صف أصلًا، انظر إضافة صف.
  يمنح الفيديو صفًا من 4 أعمدة تخطيطًا ثانيًا للأجهزة اللوحية، ثم يضيّق النافذة.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'تخطيط عروض الأعمدة على شبكة الأعمدة الاثني عشر'
      description: |-
        كل صف تضيفونه يجلس على شبكة Bootstrap: اثنا عشر مسارًا متساويًا تتشاركها
        أعمدته. فتخطيط مثل 1/3 + 2/3 يمنح عمودًا أربعة مسارات والآخر ثمانية. استخدموا
        هذه الصفحة لتخطيط عروض مجموعها صحيح، ولمنح الصف تخطيطًا ثانيًا للشاشات الأصغر.
        ولإضافة صف أصلًا، انظر إضافة صف.
        يمنح الفيديو صفًا من 4 أعمدة تخطيطًا ثانيًا للأجهزة اللوحية، ثم يضيّق النافذة.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:23:44+0000'
      dateModified: '2026-10-24T17:19:22+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%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%B4%D8%A8%D9%83%D8%A9-bootstrap'
      articleSection: 'أدلة التصميم'
    -
      '@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%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%B4%D8%A8%D9%83%D8%A9-bootstrap'
      description: |-
        كل صف تضيفونه يجلس على شبكة Bootstrap: اثنا عشر مسارًا متساويًا تتشاركها
        أعمدته. فتخطيط مثل 1/3 + 2/3 يمنح عمودًا أربعة مسارات والآخر ثمانية. استخدموا
        هذه الصفحة لتخطيط عروض مجموعها صحيح، ولمنح الصف تخطيطًا ثانيًا للشاشات الأصغر.
        ولإضافة صف أصلًا، انظر إضافة صف.
        يمنح الفيديو صفًا من 4 أعمدة تخطيطًا ثانيًا للأجهزة اللوحية، ثم يضيّق النافذة.
      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/build) /[تنسيق العناصر](/ar/hc/documentation/learn-dxpr-builder/element-settings) /[أدلة التصميم](/ar/hc/documentation/learn-dxpr-builder/design/overview) # تخطيط عروض الأعمدة على شبكة الأعمدة الاثني عشر.

 تعلّم DXPR Builderبناء الصفحاتتنسيق العناصرأدلة التصميم

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

 أدلة ذات صلة

- [إضافة صف](/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%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7/%D8%A7%D9%84%D8%B5%D9%81%D9%88%D9%81-%D9%88%D8%A7%D9%84%D8%A3%D8%B9%D9%85%D8%AF%D8%A9)
- [جعل تخطيطكم يعمل على الهواتف](/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%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8)
- [إضافة تخطيط متداخل](/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%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7/%D8%A7%D9%84%D8%AA%D8%AF%D8%A7%D8%AE%D9%84)

كل صف تضيفونه يجلس على شبكة Bootstrap: اثنا عشر مسارًا متساويًا تتشاركها أعمدته. فتخطيط مثل 1/3 + 2/3 يمنح عمودًا أربعة مسارات والآخر ثمانية. استخدموا هذه الصفحة لتخطيط عروض مجموعها صحيح، ولمنح الصف تخطيطًا ثانيًا للشاشات الأصغر. ولإضافة صف أصلًا، انظر [إضافة صف](/ar/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

يمنح الفيديو صفًا من 4 أعمدة تخطيطًا ثانيًا للأجهزة اللوحية، ثم يضيّق النافذة.

  ## كيف تصبح الكسور مسارات

| الكسر | المسارات | استخدام نموذجي |
|---|---|---|
| 1/1 | 12 | عمود واحد بعرض كامل |
| 1/2 | 6 | عمودان متساويان |
| 1/3 | 4 | ثلاثة أعمدة متساوية، أو شريط جانبي بجانب 2/3 |
| 2/3 | 8 | محتوى رئيسي بجانب شريط جانبي 1/3 |
| 1/4 | 3 | أربعة أعمدة متساوية، أو شريط جانبي بجانب 3/4 |
| 3/4 | 9 | محتوى رئيسي بجانب شريط جانبي 1/4 |
| 1/6 | 2 | ستة أعمدة صغيرة، مثل صف شعارات |
| 5/12 و7/12 | 5 و7 | عمودان بعرض شبه متساوٍ |

مجموع مسارات الصف 12. وعندما يزيد المجموع عن ذلك، تلتف الأعمدة الزائدة إلى سطر جديد. استخدموا كسورًا تنتج مسارات صحيحة: أنصافًا وأثلاثًا وأرباعًا وأسداسًا وأجزاء من اثني عشر. فكسر مثل 1/5 لا يقابله فئة Bootstrap.

يقسّم الصف داخل عمود ذلك العمود إلى مساراته الاثني عشر الخاصة. انظر [التداخل](/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%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7/%D8%A7%D9%84%D8%AA%D8%AF%D8%A7%D8%AE%D9%84).

## منح الصف تخطيطًا آخر على الأجهزة اللوحية

ينطبق التخطيط الذي تختارونه لصف جديد من **الأجهزة المتوسطة (≥ 768px)** فصاعدًا. وتحت ذلك العرض، تتكدس الأعمدة. تُبقي هذه الخطوات أربعة أعمدة على أجهزة سطح المكتب وتعرض اثنين في كل سطر على الأجهزة اللوحية.

1. حوّموا فوق الصف وانقروا أيقونة الشبكة في شريط تحكمه. فيُفتَح مربع حوار التخطيط على لوحة **الأجهزة المتوسطة (≥ 768px)**.
2. اختاروا البلاطة ذات الأعمدة الأربعة المتساوية.
3. انقروا **إضافة حجم شاشة**. فتُفتَح لوحة ثانية بنسخة من التخطيط.
4. في قائمة حجم الشاشة الخاصة باللوحة الجديدة، اختاروا **الأجهزة الصغيرة (≥ 576px)**.
5. انقروا **تخطيط مخصص** واكتبوا `1/2 + 1/2 + 1/2 + 1/2` وانقروا **حفظ**.
6. انقروا **حفظ** على شريط الأدوات.

تُبقي الأنصاف الأربعة الأعمدة الأربعة كلها وتضع اثنين في كل سطر. أما بلاطة بعمودين فتقلّص الصف إلى عمودين بدل ذلك.

## ما الذي ترونه

على شاشة عريضة يعرض الصف أربعة أعمدة جنبًا إلى جنب. اجعلوا نافذة المتصفح أضيق من 768 بكسل فتلتف إلى اثنين في كل سطر. وتحت 576 بكسل، يأخذ كل عمود العرض الكامل.

## أحجام الشاشات

تضبط كل لوحة في مربع حوار التخطيط الأعمدة لحجم شاشة واحد. وينطبق التخطيط أيضًا على الشاشات الأكبر، حتى الحجم التالي الذي يحمل لوحة خاصة به.

| اللوحة | ينطبق من |
|---|---|
| **صغيرة جدًا (< 576px)** | أصغر الهواتف فصاعدًا |
| **الأجهزة الصغيرة (≥ 576px)** | 576 بكسل |
| **الأجهزة المتوسطة (≥ 768px)** | 768 بكسل؛ اللوحة الأولى لصف جديد |
| **الأجهزة الكبيرة (≥ 992px)** | 992 بكسل |
| **كبيرة جدًا (≥ 1200px)** | 1200 بكسل |
| **كبيرة جدًا جدًا (≥ 1400px)** | 1400 بكسل |

**إزالة حجم شاشة** تحذف لوحة وتخطيطها. ويقبل **تخطيط مخصص** أي قائمة كسور، مثل `1/4 + 1/2 + 1/4`. وعندما لا يكون تخطيط اللوحة إحدى البلاطات، يوسم مربع الحوار **تخطيط مخصص** ويُسمّي التخطيط عليه، مثل **تخطيط مخصص (1/2 + 1/2 + 1/2 + 1/2)**. انقروه لتحرير ذلك التخطيط في مربع التخطيط المخصص.

## Bootstrap على موقعكم

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

## إذا لم تروا التخطيط

- **تتكدس الأعمدة على كل حجم شاشة.** لا Bootstrap محمّل: فالإعداد هو **لا شيء (القالب يوفّر Bootstrap)** والقالب لا يحمّله. اختاروا **Bootstrap 5** ضمن **تحميل ملفات Bootstrap جانبيًا** في `/admin/dxpr_studio/dxpr_builder/settings`.
- **فقد تخطيط سطح المكتب أعمدة.** اخترتم بلاطة بأعمدة أقل لحجم شاشة آخر، فقلّص المنشئ تخطيطات العرض المتساوي لتوافقها. تراجعوا عن التغيير، كما يعرض [التراجع والإعادة](/ar/hc/documentation/learn-dxpr-builder/editing/undo-redo)، واستخدموا **تخطيط مخصص** بكسر واحد لكل عمود.
- **يسقط العمود الأخير إلى سطر جديد.** مجموع الكسور يزيد عن صف واحد من 12 مسارًا. اجعلوها مجموعها 1، مثل `1/4 + 3/4`.
- **عمود مخصص دون عرض واضح.** كسره، مثل 1/5، لا فئة Bootstrap له. استخدموا أنصافًا أو أثلاثًا أو أرباعًا أو أسداسًا أو أجزاء من اثني عشر.

## ما الخطوة التالية؟

- [إضافة صف](/ar/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): إضافة صفوف واختيار إعداد أعمدة.
- [التصميم المتجاوب](/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%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8): عرض العناصر أو إخفاؤها على الهواتف أو الأجهزة اللوحية أو أجهزة سطح المكتب.
- [التداخل](/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%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7/%D8%A7%D9%84%D8%AA%D8%AF%D8%A7%D8%AE%D9%84): وضع صفوف داخل أعمدة لتخطيطات أدق.