在 Bootstrap 4 中，表单控件（Form Controls）是用于创建各种输入元素的样式的组件。以下是一个包含不同类型表单控件的简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <title>Bootstrap 4 表单控件</title>
</head>
<body>

<div class="container mt-4">
  <h2>表单控件示例</h2>

  <form>
    <!-- 文本输入框 -->
    <div class="form-group">
      <label for="exampleInputText">文本输入</label>
      <input type="text" class="form-control" id="exampleInputText" placeholder="输入文本">
    </div>

    <!-- 密码输入框 -->
    <div class="form-group">
      <label for="exampleInputPassword">密码输入</label>
      <input type="password" class="form-control" id="exampleInputPassword" placeholder="输入密码">
    </div>

    <!-- 单选按钮 -->
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option1" checked>
      <label class="form-check-label" for="exampleRadio1">单选项 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio2" value="option2">
      <label class="form-check-label" for="exampleRadio2">单选项 2</label>
    </div>

    <!-- 多选框 -->
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">多选框 1</label>
    </div>

    <!-- 下拉选择框 -->
    <div class="form-group">
      <label for="exampleFormControlSelect1">选择框</label>
      <select class="form-control" id="exampleFormControlSelect1">
        <option>选项 1</option>
        <option>选项 2</option>
        <option>选项 3</option>
      </select>
    </div>

    <!-- 文本域 -->
    <div class="form-group">
      <label for="exampleFormControlTextarea1">文本域</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="输入文本"></textarea>
    </div>

    <!-- 按钮 -->
    <button type="submit" class="btn btn-primary">提交</button>
  </form>

</div>

<!-- Bootstrap JavaScript 和 jQuery（可选）-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用了不同的 Bootstrap 类来创建文本输入框、密码输入框、单选按钮、多选框、下拉选择框、文本域以及提交按钮。你可以根据实际需求添加更多的表单元素，并使用其他 Bootstrap 类进行样式定制。这只是一个简单的示例，你可以根据需要进行更多的调整。


转载请注明出处：http://www.zyzy.cn/article/detail/5501/Bootstrap