Bootstrap 5 قائمة الخيارات

قائمة اختيار

اختيار قائمة (اختر عنصرًا واحدًا):

اختيار قائمة (اضغط على Ctrl أو Shift أو استخدم فأرة لسحب لاختيار عدة):

إذا كنت ترغب في السماح للمستخدمين باختيار أكثر من خيار، استخدم قائمة الاختيار.

لإعداد نمط قائمة الاختيار في Bootstrap 5، يرجى استخدام .form-select أضف الفئة إلى عنصر <select>:

مثال

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

جرب بنفسك

حجم قائمة الاختيار

استخدم .form-select-lg أو .form-select-sm استخدام الفئات لتغيير حجم قائمة الاختيار:

مثال

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

جرب بنفسك

اختيار القائمة المحظور

استخدم disabled خصائص اختيار القائمة المحظورة:

مثال

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

جرب بنفسك

قائمة البيانات

Bootstrap يمكنه أيضًا تعيين نمط قائمة البيانات، وهي قائمة خيارات مسبقة مخصصة للاختراع <input>:

يرجى اختيار متصفحك من القائمة:

مثال

<label for="browser" class="form-label">يرجى اختيار متصفحك من القائمة:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

جرب بنفسك