Bootstrap4 表单控件学习笔记

Bootstrap是一种流行的前端框架，它提供了大量的UI组件和工具类，以简化Web开发。

在Bootstrap中，表单控件是使用最频繁的UI组件之一。Bootstrap提供了多种样式和类型的表单控件，以适应各种需求。

基本表单控件

文本框

文本框是最常用的表单控件之一。在Bootstrap中，可以通过添加.form-control类来将一个<input>元素转换为文本框：

htmlCopy Code
<form>
  <div class="form-group">
    <label for="exampleInput">用户名</label>
    <input type="text" class="form-control" id="exampleInput" placeholder="Enter username">
  </div>
</form>

密码框

密码框是一种特殊的文本框，用于输入敏感信息。在Bootstrap中，可以使用type="password"来创建密码框：

htmlCopy Code
<form>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
</form>

下拉菜单

下拉菜单是一种用于选择选项的表单控件。在Bootstrap中，可以使用<select>元素和一些额外的类来创建下拉菜单：

htmlCopy Code
<form>
  <div class="form-group">
    <label for="exampleFormControlSelect1">选择城市</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
    </select>
  </div>
</form>

高级表单控件

多选框

多选框用于让用户从多个选项中选择一个或多个选项。在Bootstrap中，可以使用<input type="checkbox">元素和一些额外的类来创建多选框：

htmlCopy Code
<form>
  <div class="form-group">
    <label>喜欢的电影类型</label>
    <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="checkbox" value="" id="defaultCheck2">
      <label class="form-check-label" for="defaultCheck2">
        喜剧片
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
      <label class="form-check-label" for="defaultCheck3">
        爱情片
      </label>
    </div>
  </div>
</form>

单选框

单选框用于让用户从多个选项中选择一个选项。在Bootstrap中，可以使用<input type="radio">元素和一些额外的类来创建单选框：

htmlCopy Code
<form>
  <div class="form-group">
    <label>性别</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="male" value="male">
      <label class="form-check-label" for="male">
        男
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="female" value="female">
      <label class="form-check-label" for="female">
        女
      </label>
    </div>
  </div>
</form>

开关按钮

开关按钮用于表示两种状态之间的切换。在Bootstrap中，可以使用<input type="checkbox">元素和.switch类来创建开关按钮：

htmlCopy Code
<form>
  <div class="form-group">
    <label for="toggleButton">开关按钮</label>
    <div class="switch">
      <input type="checkbox" id="toggleButton">
      <label for="toggleButton"></label>
    </div>
  </div>
</form>

结论

Bootstrap提供了丰富的表单控件，可以满足各种需求。上面的示例演示了如何使用基本和高级表单控件来创建一个表单。开发人员可以根据自己的需求来选择适当的表单控件，并使用它们来构建漂亮的用户界面。