أحجام مجموعات الإدخال | مجموعات الإدخال في بوتستراب 5

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

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

لتكبير أو تصغير مجموعة الإدخال بأكملها (بما فيها البادئة النصية والحقل معاً)، أضف الكلاس .input-group-lg أو .input-group-sm إلى الحاوية الأب .input-group نفسها. لا تضع كلاسات تحجيم فردية مثل .form-control-lg على الحقول الداخلية منفردة، لأن كلاس المجموعة الأب ينسق ارتفاع وحشو جميع الأبناء المباشرين بتناغم تام.

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

مخطط يوضح البنية المسطحة لمجموعة الإدخال input-group بوضع البادئة والحقل والزر كأبناء مباشرين

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

HTML

<div class="input-group input-group-sm mb-2">
  <span class="input-group-text">SM</span>
  <input type="text" class="form-control">
</div>
<div class="input-group input-group-lg">
  <span class="input-group-text">LG</span>
  <input type="text" class="form-control">
</div>

جرّب بنفسك

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

Input Group Sizing أحجام مجموعات الإدخال

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

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