Bootstrap如何创建表单

创建表单是Bootstrap中常见的操作之一，下面是创建Bootstrap表单的完整攻略：

1. 导入Bootstrap的CSS和JS文件。

在HTML文件头部添加Bootstrap相关文件的链接，可以从官方网站上下载Bootstrap文件或使用CDN链接。示例：

<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<!-- bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

1. 创建表单结构。

使用HTML代码创建表单，可以使用Bootstrap中的表单样式类，使用<form>标签作为表单的容器。示例：

<form>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

1. 添加表单元素。

可以使用Bootstrap中提供的表单元素样式以及布局类来添加表单元素。示例：

<form>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入姓名">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">接受协议</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在这个示例中，我们添加了一个复选框元素，并使用工具类来实现布局。

1. 创建联动表单。

在Bootstrap中，表单的联动控件非常容易实现，只需要设置关键字即可。在本例中，我们将创建两个联动控件，一个是下拉列表，另一个是文本输入框，当下拉列表中的选项改变时，文本输入框的内容也会相应改变。示例：

<form>
  <div class="form-group">
    <label for="province">省份</label>
    <select class="form-control" id="province">
      <option>江苏</option>
      <option>浙江</option>
      <option>上海</option>
    </select>
  </div>
  <div class="form-group">
    <label for="city">城市</label>
    <input type="text" class="form-control" id="city" readonly>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
  // 下拉列表选项改变时，设置文本输入框内容
  $('#province').on('change', function() {
    $('#city').val($(this).val() + '市');
  });
</script>

在这个示例中，我们使用jQuery事件来监听下拉列表的change事件，并设置文本输入框的值。

完整代码可在本地或在线运行。通过这些示例，相信大家可以快速掌握Bootstrap创建表单的基本操作。