Bootstrap表单示例代码分享

1. Bootstrap表单介绍

Bootstrap是目前非常流行的前端开发框架，其能够快速构建响应式、移动设备优先的Web项目。表单是Web开发中非常常见的组件，Bootstrap也提供了丰富的表单组件样式和交互效果，大大简化了表单的开发难度。

Bootstrap表单组件主要有以下几种：

表单控件：用于接受用户输入的表单元素，如文本框、文本区域、下拉框等。
表单布局：用于控制表单元素的排布方式，如垂直布局、水平布局、等宽布局等。
表单验证：用于验证用户输入的内容是否符合要求，如必填项、邮箱格式、密码格式等。

2. Bootstrap表单控件示例

2.1 文本框

文本框是最常用的表单控件，Bootstrap提供了多种样式。

<input type="text" class="form-control" placeholder="请输入文字">

2.2 下拉框

下拉框可以选择一个或多个选项，Bootstrap也提供了多种样式。

<select class="form-control">
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>

3. Bootstrap表单布局示例

3.1 垂直布局

默认情况下，Bootstrap表单采用垂直布局，表单控件会依次竖直排列。

<form>
  <div class="form-group">
    <label for="text">文本框</label>
    <input type="text" class="form-control" id="text">
  </div>
  <div class="form-group">
    <label for="select">下拉框</label>
    <select class="form-control" id="select">
      <option>选项一</option>
      <option>选项二</option>
      <option>选项三</option>
    </select>
  </div>
</form>

3.2 水平布局

如果需要水平排列表单控件，可以添加form-horizontal样式。

<form class="form-horizontal">
  <div class="form-group">
    <label for="text" class="col-sm-2 control-label">文本框</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="text">
    </div>
  </div>
  <div class="form-group">
    <label for="select" class="col-sm-2 control-label">下拉框</label>
    <div class="col-sm-10">
      <select class="form-control" id="select">
        <option>选项一</option>
        <option>选项二</option>
        <option>选项三</option>
      </select>
    </div>
  </div>
</form>

3.3 等宽布局

如果需要让所有表单控件等宽，可以添加form-inline样式。

<form class="form-inline">
  <div class="form-group">
    <label for="text">文本框</label>
    <input type="text" class="form-control" id="text">
  </div>
  <div class="form-group">
    <label for="select">下拉框</label>
    <select class="form-control" id="select">
      <option>选项一</option>
      <option>选项二</option>
      <option>选项三</option>
    </select>
  </div>
</form>

4. Bootstrap表单验证示例

Bootstrap提供了方便的表单验证组件，可以通过required、minlength等属性来指定表单控件的验证规则，并且会自动根据用户输入的内容进行验证。

<form>
  <div class="form-group">
    <label for="text">文本框（必填）</label>
    <input type="text" class="form-control" id="text" required>
  </div>
  <div class="form-group">
    <label for="email">Email地址（必填）</label>
    <input type="email" class="form-control" id="email" required>
  </div>
  <div class="form-group">
    <label for="password">密码（长度不少于6位）</label>
    <input type="password" class="form-control" id="password" minlength="6">
  </div>
</form>