Bootstrap-v5-表单(选择)
一、选择(Select)
- 默认(Default)
- 大小(Sizing)
- 禁用(Disabled)
二、实例
1、默认下拉选项
- form-select
<!-- 默认下拉选项 --> <select class="form-select" aria-label="Default select example"> <option selected>请选择</option> <option value="1">哈尔滨</option> <option value="2">重庆</option> <option value="3">中山</option> </select>
2、下拉选项大小(单选和多选)
- form-select-lg 下拉选项(大号)
- form-select-sm 下拉选项(小号)
<!-- 下拉选项的大小 --> <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select class="form-select form-select-sm" aria-label=".form-select-sm example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <!-- 多选 --> <select class="form-select" multiple aria-label="multiple select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select class="form-select" size="3" aria-label="size 3 select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
3、下拉选项禁用(单选和多选)
- disabled
<!-- 下拉选项禁用 --> <select class="form-select" aria-label="Disabled select example" disabled> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>