使用Bootstrap做一个提交选择框，选择所有选项后点击按钮提交选择

Bootstrap是一个流行的前端框架，它提供了一套响应式、移动设备优先的前端框架，用于快速开发基于HTML、CSS和JavaScript的用户界面。使用Bootstrap可以很容易地创建一个提交选择框，并且处理用户的选择。以下是一个简单的示例，展示如何使用Bootstrap制作一个提交选择框：

1. 首先，确保你的项目中已经包含了Bootstrap的CSS和JavaScript文件。你可以通过CDN链接来引入它们。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. 接着，创建一个表单，其中包含多个复选框以及一个提交按钮。

<form id="selectionForm">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="option1" id="option1">
    <label class="form-check-label" for="option1">
      选项 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="option2" id="option2">
    <label class="form-check-label" for="option2">
      选项 2
    </label>
  </div>
  <!-- 可以继续添加更多选项 -->
  <button type="button" class="btn btn-primary" onclick="submitSelection()">提交选择</button>
</form>

3. 使用JavaScript来处理点击按钮时的行为。当按钮被点击时，获取所有选中的复选框值，并显示它们。这里使用了一个简单的JavaScript函数来展示这个行为。

<script>
function submitSelection() {
  var selectedValues = [];
  // 获取所有复选框，并检查它们是否被选中
  $('.form-check-input:checked').each(function() {
    selectedValues.push($(this).val());
  });
  // 显示选中的值
  alert("您选择了: " + selectedValues.join(", "));
}
</script>

这样，当用户选择了一些选项并点击提交按钮后，会弹出一个包含所有选中选项值的提示框。