شرح صفوف ومحتوى الفقرة
ميزة إضافية مفيدة في Bootstrap 5 هي إمكانية استخدام كلاسات .col-* ككلاسات عرض منفردة خارج عنصر .row تماماً! فعند وضع .col-sm-8 على فقرة أو صندوق مستقل في الصفحة، يمنحه بوتستراب عرضاً متجاوباً قدره 66.67% على الشاشات الأكبر من sm وعرضاً كاملاً 100% على الهواتف دون أي حشو جانبي خاص بالصفوف.
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">Centered Offset</div>
</div>
<div class="col-sm-9">
Standalone .col-sm-9 outside .row (75% width)
</div>
</div>يجمع الجدول التالي كافة كلاسات محاذاة الأعمدة وترتيبها وإزاحتها في Bootstrap 5.3:
| مجموعة الكلاسات | العنصر المستهدف | الوظيفة التخطيطية |
|---|---|---|
.align-items-{start|center|end} | الصف .row | محاذاة جميع أعمدة الصف رأسياً نحو الأعلى أو المنتصف أو الأسفل |
.align-self-{start|center|end} | العمود .col-* | تغيير المحاذاة الرأسية لعمود مفرد بمعزل عن بقية أعمدة الصف |
.justify-content-* | الصف .row | توزيع المساحة الأفقية الفائضة عندما يقل مجموع الأعمدة عن 12 |
.w-100 | عنصر فارغ داخل .row | فرض كسر فوري للسطر لنقل الأعمدة التالية إلى سطر بصري جديد |
.order-{0..5|first|last} | العمود .col-* | إعادة الترتيب البصري للأعمدة عبر نقاط التوقف دون تعديل HTML |
.offset-{bp}-{0..11} | العمود .col-* | دفع العمود منطقياً بمقدار وحدات شبكية محددة أو تصفيرها عبر 0 |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس التحكم الكامل بأعمدة الشبكة عبر المحاذاة الرأسية والأفقية، وكسر السطر بفاصل .w-100، وإعادة الترتيب البصري بكلاسات .order-*، والإزاحة المنطقية بكلاسات .offset-*، واستخدام كلاسات .col-* المنفردة. الخطوة التالية: انتقل الآن إلى درس «الفواصل والمسافات البينية Gutters» لضبط المسافات الأفقية والرأسية بين الأعمدة بدقة عبر كلاسات gx وgy وg.