Bootstrap 5 選擇
選擇選單
如果想允許使用者從多個選項中進行選擇,則使用選擇選單。
要在 Bootstrap 5 中設定選擇選單的樣式,請向 <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">
<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>
自己動手試一試 »