Bootstrap 5 选择 - HTML

简介

Bootstrap 5 是一个流行的前端框架，可以用来快速轻松地构建响应式网站、Web 应用和移动应用等。Bootstrap 5 提供了一个简单易用的 CSS 框架，以及一系列 UI 组件和 JavaScript 插件，可以帮助开发者们快速创建美观、功能强大的网页。

本文将介绍 Bootstrap 5 中的选择组件（Select），并给出一些常见的用法示例和代码片段。

选择组件

通过选择组件（Select），用户可以从多个选项中选择一个或多个值。Bootstrap 5 的选择组件提供了多种样式和功能，包括单选、多选、禁用选项、搜索框、分组等功能。

基本用法

使用 select 标签创建一个基本的选择组件。通过在 option 标签中指定不同的值，创建不同的选项。如下所示：

<select>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

带标签和样式的选择组件

使用 label 标签为选择组件加标签，在标签中可以描述选择组件的用途。同时，我们还可以使用内置的 Bootstrap 样式美化选择组件，如下所示：

<label for="example-select">请选择:</label>

<select id="example-select" class="form-select" aria-label="Example select">
  <option selected>开心</option>
  <option>难过</option>
  <option>愤怒</option>
</select>

带搜索框的选择组件

使用 data-live-search="true" 属性可以为选择组件添加搜索框，用户可以在搜索框中输入关键字进行筛选。需要先导入 bootstrap-select.css 和 bootstrap-select.js，如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/js/bootstrap-select.min.js"></script>

<label for="example-select2">请选择:</label>

<select id="example-select2" class="selectpicker" data-live-search="true" title="请选择...">
  <option>选项 1</option>
  <option>选项 2</option>
  <option>选项 3</option>
  <option>选项 4</option>
  <option>选项 5</option>
  <option>选项 6</option>
  <option>选项 7</option>
  <option>选项 8</option>
  <option>选项 9</option>
  <option>选项 10</option>
</select>

多选选择组件

使用 multiple 属性可以创建一个多选选择组件。需要注意，多选选择组件的值是一个数组，而不是一个单独的选项值，如下所示：

<label for="example-select3">请选择:</label>

<select id ="example-select3" class="form-select" multiple>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

分组选择组件

使用 optgroup 标签可以将多个选项分组，使选择组件更加清晰明了。如下所示：

<label for="example-select4">请选择:</label>

<select id="example-select4" class="form-select">
  <optgroup label="分组 1">
    <option value="option1">选项 1</option>
    <option value="option2">选项 2</option>
  </optgroup>
  <optgroup label="分组 2">
    <option value="option3">选项 3</option>
    <option value="option4">选项 4</option>
  </optgroup>
</select>

总结

通过本文的介绍，我们了解了 Bootstrap 5 中的选择组件（Select）的基本用法和常见示例，包括基本选择组件、带标签和样式的选择组件、带搜索框的选择组件、多选选择组件和分组选择组件。在实际的项目中，选择组件是非常常用的 UI 组件，希望本文对您有所帮助。