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>