تخطيط عروض الأعمدة على شبكة الأعمدة الاثني عشر.
كل صف تضيفونه يجلس على شبكة Bootstrap: اثنا عشر مسارًا متساويًا تتشاركها أعمدته. فتخطيط مثل 1/3 + 2/3 يمنح عمودًا أربعة مسارات والآخر ثمانية. استخدموا هذه الصفحة لتخطيط عروض مجموعها صحيح، ولمنح الصف تخطيطًا ثانيًا للشاشات الأصغر. ولإضافة صف أصلًا، انظر إضافة صف.
يمنح الفيديو صفًا من 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.
يقسّم الصف داخل عمود ذلك العمود إلى مساراته الاثني عشر الخاصة. انظر التداخل.
منح الصف تخطيطًا آخر على الأجهزة اللوحية
ينطبق التخطيط الذي تختارونه لصف جديد من الأجهزة المتوسطة (≥ 768px) فصاعدًا. وتحت ذلك العرض، تتكدس الأعمدة. تُبقي هذه الخطوات أربعة أعمدة على أجهزة سطح المكتب وتعرض اثنين في كل سطر على الأجهزة اللوحية.
- حوّموا فوق الصف وانقروا أيقونة الشبكة في شريط تحكمه. فيُفتَح مربع حوار التخطيط على لوحة الأجهزة المتوسطة (≥ 768px).
- اختاروا البلاطة ذات الأعمدة الأربعة المتساوية.
- انقروا إضافة حجم شاشة. فتُفتَح لوحة ثانية بنسخة من التخطيط.
- في قائمة حجم الشاشة الخاصة باللوحة الجديدة، اختاروا الأجهزة الصغيرة (≥ 576px).
- انقروا تخطيط مخصص واكتبوا
1/2 + 1/2 + 1/2 + 1/2وانقروا حفظ. - انقروا حفظ على شريط الأدوات.
تُبقي الأنصاف الأربعة الأعمدة الأربعة كلها وتضع اثنين في كل سطر. أما بلاطة بعمودين فتقلّص الصف إلى عمودين بدل ذلك.
ما الذي ترونه
على شاشة عريضة يعرض الصف أربعة أعمدة جنبًا إلى جنب. اجعلوا نافذة المتصفح أضيق من 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. - فقد تخطيط سطح المكتب أعمدة. اخترتم بلاطة بأعمدة أقل لحجم شاشة آخر، فقلّص المنشئ تخطيطات العرض المتساوي لتوافقها. تراجعوا عن التغيير، كما يعرض التراجع والإعادة، واستخدموا تخطيط مخصص بكسر واحد لكل عمود.
- يسقط العمود الأخير إلى سطر جديد. مجموع الكسور يزيد عن صف واحد من 12 مسارًا. اجعلوها مجموعها 1، مثل
1/4 + 3/4. - عمود مخصص دون عرض واضح. كسره، مثل 1/5، لا فئة Bootstrap له. استخدموا أنصافًا أو أثلاثًا أو أرباعًا أو أسداسًا أو أجزاء من اثني عشر.
ما الخطوة التالية؟
- إضافة صف: إضافة صفوف واختيار إعداد أعمدة.
- التصميم المتجاوب: عرض العناصر أو إخفاؤها على الهواتف أو الأجهزة اللوحية أو أجهزة سطح المكتب.
- التداخل: وضع صفوف داخل أعمدة لتخطيطات أدق.