是否有支持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
相关产品推荐
相关产品推荐

