نمط الطي الأفقي الحديث | الطي والإظهار Collapse في بوتستراب 5

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

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

أضاف الإصدار الخامس كلاس .collapse-horizontal لدعم الطي العرضي الأفقي على محور العرض width بدلاً من محور الارتفاع height، وهو مثالي لإظهار بطاقة مساعدة جانبية أو تفاصيل سريعة بجوار الأزرار.

لكي ينساب النص بسلاسة أثناء فتح العرض من الصفر دون إعادة تكسير الأسطر في كل إطار زمني، احرص على منح البطاقة الداخلية عرضاً محدداً (مثل style="width: 280px;") مع وضع حد أدنى للارتفاع على الحاوية الخارجية إن أردت تثبيت العناصر المجاورة.

الصف 2 صورة توضيحية

الصف 3 كود برمجي

HTML

<button class="btn btn-primary mb-2" type="button"
  data-bs-toggle="collapse" data-bs-target="#sideNote">
  Toggle Side Note
</button>
<div style="min-height: 110px;">
  <div class="collapse collapse-horizontal" id="sideNote">
    <div class="card card-body" style="width: 280px;">
      Horizontal panel slides smoothly along the width axis.
    </div>
  </div>
</div>

جرّب بنفسك

الصف 4 ملاحظة هامة

Horizontal Collapse Mode نمط الطي الأفقي الحديث

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

جميع فقرات هذا الدرس (الطي والإظهار Collapse في بوتستراب 5)