如何使用Bootstrap 4按钮实现卡片分组分类筛选功能

步骤1：Flask模板渲染卡片时添加分类标识 #

在Jinja2渲染卡片的循环逻辑中，给所有卡片添加统一的类名filter-card，同时通过data-category属性标记卡片所属分类，保证属性值和后续按钮的筛选值对应即可：

<div class="row">
  {% for card in card_list %}
  <!-- 每个卡片绑定所属分类 -->
  <div class="col-md-3 filter-card" data-category="{{ card.category }}">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{ card.title }}</h5>
        <p class="card-text">{{ card.content }}</p>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

步骤2：编写分类筛选按钮组 #

使用Bootstrap 4自带的按钮组组件，给每个按钮添加filter-btn类绑定事件，同时通过data-filter属性标记按钮对应的筛选分类：

<div class="btn-group mb-4" role="group">
  <button type="button" class="btn btn-outline-primary filter-btn" data-filter="category1">分类1</button>
  <button type="button" class="btn btn-outline-primary filter-btn" data-filter="category2">分类2</button>
  <button type="button" class="btn btn-outline-primary filter-btn" data-filter="category3">分类3</button>
  <button type="button" class="btn btn-outline-primary filter-btn" data-filter="category4">分类4</button>
  <button type="button" class="btn btn-outline-primary filter-btn" data-filter="category5">分类5</button>
  <!-- 可选全选按钮，默认激活展示所有卡片 -->
  <button type="button" class="btn btn-primary filter-btn active" data-filter="all">全部</button>
</div>

步骤3：添加筛选逻辑JS #

因为Bootstrap 4默认依赖jQuery，直接基于jQuery实现筛选逻辑即可，原生支持多分类组合筛选：

$(function() {
  // 绑定按钮点击事件
  $('.filter-btn').click(function() {
    // 切换当前按钮的激活状态
    $(this).toggleClass('active');

    // 点击全选按钮时，取消其他按钮的激活状态
    if ($(this).data('filter') === 'all') {
      $('.filter-btn').not(this).removeClass('active');
      $(this).addClass('active');
    } else {
      // 点击分类按钮时，取消全选按钮的激活状态
      $('.filter-btn[data-filter="all"]').removeClass('active');
      // 如果所有分类按钮都取消激活，自动激活全选按钮
      if ($('.filter-btn.active').length === 0) {
        $('.filter-btn[data-filter="all"]').addClass('active');
      }
    }

    // 收集所有已激活按钮的筛选值
    let activeFilters = $('.filter-btn.active').map(function() {
      return $(this).data('filter');
    }).get();

    // 匹配卡片分类执行显示/隐藏逻辑
    $('.filter-card').each(function() {
      let cardCate = $(this).data('category');
      if (activeFilters.includes('all') || activeFilters.includes(cardCate)) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});

适配说明 #

• 你可以直接替换示例中的category1~category5为你实际的分类标识，只要保证按钮的data-filter和卡片的data-category取值一致即可
• 当前逻辑默认支持多分类同时选中，点击多个分类按钮就会展示所有选中分类下的卡片，符合你要求的分类组合筛选需求
• 不需要引入额外第三方插件，完全匹配Bootstrap 4 + Flask的技术栈

内容的提问来源于stack exchange，提问作者Adrian