في هذا الدرس 5تصفّح المواضيع
تماماً كما رأينا في حقول النص والأزرار، تتوفر قوائم الاختيار بثلاث درجات ارتفاع قياسية لتصطف في صف شبكي واحد دون أي تفاوت بصري: أضف الكلاس .form-select-lg بجانب .form-select للنماذج البارزة، أو الكلاس .form-select-sm لأشرطة الفرز واختيار عدد الصفوف في الجداول.
<select class="form-select form-select-lg mb-2">
<option selected>Large select (.form-select-lg)</option>
</select>
<select class="form-select mb-2">
<option selected>Default select (.form-select)</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small select (.form-select-sm)</option>
</select>عندما تود السماح للمستخدم بتحديد أكثر من خيار واحد معاً (كاختيار عدة مهارات أو صلاحيات)، أضف السمة المنطقية multiple إلى وسم <select class="form-select">. يتعرف بوتستراب تلقائياً على وجود السمة multiple أو السمة size (عندما تكون قيمتها أكبر من 1)، فيخفي أيقونة السهم المنسدل ويحول القائمة إلى صندوق تمرير مفتوح يعرض عدة خيارات دفعة واحدة.
يمكنك تطبيق السمة disabled على مستويين مختلفين حسب حاجة الواجهة: إما وضعها على وسم <select> الأب لتعطيل القائمة بالكامل ومنحها خلفية رمادية غير قابلة للنقر، وإما وضعها على وسم <option selected disabled value=""> الأول لصنع خيار ترحيبي إرشادي («اختر الدولة...») يراه المستخدم في البداية لكنه لا يستطيع إعادة اختياره كقيمة فعلية.
قارن الحالات الأربع مباشرة في المختبر التفاعلي التالي:
لكي تجتاز قوائم الاختيار معايير إمكانية الوصول العالمية، يجب أن ترتبط كل قائمة اختيار باسم دلالي واضح: ففي النماذج العادية نربطها بعنصر <label class="form-label"> مرئي عبر السمتين for وid، أما في أشرطة الفرز المدمجة التي يغيب عنها نص التسمية المرئي فنضيف السمة aria-label مباشرة إلى وسم <select>.
كما يمكنك تنظيم القوائم الطويلة منطقياً باستخدام وسم التجميع القياسي <optgroup label="..."> الذي يحافظ على تنسيقه النظيف داخل .form-select ويسهّل على قارئات الشاشة إعلان اسم المجموعة الفرعية قبل كل خيار.
<label for="db" class="form-label">Database Engine</label>
<select class="form-select" id="db">
<optgroup label="Relational SQL">
<option value="mysql">MySQL 8</option>
<option value="pgsql">PostgreSQL 16</option>
</optgroup>
<optgroup label="Document & Cache">
<option value="redis">Redis</option>
</optgroup>
</select>يستعرض الجدول المرجعي التالي كافة كلاسات وسمات قوائم الاختيار في Bootstrap 5.3:
| الكلاس أو السمة | موضع الاستخدام | الأثر البصري والوظيفي |
|---|---|---|
.form-select | عنصر <select> | توحيد إطار القائمة وحشوها وإضافة سهم SVG متكيف مع اتجاه الصفحة |
.form-select-lg | عنصر <select> | تكبير حجم الخط والارتفاع ليطابق حقول .form-control-lg |
.form-select-sm | عنصر <select> | تصغير أبعاد القائمة لأشرطة التصفية والجداول المضغوطة |
multiple | عنصر <select> | تفعيل تحديد عدة خيارات معاً وإخفاء سهم القائمة المنسدلة تلقائياً |
size="N" | عنصر <select> | عرض عدد N من السطور المرئية المفتوحة داخل صندوق التمرير |
disabled | <select> أو <option> | تعطيل القائمة كاملة أو منع إعادة اختيار خيار الإرشاد الافتراضي الأول |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس توحيد مظهر قوائم الاختيار عبر كلاس .form-select بديلاً عن الكلاسات القديمة، وضبط أحجامها، وتفعيل الاختيار المتعدد والصفوف المرئية، وإدارة التعطيل الكلي والجزئي والتسميات الدلالية مع مجموعات <optgroup>. الخطوة التالية: انتقل الآن إلى درس «مربعات الاختيار والمفاتيح في بوتستراب 5» لبناء خيارات التحديد وأزرار الراديو والمفاتيح المنزلقة العصرية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Form Select Class كلاس قائمة الاختيار
- الكلاس القياسي في بوتستراب 5 لتوحيد مظهر عنصر <select> عبر المتصفحات وإضافة سهم متجهي متناسق.
- للمراجعة
- 02 Option Group مجموعة الخيارات الدلالية
- وسم HTML قياسي يُستخدم داخل <select> لتصنيف الخيارات المتقاربة تحت عنوان فرعي واضح.
- للمراجعة
- 03 Placeholder Prompt Option خيار الإرشاد التمهيدي
- الخيار الأول المزود بسمتَي selected وdisabled وقيمة فارغة لحث المستخدم على اختيار قيمة فعلية.
- للمراجعة
- 04 Multi-Select List Box صندوق الاختيار المتعدد
- قائمة اختيار تحمل سمة multiple فتعرض عدة صفوف مفتوحة بدون سهم منسدل لتحديد أكثر من عنصر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SVG SVG
- Scalable Vector Graphics
- الرسوميات المتجهية القابلة للتحجيم — تُستخدم كصورة خلفية متجهية مدمجة داخل كلاس .form-select لرسم سهم حاد الوضوح على جميع الشاشات.
- للمراجعة
- 02 OS OS
- Operating System
- نظام التشغيل — يتولى رسم نافذة الخيارات المفتوحة بواجهته الأصلية لضمان أفضل استجابة للمس على الهواتف والحواسيب.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- الاتجاه من اليمين إلى اليسار — ينقل سهم القائمة المنسدلة إلى الطرف الأيسر تلقائياً في النسخة العربية لملف بوتستراب.
- للمراجعة
- 04 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات إتاحة محتوى الويب — توجب تزويد كل عنصر <select> بتسمية <label> مرتبطة أو سمة aria-label واضحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
اربط عنصر .form-label بقائمة <select class="form-select"> يبدأ خيارها الأول بالسمات value="" وselected وdisabled تليه ثلاثة خيارات دول صالحة.
-
أنشئ قائمة .form-select مقسمة بمجموعتَي <optgroup>، وقائمة ثانية مصغرة .form-select-sm مزودة بسمتَي multiple وsize="4".
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.