Bootstrap表单组件教程详解

Bootstrap是目前最为流行的前端框架之一，它提供了大量的样式和组件的封装，其中表单组件是网站开发中不可或缺的一部分。本文将为大家详细讲解Bootstrap表单组件的使用方法和常见问题。

基础表单组件

Bootstrap提供了包括输入框、单选框、复选框、下拉框等多种常用表单组件。

输入框

普通输入框

<div class="form-group">
  <label for="name">姓名：</label>
  <input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>

上述代码展示了一个基础的输入框组件，其中form-group用于将组件包裹起来，label为组件添加了一个标签，for属性指向该组件的id，input的type属性用于指向输入框的类型，class为form-control表示该组件为表单控件。

搜索框

<form class="form-inline">
  <div class="form-group mx-sm-3 mb-2">
    <label for="search-input" class="sr-only">搜索：</label>
    <input type="text" class="form-control" id="search-input" placeholder="请输入关键字">
  </div>
  <button type="submit" class="btn btn-primary mb-2">搜索</button>
</form>

上述代码展示了如何创建一个搜索框，其中form-inline用于创建行内表单，mx-sm-3用于添加左右两侧的外边距，按照Bootstrap的规则设置，sm表示在中等屏幕上添加外边距，mb-2表示添加下边距。

单选框和复选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkbox1">
  <label class="form-check-label" for="checkbox1">
    阅读
  </label>
</div>

<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>

上述代码展示了如何创建单选框和复选框，其中form-check用于将整个组件包裹起来，form-check-input用于指定输入框属性，for属性指向组件的id值，label用于添加标签。

下拉框

<div class="form-group">
  <label for="select-tag">选择标签：</label>
  <select class="form-control" id="select-tag">
    <option>HTML</option>
    <option>Javascript</option>
    <option>CSS</option>
  </select>
</div>

上述代码展示了如何构建下拉框组件，其中form-group用于将组件包裹起来，label用于添加标签，select标签用于添加下拉框，option标签用于添加选项。

高级表单组件

输入框组

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

上述代码展示了输入框组的制作，可以在输入框左侧添加一个提示内容。

级联下拉框

<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>
  <select class="form-control" id="city">
    <option>北京市</option>
    <option>上海市</option>
    <option>广州市</option>
    <option>深圳市</option>
  </select>
</div>

上述代码展示了级联下拉框的制作，根据上一级下拉框值的变化，改变下一级下拉框的内容。

微调样式

如果需要更改Bootstrap提供的默认样式，可以使用CSS覆盖样式，例如：

.btn-primary {
  background-color: #f00;
  border: none;
}

以上示例代码将按钮的背景色改为红色，去掉按钮的边框，可以按照需要进行样式微调。

总结

本文详细介绍了Bootstrap表单组件的的制作方法和常见问题，希望能够帮助读者更好地运用Bootstrap框架进行项目开发。

示例1使用了普通输入框和搜索框组件，示例2使用了单选框、复选框和下拉框组件。