使用 Bootstrap 类使您的表单输入看起来更好

Bootstrap 是一个流行的前端框架，它包含了许多有用的类和组件，能够帮助程序员快速构建漂亮的网页。其中一个非常有用的功能是表单输入的美化。通过使用 Bootstrap 类，您可以使表单输入看起来更加现代和专业。下面是一些示例：

文本框

<div class="form-group">
  <label for="exampleInput">标签</label>
  <input type="text" class="form-control" id="exampleInput" placeholder="占位符">
</div>

在上面的示例中，form-group 类用于包装标签和文本框。form-control 类将文本框设置为全宽，并添加边框和阴影。如果您想要一个带有预置文本的文本框，可以像下面这样添加一个 placeholder 属性。

选择框

<div class="form-group">
  <label for="exampleSelect">标签</label>
  <select class="form-control" id="exampleSelect">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
</div>

在这个示例中，form-group 和 form-control 类用于包装选择框。您可以使用 option 元素添加选项，每个选项有一个文本标签和一个值。

多选框和单选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    多选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    单选框 1
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    单选框 2
  </label>
</div>

在这些示例中，form-check 类用于包装多选框和单选框的标签和输入。form-check-input 类设置输入的宽度和高度，并添加了一个边框和阴影。您可以通过添加 checked 属性来预先选中单选框。

这只是 Bootstrap 表单类的一小部分，但它们可以使您的表单输入看起来更现代和专业。使用它们时，请确保阅读 Bootstrap 文档，以便了解如何正确地使用它们。