أزرار العرض الكامل بـ d-grid | الأزرار وزر الإغلاق في بوتستراب 5

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

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

في الإصدار الرابع اعتاد المطورون كتابة الكلاس .btn-block لصنع زر يمتد بعرض 100% من حاويته، لكنه كان يسبب التصاق الأزرار المتتالية ويفتقر للمرونة عبر الشاشات. ألغى Bootstrap 5 الكلاس .btn-block نهائياً واستبدله بحاوية التخطيط الذكية .d-grid .gap-2!

بفضل هذا البديل الحديث يمكنك تكديس الأزرار بعرض كامل على شاشة الهاتف لسهولة النقر بالإبهام، ثم تحويلها تلقائياً إلى أزرار متجاورة محاذية لنهاية السطر على الحاسوب بسطر واحد هو .d-grid .gap-2 .d-md-flex .justify-content-md-end.

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

HTML

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-outline-secondary" type="button">
    Back to Step 1
  </button>
  <button class="btn btn-primary" type="button">
    Confirm Deployment
  </button>
</div>

جرّب بنفسك

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

Block Buttons with d-grid أزرار العرض الكامل بـ d-grid

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

جميع فقرات هذا الدرس (الأزرار وزر الإغلاق في بوتستراب 5)