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>
自己动手试一试 »