في هذا الدرس 6تصفّح المواضيع
كثيراً ما تحتاج في النماذج العملية إلى لصق رمز عملة $، أو علامة حساب @، أو نطاق بريد ثابت @company.com مباشرة بحافة حقل النص بحيث يبدوان كقطعة واحدة متصلة. يوفر Bootstrap 5 لهذا الغرض الحاوية المرنة .input-group ببنية مسطحة مبسطة للغاية بعد أن ألغى نهائياً الحاويتين الوسيطتين القديمتين من الإصدار الرابع.
كل ما عليك فعله الآن هو وضع عنصر الإضافة النصية <span class="input-group-text"> وحقل .form-control كأبناء مباشرين جنباً إلى جنب داخل .input-group، وسيتولى بوتستراب تصفير الزوايا الداخلية المتلاقية تلقائياً. ضع دائماً عنصر <label class="form-label"> خارج .input-group وليس بداخله.
<div class="input-group mb-3">
<span class="input-group-text" id="atAddon">@</span>
<input type="text" class="form-control"
placeholder="username" aria-describedby="atAddon">
</div>
<div class="input-group flex-nowrap">
<span class="input-group-text">https://</span>
<input type="text" class="form-control" value="site.io">
</div>لتكبير أو تصغير مجموعة الإدخال بأكملها (بما فيها البادئة النصية والحقل معاً)، أضف الكلاس .input-group-lg أو .input-group-sm إلى الحاوية الأب .input-group نفسها. لا تضع كلاسات تحجيم فردية مثل .form-control-lg على الحقول الداخلية منفردة، لأن كلاس المجموعة الأب ينسق ارتفاع وحشو جميع الأبناء المباشرين بتناغم تام.
<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>يمكنك دمج مربع اختيار checkbox أو زر راديو radio داخل خانة البادئة بدلاً من النص (كأن يفعّل المستخدم خيار ضريبة مخصصة ثم يكتب نسبتها في الحقل المجاور). ضع عنصر <input class="form-check-input mt-0"> مباشرة داخل <div class="input-group-text"> بدون حاوية .form-check، مع إضافة .mt-0 لتوسيط المربع عمودياً بدقة وتزويده بسمة aria-label.
لا تقتصر مجموعة الإدخال على بادئة واحدة وحقل واحد؛ بل يمكنك ربط حقلَي .form-control متتاليين داخل نفس .input-group (مثل الاسم الأول واسم العائلة بجانب بادئة واحدة)، أو وضع أكثر من عنصر .input-group-text قبل الحقل أو بعده (مثل رمز العملة $ وكسور السنت 0.00).
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control" value="8080">
</div>
<div class="input-group">
<span class="input-group-text">Name</span>
<input class="form-control" placeholder="First">
</div>يتكامل الكلاس .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» لبناء حقول تتحرك تسمياتها بنعومة نحو الأعلى فور التركيز أو الكتابة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Input Group Container حاوية مجموعة الإدخال
- حاوية مرنة تدمج الحدود المتجاورة وتوحد استدارة الزوايا الخارجية بين الإضافات والحقول والأزرار المباشرة.
- للمراجعة
- 02 Text Addon Element عنصر الإضافة النصية
- عنصر مباشر يحمل كلاس .input-group-text لعرض رمز ثابت أو احتضان مربع اختيار بجانب الحقل.
- للمراجعة
- 03 Direct Button Addon إضافة الزر المباشر
- إدراج عنصر الزر <button class="btn"> كابن مباشر داخل .input-group دون وضعه داخل .input-group-text.
- للمراجعة
- 04 Group-Level Sizing التحجيم الموحد للمجموعة
- إضافة كلاس الحجم الصغير أو الكبير على الحاوية الأب لتكبير أو تصغير كافة الأبناء تلقائياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — تعتمد على Flexbox والهامش السالب ومحددات الطفل الأول والأخير لدمج عناصر المجموعة بسلاسة.
- للمراجعة
- 02 ARIA ARIA
- Accessible Rich Internet Applications
- تطبيقات الإنترنت الغنية المتاحة — تربط معرّف البادئة النصية بالحقل عبر aria-describedby لإعلان وحدة العملة أو النطاق صوتياً.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- الاتجاه من اليمين إلى اليسار — يعكس تلقائياً الزوايا المستديرة والمربعة للطفل الأول والأخير داخل المجموعة في الواجهة العربية.
- للمراجعة
- 04 URL URL
- Uniform Resource Locator
- محدد موقع الموارد الموحد — كثيراً ما يُقسّم في النماذج إلى بادئة ثابتة https:// بجانب حقل لإدخال الاسم المخصص.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ حاوية .input-group-lg تضم بادئة "$" بكلاس .input-group-text وحقل أرقام .form-control ولاحقة ".00" مع عنصر .form-label خارج المجموعة.
-
صمّم مجموعة .input-group تجمع حقل نص مع زر مباشر <button class="btn btn-primary">، ومجموعة ثانية تضم مربع اختيار .form-check-input.mt-0 داخل .input-group-text.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.