شرح صفوف ومحتوى الفقرة
تبرع التسميات العائمة بشكل خاص عند وضعها داخل صفوف الشبكة المتراصة مثل <div class="row g-2">؛ فبما أن التسمية محتواة داخل ارتفاع الصندوق نفسه (3.5rem افتراضياً) في كل من الحقل النصي وقائمة الاختيار، يصطف العمودان أفقياً كشريط أنيق متساوي الارتفاع دون أي إزاحة رأسية.
<div class="input-group mb-2">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="uName"
placeholder="Username">
<label for="uName">Username</label>
</div>
</div>يلخص الجدول المرجعي التالي قواعد ومتطلبات التسميات العائمة في Bootstrap 5.3:
| العنصر أو الشرط | طريقة الكتابة الصحيحة | سبب الإلزام أو السلوك الناتج |
|---|---|---|
.form-floating | الحاوية الأب المباشرة | ضبط الموضع النسبي والارتفاع الموحد (3.5rem) للحقل وتسميته |
| ترتيب الوسوم | الحقل أولاً ثم <label> بعده | تمكين محدد الأخ في CSS من تحريك التسمية عند التركيز أو الامتلاء |
سمة placeholder | إلزامية على input وtextarea | تفعيل الكاشف :not(:placeholder-shown) لمعرفة وجود نص مكتوب |
ارتفاع <textarea> | عبر style="height: ..." وليس rows | لأن قواعد ارتفاع .form-floating تتجاهل سمة عدد الأسطر التقليدية |
قائمة .form-select | قائمة مفردة بدون multiple أو size | تستقر التسمية علوياً بشكل دائم فوق الخيار النشط |
الدمج مع .input-group | وضع .form-floating كابن داخل المجموعة | إلحاق بادئات أو أزرار مع بقاء التسمية العائمة فاعلة داخل الحقل |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس آلية عمل التسميات العائمة .form-floating بلغة CSS الخالصة، وقاعدة ترتيب الحقل قبل التسمية مع سمة placeholder الإلزامية، وضبط ارتفاع مربعات النص، وتنسيق قوائم الاختيار ومجموعات الإدخال والشبكة. الخطوة التالية: انتقل الآن إلى درس «تخطيط وتوزيع النماذج في بوتستراب 5» لبناء النماذج الشبكية المتعددة الأعمدة والنماذج الأفقية والسطرية.