You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

是否有支持Bootstrap 5的Bootstrap Multiselect版本?

支持Bootstrap 5的Bootstrap-multiselect版本说明

目前已存在官方适配Bootstrap 5的Bootstrap-multiselect迭代版本,可直接使用。

该适配版本的核心特性如下:

  • 完全对齐Bootstrap 5的样式规范,兼容Bootstrap 5的颜色、间距等全局变量,不会和Bootstrap 5原生组件产生样式冲突
  • 完整保留了旧版Bootstrap-multiselect的全部核心功能,包括多选、全选/反选、搜索过滤、选项分组、自定义渲染模板等
  • 配置规则和Bootstrap 5的API设计保持统一,支持data-bs-*属性声明式配置

基础使用示例:

<!-- 引入依赖资源 -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-multiselect.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="bootstrap-multiselect.min.js"></script>

<!-- 下拉多选元素 -->
<select id="demo-select" multiple>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<script>
// 初始化组件
$('#demo-select').multiselect({
  includeSelectAllOption: true,
  enableFiltering: true,
  selectAllText: '全选'
});
</script>

注意:不要将适配Bootstrap 5的版本和适配Bootstrap 4的旧版本混用,否则会出现样式错乱、功能失效问题。如果是从Bootstrap 4升级场景,只需替换对应multiselect资源文件,将旧版本中data-*开头的配置属性调整为data-bs-*格式即可正常使用。

内容的提问来源于stack exchange,提问作者Samrat

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.14 01:45:01