bootstrap做筛子代码

Bootstrap可以轻松地创建筛选器或者下拉菜单，通常用于显示数据列表时提供用户交互。下面是一个简单的例子，展示如何使用Bootstrap的DataTables插件来实现基本的筛选功能：

<!-- 引入Bootstrap和DataTables库 -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>

<!-- 示例表格 -->
<table id="exampleDataTable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <!-- 列标题 -->
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <!-- 添加筛选按钮 -->
            <th data-toggle="dropdown">筛选</th>
        </tr>
    </thead>
    <tbody>
        <!-- 表格内容 -->
    </tbody>
</table>

<!-- JavaScript初始化DataTables并添加筛选功能 -->
<script>
$(document).ready(function() {
    $('#exampleDataTable').DataTable({
        // 初始化配置
        columnDefs: [
            { type: 'search', targets: [3] } // 只对最后一列添加筛选功能
        ]
    });
});
</script>

在这个例子中，当用户点击“筛选”列时，会出现一个下拉菜单，允许他们输入文本进行搜索，只显示包含指定文字的数据行。