في هذا الدرس 7تصفّح المواضيع
بما أن عنصر الصف .row في Bootstrap 5 هو حاوية Flexbox أصيلة، يمكنك التحكم الفوري بمحاذاة جميع أعمدته على المحور الرأسي عندما تختلف ارتفاعات محتوياتها أو يمتلك الصف ارتفاعاً أكبر منها. استخدم الكلاسات .align-items-start (أعلى الصف)، أو .align-items-center (منتصف الصف عمودياً)، أو .align-items-end (أسفل الصف) مباشرة على عنصر .row.
إذا أردت تحريك عمود واحد بمفرده إلى الأعلى أو المنتصف أو الأسفل دون تغيير محاذاة بقية الأعمدة المجاورة له في نفس الصف، ضع الكلاس على العمود نفسه باستخدام .align-self-start أو .align-self-center أو .align-self-end (مع دعم كامل للنسخ المتجاوبة مثل .align-self-md-center).
<div class="container">
<div class="row" style="min-height: 110px;">
<div class="col align-self-start">Top</div>
<div class="col align-self-center">Middle</div>
<div class="col align-self-end">Bottom</div>
</div>
</div>عندما يكون مجموع وحدات الأعمدة داخل الصف أقل من 12 وحدة (مثل عمودين بحجم .col-4 مجموعهما 8 وحدات فقط)، يتبقى فراغ أفقي قدره 4 وحدات. يمكنك التحكم في توزيع هذا الفراغ بإضافة أحد كلاسات المحور الأفقي على عنصر .row: مثل .justify-content-start، أو .justify-content-center للتوسيط، أو .justify-content-end، أو .justify-content-around، أو .justify-content-between، أو .justify-content-evenly.
<div class="container">
<div class="row justify-content-center">
<div class="col-4">Centered A</div>
<div class="col-4">Centered B</div>
</div>
<div class="row justify-content-between">
<div class="col-4">Start Edge</div>
<div class="col-4">End Edge</div>
</div>
</div>ينتقل العمود تلقائياً إلى سطر جديد متى تجاوز مجموع الوحدات الرقمية 12 عموداً، ولكن ماذا لو أردت إجبار الأعمدة على النزول لسطر جديد دون إنشاء عنصر .row منفصل وحتى لو كان مجموعها أقل من 12؟ الحل الرسمي في Bootstrap 5 هو إدراج عنصر فاصل فارغ <div class="w-100"></div> بين الأعمدة ليشغل عرض 100% من مسار Flexbox ويدفع ما بعده مباشرة إلى سطر جديد.
تتيح كلاسات .order-0 حتى .order-5، بالإضافة إلى .order-first (order: -1) و.order-last (order: 6)، إعادة ترتيب ظهور الأعمدة بصرياً عبر الشاشات المختلفة مثل وضع قائمة التنقل في الأعلى على الهاتف ثم نقلها لليسار أو اليمين على سطح المكتب عبر .order-md-2.
<div class="container">
<div class="row">
<div class="col order-3">1st DOM (order-3)</div>
<div class="col order-2">2nd DOM (order-2)</div>
<div class="col order-first">3rd DOM (first)</div>
</div>
</div>لدفع عمود بمقدار عدد محدد من وحدات الشبكة دون إدراج أعمدة فارغة قبله، استخدم كلاسات الإزاحة .offset-1 حتى .offset-11 أو نسخها المتجاوبة مثل .offset-md-3 (الذي يدفع عموداً بحجم .col-md-6 بمقدار 3 وحدات ليتوسط الصف تماماً: 3 فراغ + 6 عمود + 3 متبقٍ). كما يمكنك تصفير الإزاحة على شاشة أكبر عبر .offset-lg-0.
جرّب المحاذاة والفواصل والترتيب والإزاحة عملياً في المختبر الحي التالي:
ميزة إضافية مفيدة في 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.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Cross-Axis Alignment المحاذاة الرأسية المتقاطعة
- ضبط تموضع الأعمدة في أعلى أو وسط أو أسفل الصف عبر .align-items-* أو لكل عمود عبر .align-self-*.
- للمراجعة
- 02 Column Line Break فاصل كسر سطر الأعمدة
- عنصر فارغ يحمل الكلاس .w-100 داخل الصف لإجبار الأعمدة التالية على الانتقال الفوري لسطر جديد.
- للمراجعة
- 03 Visual Flex Order الترتيب البصري المرن
- كلاسات .order-* التي تعيد ترتيب ظهور الأعمدة على الشاشة دون تغيير ترتيبها البرمجي في HTML.
- للمراجعة
- 04 Column Offset إزاحة العمود الشبكية
- دفع العمود أفقياً بوحدات شبكية دقيقة عبر كلاسات .offset-* باستخدام هامش البداية النسبي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RTL RTL
- Right-to-Left
- الاتجاه من اليمين إلى اليسار — يعكس اتجاه إزاحات .offset-* تلقائياً في النسخة العربية لتدفع العمود من جهة اليمين بدقة.
- للمراجعة
- 02 LTR LTR
- Left-to-Right
- الاتجاه من اليسار إلى اليمين — يطبق إزاحات .offset-* كهامش أيسر قياسي في الواجهات الإنجليزية.
- للمراجعة
- 03 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات إتاحة محتوى الويب — توصي بالحفاظ على انسجام الترتيب البصري للكلاسات مع تسلسل القراءة والتنقل بلوحة المفاتيح.
- للمراجعة
- 04 DOM DOM
- Document Object Model
- نموذج كائن المستند — يحدد التسلسل الفعلي لتركيز لوحة المفاتيح وقارئات الشاشة بصرف النظر عن الترتيب البصري.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ صفاً بكلاس .row.justify-content-center يضم عمودين بحجم .col-4، ثم أدرج فاصل <div class="w-100"></div> متبوعاً بعمودين إضافيين بحجم .col-4 في السطر الثاني.
-
داخل عنصر .row، أنشئ عموداً واحداً يحمل الكلاسات col-12 col-md-6 offset-md-3 ليمتد بعرض كامل على الجوال ويتوسط الشاشة بدءاً من حجم md.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.