Bootstrap table 自动切换表格视图与卡片视图的例子

Bootstrap Table 提供了一种动态转换表格视图（Table View）到卡片视图（Card View）的功能，这通过 `bootstrap-table-card-view` 插件实现。下面是一个基本的例子：

首先，在HTML中引入Bootstrap和相关的插件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table-card-view/dist/cardView.min.js"></script>

然后，你可以初始化一个Bootstrap Table，并添加切换视图的按钮：

<button id="toggleView">切换视图</button>

<table id="myTable" data-toggle="card-view" data-card-view-url="/api/cards">
    <thead>
        <tr>
            <th data-field="name">姓名</th>
            <th data-field="age">年龄</th>
        </tr>
    </thead>
</table>

JavaScript部分用于监听按钮点击事件，触发视图切换：

$(document).ready(function () {
    $('#myTable').bootstrapTable();
    $('#toggleView').click(function () {
        $('#myTable').bootstrapTable('toggleView');
    });
});

上述代码中，`data-toggle="card-view"`设置了表格默认为卡视图模式，`data-card-view-url`指定从服务器获取卡片数据的URL。当点击“切换视图”按钮时，`bootstrapTable('toggleView')`会让表格在表格视图和卡视图之间切换。

注意：实际应用中你需要替换`/api/cards`为你的API接口地址，同时确保后端返回的数据格式适合于卡片视图显示。