Bootstrap-Select 组件使用教程：从基础到高级功能详解

Bootstrap-Select 组件使用教程：从基础到高级功能详解

bootstrap-select :rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-select

一、基础用法

1.1 标准选择框

Bootstrap-Select 的核心功能是将原生 HTML select 元素转换为更美观的 Bootstrap 风格下拉框。只需为 select 元素添加 selectpicker 类即可实现转换：

<!-- 转换前 -->
<select>
  <option>番茄酱</option>
  <option>芥末酱</option>
</select>

<!-- 转换后 -->
<select class="selectpicker">
  <option>番茄酱</option>
  <option>芥末酱</option>
</select>

1.2 分组选择框

对于需要分类的选项，可以使用 optgroup 元素创建分组：

<select class="selectpicker">
  <optgroup label="调味品">
    <option>番茄酱</option>
    <option>芥末酱</option>
  </optgroup>
  <optgroup label="野营用品">
    <option>帐篷</option>
    <option>手电筒</option>
  </optgroup>
</select>

1.3 多选功能

通过添加 multiple 属性可以实现多选功能：

<select class="selectpicker" multiple>
  <option>番茄酱</option>
  <option>芥末酱</option>
  <option>蛋黄酱</option>
</select>

二、搜索功能

2.1 实时搜索

添加 data-live-search="true" 属性可启用搜索框：

<select class="selectpicker" data-live-search="true">
  <option>热狗套餐</option>
  <option>汉堡套餐</option>
</select>

2.2 关键词搜索

使用 data-tokens 属性可以为选项添加搜索关键词：

<select class="selectpicker" data-live-search="true">
  <option data-tokens="番茄 芥末">热狗套餐</option>
  <option data-tokens="汉堡 薯条">汉堡套餐</option>
</select>

三、选择限制

3.1 限制选择数量

通过 data-max-options 属性可以限制最多可选数量：

<!-- 整体限制 -->
<select class="selectpicker" multiple data-max-options="2">
  <option>番茄酱</option>
  <option>芥末酱</option>
</select>

<!-- 分组限制 -->
<select class="selectpicker" multiple>
  <optgroup label="调味品" data-max-options="1">
    <option>番茄酱</option>
    <option>芥末酱</option>
  </optgroup>
</select>

四、按钮文本定制

4.1 占位文本

使用 title 属性设置未选择时的提示文本：

<select class="selectpicker" title="请选择...">
  <option>番茄酱</option>
  <option>芥末酱</option>
</select>

4.2 选项别名

为选项设置 title 属性可以显示替代文本：

<select class="selectpicker">
  <option title="套餐1">热狗套餐</option>
  <option title="套餐2">汉堡套餐</option>
</select>

4.3 多选显示格式

通过 data-selected-text-format 控制多选时的显示格式：

<!-- 显示数量 -->
<select class="selectpicker" multiple data-selected-text-format="count">
  <option>番茄酱</option>
  <option>芥末酱</option>
</select>

<!-- 超过3个显示数量 -->
<select class="selectpicker" multiple data-selected-text-format="count > 3">
  <option>番茄酱</option>
  <option>芥末酱</option>
</select>

五、样式定制

5.1 按钮样式

使用 data-style 设置按钮样式：

<select class="selectpicker" data-style="btn-primary">
  <option>番茄酱</option>
</select>

5.2 选中标记

添加 show-tick 类显示选中标记：

<select class="selectpicker show-tick">
  <option>番茄酱</option>
</select>

5.3 选项样式

可以直接为选项添加样式：

<select class="selectpicker">
  <option style="background: red;">番茄酱</option>
</select>

六、宽度控制

6.1 网格布局

结合 Bootstrap 网格系统控制宽度：

<div class="row">
  <div class="col-sm-4">
    <select class="selectpicker">
      <option>番茄酱</option>
    </select>
  </div>
</div>

6.2 精确控制

使用 data-width 属性精确控制宽度：

<!-- 自动宽度 -->
<select class="selectpicker" data-width="auto">
  <option>超长的选项文本...</option>
</select>

<!-- 固定宽度 -->
<select class="selectpicker" data-width="200px">
  <option>选项</option>
</select>

七、高级定制

7.1 添加图标

使用 data-icon 为选项添加图标：

<select class="selectpicker">
  <option data-icon="fa-heart">番茄酱</option>
</select>

7.2 自定义内容

通过 data-content 插入自定义HTML：

<select class="selectpicker">
  <option data-content="<span class='badge badge-danger'>番茄酱</span>">
    番茄酱
  </option>
</select>

7.3 副文本

使用 data-subtext 添加副文本：

<select class="selectpicker" data-show-subtext="true">
  <option data-subtext="亨氏">番茄酱</option>
</select>

通过以上功能，Bootstrap-Select 组件可以满足各种复杂的选择需求，同时保持美观的用户界面。开发者可以根据实际项目需求组合使用这些特性，创建出功能丰富、用户体验良好的选择控件。

bootstrap-select :rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-select