如何让UI有bootstrap 4选项卡，在每次点击按钮时都会执行post？

要让UI具有Bootstrap 4选项卡，并在每次点击按钮时执行POST请求，可以按照以下步骤进行操作：

引入Bootstrap 4库：在HTML文件中引入Bootstrap 4的CSS和JavaScript文件，确保正确加载样式和脚本。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

创建选项卡结构：使用Bootstrap的选项卡组件创建选项卡结构。每个选项卡都需要一个唯一的ID和相应的面板内容。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a>
  </li>
  <!-- 添加更多选项卡 -->
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
    <!-- Tab 1 的内容 -->
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
    <!-- Tab 2 的内容 -->
  </div>
  <!-- 添加更多选项卡对应的面板 -->
</div>

添加按钮和事件处理：为每个选项卡添加一个按钮，并使用JavaScript监听按钮的点击事件。在事件处理函数中执行POST请求。

<button class="btn btn-primary" onclick="postData()">执行POST请求</button>

<script>
  function postData() {
    // 执行POST请求的逻辑
    // 可以使用JavaScript的fetch或者jQuery的ajax方法发送POST请求
  }
</script>

编写POST请求逻辑：根据具体需求，使用JavaScript的fetch或者jQuery的ajax方法发送POST请求。根据后端接口的要求，设置请求的URL、请求头、请求体等参数。

function postData() {
  fetch('https://example.com/api/endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      // 请求体数据
    })
  })
  .then(response => response.json())
  .then(data => {
    // 处理POST请求的响应数据
  })
  .catch(error => {
    // 处理POST请求的错误
  });
}

以上是使用Bootstrap 4创建具有选项卡的UI，并在每次点击按钮时执行POST请求的基本步骤。根据具体需求，可以根据Bootstrap的文档和相关资源进一步定制和优化UI效果。