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

开发ASP.Net Core MVC应用,当前应选用哪个Bootstrap版本?

不需要退回到Bootstrap 4.x,Bootstrap 5完全能实现带复选框的下拉菜单

首先明确:你完全没必要退回到Bootstrap 4.x版本。Bootstrap 5移除jQuery依赖、优化了组件性能,长期维护性更好,带复选框的下拉菜单可以通过它的基础组件组合实现,官方没单独给示例是因为这类场景属于基础组件的灵活搭配,下面直接给你可复用的实现方案:

带复选框的下拉菜单实现代码

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCheckboxBtn" data-bs-toggle="dropdown" aria-expanded="false">
    带复选框的下拉菜单
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownCheckboxBtn">
    <li class="px-3 py-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checkbox1">
        <label class="form-check-label" for="checkbox1">
          选项1
        </label>
      </div>
    </li>
    <li class="px-3 py-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checkbox2">
        <label class="form-check-label" for="checkbox2">
          选项2
        </label>
      </div>
    </li>
    <li><hr class="dropdown-divider"></li>
    <li class="px-3 py-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checkbox3">
        <label class="form-check-label" for="checkbox3">
          选项3(分隔后)
        </label>
      </div>
    </li>
  </ul>
</div>

<!-- 必须引入Bootstrap的bundle版本,包含Popper.js -->
<script src="bootstrap.bundle.min.js"></script>

关键注意事项

  • 确保只引入bootstrap.bundle.min.js,不要同时引入jQuery——Bootstrap 5的所有交互逻辑已经内置在bundle里,引入jQuery会导致Dropdown等组件冲突失效,这也是你之前基础Dropdown不工作的核心原因。
  • 如果需要收集选中的复选框值,只需要写简单的原生JS即可,比如:
// 监听复选框变化,收集选中值
document.querySelectorAll('.dropdown-menu .form-check-input').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const selectedValues = Array.from(document.querySelectorAll('.dropdown-menu .form-check-input:checked'))
      .map(el => el.nextElementSibling.textContent.trim());
    console.log('选中的选项:', selectedValues);
    // 这里可以把选中值更新到按钮文本等操作
  });
});

为什么官方没提供现成示例?

Bootstrap 5的设计思路是提供基础组件,让开发者自由组合适配场景。带复选框的下拉菜单本质是「Dropdown组件」+「Form Check组件」的组合,官方不需要单独做示例,你可以基于这个思路扩展更多自定义样式(比如给选中项加高亮)。

内容的提问来源于stack exchange,提问作者Rob K.

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.17 09:52:13