• Bootstrap5 下拉菜单

    下拉菜单可以是单选下拉菜单,也可以是多选的下拉菜单。

    单选下拉菜单:

    多选下拉菜单:

    在 Bootstrap5 中下拉菜单 <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 也可以通过 datalist 标签为 <input> 元素设置下拉菜单:

    以下实例从列表中选择一个网站:

    实例

    <label for="browser" class="form-label">选择你喜欢的网站:</label> <input class="form-control" list="sites" name="site" id="site"> <datalist id="sites"> <option value="Google"> <option value="Runoob"> <option value="Taobao"> <option value="Wiki"> <option value="Zhihu"> </datalist>

    尝试一下 »

    效果如下图: