Bootstrap — منوی انتخاب (Select Menus)

آخرین بروزرسانی: 1404/08/20

قبلی: فرم ها (Forms) بعدی: چک باکس و رادیو (Checks and Radios)

منوی انتخاب (Select Menus)

منوی انتخاب (Select Menu) یک فهرست بازشدنی است. کاربر یکی یا چند گزینه را برمی دارد. در بوت استرپ، کلاس .form-select ظاهر مرتب می دهد. همین را مبنا می گیریم و مرحله ای پیش می رویم.

منوی انتخاب بوت استرپ: پایه

برای استایل دهی، کافی است به تگ <select> کلاس .form-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">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select class="form-select form-select-sm">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

مشاهده در ادیتور

غیرفعال کردن منوی انتخاب

اگر نباید قابل تعامل باشد، ویژگی disabled را اضافه کن. مثل قفل موقت.

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

مشاهده در ادیتور

داده لیست (Data List)

داده لیست فهرست پیشنهادها برای <input> است. کاربر تایپ می کند و گزینه ها پیشنهاد می شوند.

<label for="browser" class="form-label">Choose your browser from the list:</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>

مشاهده در ادیتور