Bootstrap 5 选择菜单

Bootstrap 5 选择菜单在表单中显示一组备选项或信息。 我们可以为用户交互选择一个或多个选项。

选择菜单是使用 Bootstrap 5 中的 <select> 元素创建的下拉列表。 <select> 元素最常用于收集表单中的用户输入。 表单提交后，name 属性必须引用表单数据。

语法

基本的 bootstrap 5 选择菜单语法如下所示。 我们可以在表单中使用带有“form-select”类的 <select> 标签。 <option> 标签提供多个值供表单元素选择。

基本 bootstrap 5 多值选择菜单的语法如下所示。 "multiple" 关键字在一个元素中显示多个值。

示例

以下示例向我们展示了如何使用 bootstrap 5 类在表单中创建一个选择菜单。

• 在“用户名”元素中，我们可以在 <select> 标签中使用“form-select”类。 我们可以在下拉列表中看到 Bootstrap 版本以进行数据选择。
• 在“管理员姓名”元素中，我们使用“multiple”关键字来显示所有值。

输出

输出显示使用 bootstrap 5 类和元素的选择菜单，位于图像下方。

Bootstrap 5 选择菜单大小

Bootstrap 5 版本使用带有所需大小的“form-select”类。 我们可以将选择标签的大、中和小尺寸应用于选择菜单类。 “form-select”类使用元素的默认大小或中等大小。 “form-select-lg”和“form-select-sm”类分别应用于元素的大和小尺寸。

语法

bootstrap 5 大尺寸表单选择菜单的语法如下所示。

bootstrap 5 中等或默认大小表单选择菜单的语法如下所示。

bootstrap 5 小尺寸表单选择菜单的语法如下所示。

示例

以下示例向我们展示了如何使用 bootstrap 5 类在表单中创建一个选择菜单。 我们可以在“select”元素中使用“form-select”类。 每个值都放置一个单独的“option”标签。

• 第一个元素使用大表单控件类，即“form-select-lg”类。
• 第二个元素使用默认大小的表单控件类，即“form-select”类。
• 第三个元素使用小尺寸的表单控件类，即“form-select-sm”类。

输出

输出显示使用 bootstrap 5 类和元素的带有大小的选择菜单，位于图像下方。

Bootstrap 5 禁用选择菜单

Bootstrap 5 使用带有 form-select 类的“disabled”元素。 disabled 关键字用于显示数据或禁用选择菜单功能。

语法

基本的 bootstrap 5 选择菜单语法如下所示。 我们可以在表单中使用带有“form-select”类的 <select> 标签。 <option> 标签提供多个值供表单元素选择。

示例

以下示例向我们展示了如何使用 bootstrap 5 类在表单中创建选择菜单。

在“用户名”和“管理员姓名”元素中，我们可以在 <select> 标签中使用“form-select”类。 select 标签包含用于单个或多个数据值的“disabled”关键字。

输出

输出显示使用 bootstrap 5 类和元素的选择菜单，位于图像下方。

结论

bootstrap 5 选择菜单在最小空间内包含多个数据。 我们可以根据要求选择单个或多个值。 它是表单的用户交互功能，用于在下拉列表中选择数据。 选择菜单使用 bootstrap 5 版本的类和元素在网页中创建表单功能。