انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: الصندوق المرن والتكديس في بوتستراب 5

Vertical Horizontal Stacks التكديس السريع vstack وhstack

أتقن أدوات الصندوق المرن والتكديس في بوتستراب 5.3 شاملة حاويات واتجاهات d-flex، وتوزيع ومحاذاة المحاور، والتمدد والانكماش والالتفاف، واختصارات vstack وhstack وتخطيط الوسائط الحديث.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لاحظ فريق بوتستراب تكرار كتابة المطورين لثلاثة كلاسات معاً في كل مكان لبناء تكديس عمودي أو أفقي، فقدم في الإصدار 5.1+ أداتين مختصرتين عاليتي القراءة:

  • التكديس الرأسي (.vstack): يختصر كتابة d-flex flex-column align-self-stretch لرصّ العناصر والبطاقات عمودياً بملء العرض، ويقترن عادةً مع .gap-2 أو .gap-3.
  • التكديس الأفقي (.hstack): يختصر كتابة d-flex flex-row align-items-center لصفّ العناصر والأدوات أفقياً مع توسيطها رأسياً تلقائياً!
الصف 2 كود برمجي
HTML 
<div class="vstack gap-2 mb-3">
  <div class="p-2 border rounded">Row 1</div>
  <div class="p-2 border rounded">Row 2</div>
</div>
<div class="hstack gap-2 p-2 border rounded">
  <span>Filter: Active</span>
  <span class="ms-auto text-primary">Reset</span>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (الصندوق المرن والتكديس في بوتستراب 5)