bootstrap实现后台数据的删除

Bootstrap是一个前端框架，主要用于快速构建响应式网站和Web应用程序。要实现后台数据的删除，您需要使用Bootstrap的表格组件和模态框组件。

以下是一个基本的删除示例：

1. 创建一个表格来显示要删除的数据。

<table class="table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>产品1</td>
      <td>
        <button class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>产品2</td>
      <td>
        <button class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
      </td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

2. 创建一个模态框来提示用户是否要删除数据。

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">确认删除</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        确定要删除此数据吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger">删除</button>
      </div>
    </div>
  </div>
</div>

3. 使用JavaScript来处理删除操作。当用户点击“删除”按钮时，模态框将显示，并在单击“删除”按钮时触发JavaScript函数来删除数据。

$(document).ready(function() {
  $('#deleteModal').on('show.bs.modal', function(e) {
    var deleteBtn = $(e.relatedTarget);
    var productId = deleteBtn.closest('tr').find('td:first').text();
    var modal = $(this);
    modal.find('.modal-body').text('确定要删除产品' + productId + '吗？');
    modal.find('.btn-danger').click(function() {
      // 这里写删除数据的代码
      modal.modal('hide');
    });
  });
});

这是一个简单的示例。您可以根据您的需求进行调整和扩展。