شرح صفوف ومحتوى الفقرة
يتكامل الكلاس .input-group بنفس البساطة مع عناصر <select class="form-select"> وحقول رفع الملفات <input type="file" class="form-control">. فعند ربط عنصر <label class="input-group-text" for="fileId"> بجانب حقل الملفات، تتحول التسمية المتصلة إلى منطقة نقر إضافية أنيقة تفتح نافذة اختيار الملف فوراً، أو يمكنك وضع زر إرسال .btn على الطرف الآخر لرفع الملف مباشرة.
<div class="input-group mb-3">
<label class="input-group-text" for="envSel">Env</label>
<select class="form-select" id="envSel">
<option selected>Production</option>
</select>
</div>
<div class="input-group">
<input type="file" class="form-control" id="certFile">
<button class="btn btn-primary" type="button">Go</button>
</div>يلخص الجدول المرجعي التالي كافة كلاسات وقواعد مجموعات الإدخال في Bootstrap 5.3:
| الكلاس أو العنصر | موضع التطبيق | القاعدة المعمارية والسلوك |
|---|---|---|
.input-group | الحاوية الأب المرنة | دمج الإضافات والحقول والأزرار المباشرة في شريط متصل واحد |
.input-group-text | <span> أو <label> أو <div> | تنسيق البادئات واللواحق النصية أو احتضان .form-check-input.mt-0 |
.input-group-sm / lg | الحاوية .input-group | تحجيم المجموعة كاملة دفعة واحدة دون كلاسات تحجيم فردية بالداخل |
.flex-nowrap | الحاوية .input-group | منع التفاف البادئة أو الحقل إلى سطر جديد على الشاشات الضيقة |
.btn | ابن مباشر داخل المجموعة | إلحاق زر واحد أو أكثر مباشرة بالحقل دون تغليفه بـ .input-group-text |
.form-select / file | ابن مباشر داخل المجموعة | دمج قوائم الاختيار وحقول الملفات مع تسميات أو أزرار إجراءات متصلة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بنية مجموعات الإدخال المسطحة .input-group في بوتستراب 5، وإلحاق البادئات واللواحق النصية، وضبط الأحجام الموحدة، ودمج مربعات الاختيار والحقول المتعددة والأزرار وقوائم الاختيار والملفات. الخطوة التالية: انتقل الآن إلى درس «التسميات العائمة في بوتستراب 5» لبناء حقول تتحرك تسمياتها بنعومة نحو الأعلى فور التركيز أو الكتابة.