Bootstrap 5 选择
选择菜单
如果您希望允许用户从多个选项中进行选择,可以使用选择菜单。
要在 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>
亲自试一试 »