掌握Bootstrap表单设计：50个实用示例助你打造美观高效的表单界面

Bootstrap是一个广泛使用的开源前端框架，它提供了一个灵活且响应式的Web设计解决方案。其中，Bootstrap表单组件是构建交互式表单的重要工具，可以帮助开发者创建美观且高效的表单界面。以下是50个实用的Bootstrap表单设计示例，旨在帮助你掌握如何使用Bootstrap创建专业的表单界面。

1. 基础表单

使用基本的Bootstrap表单组件来创建一个简单的登录表单。

<form>
  <div class="form-group">
    <label for="inputEmail">邮箱</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> 记住我
    </label>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

2. 添加验证状态

向表单字段添加验证状态，以显示用户输入的验证信息。

<form>
  <div class="form-group has-success">
    <label class="form-control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control form-control-success" id="inputSuccess1" aria-describedby="inputSuccess1Status">
    <div class="form-control-feedback">✓</div>
    <small id="inputSuccess1Status" class="form-text text-muted">一切正常！</small>
  </div>
</form>

3. 使用水平布局

在较宽的表单中，使用水平布局来对齐表单标签。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
    </div>
  </div>
</form>

4. 使用响应式表单

使用响应式设计来确保表单在不同屏幕尺寸上都能正确显示。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> 记住我
    </label>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

5. 表单内嵌元素

将复选框、单选按钮或开关与表单内容结合起来。

<form>
  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">选项 1</label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio1">选项 1</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio2">选项 2</label>
    </div>
  </div>
</form>

6. 静态表单控件

为静态文本内容或说明信息添加边框，使其成为表单的一部分。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="inputDisabled1">禁用输入</label>
      <input type="text" class="form-control" id="inputDisabled1" placeholder="请输入内容">
    </div>
    <div class="form-group">
      <label for="inputDisabled2">禁用文本</label>
      <textarea class="form-control" id="inputDisabled2" rows="3">这里是一个禁用状态的文本区域。</textarea>
    </div>
  </fieldset>
</form>

7. 表单控件大小

根据需要调整表单控件的尺寸。

<form>
  <div class="form-group">
    <label for="inputLarge1">大尺寸输入</label>
    <input type="text" class="form-control form-control-lg" id="inputLarge1" placeholder="大尺寸输入">
  </div>
  <div class="form-group">
    <label for="inputSmall1">小尺寸输入</label>
    <input type="text" class="form-control form-control-sm" id="inputSmall1" placeholder="小尺寸输入">
  </div>
</form>

8. 表单验证样式

使用表单验证样式来高亮显示错误的输入。

<form>
  <div class="form-group has-danger">
    <label for="inputDanger1">错误输入</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger1" placeholder="错误的输入">
  </div>
</form>

9. 禁用表单控件

通过设置表单控件为禁用状态来指示用户不能输入或编辑数据。

<form>
  <div class="form-group">
    <label for="inputDisabled">禁用输入</label>
    <input type="text" class="form-control" id="inputDisabled" disabled>
  </div>
</form>

10. 表单验证

使用表单验证来确保用户输入的数据是有效的。

<form>
  <div class="form-group">
    <label for="inputValidEmail">邮箱验证</label>
    <input type="email" class="form-control is-valid" id="inputValidEmail" placeholder="请输入邮箱">
  </div>
  <div class="form-group has-danger">
    <label for="inputInvalidEmail">无效邮箱验证</label>
    <input type="email" class="form-control is-invalid" id="inputInvalidEmail" placeholder="请输入邮箱">
  </div>
</form>

11. 间距与边框

添加间距和边框以增强表单的视觉效果。

<form class="p-3">
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <label for="inputUsername">用户名</label>
    <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
  </div>
</form>

12. 透明表单

使用透明表单背景来提高文本可读性。

<form class="form-transparent">
  <div class="form-group">
    <label for="inputUsername">用户名</label>
    <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
</form>

13. 静态表单

将表单放置在一个静态容器中，用于展示或提供信息。

<form class="form-static">
  <div class="form-group">
    <label for="inputName">姓名</label>
    <input type="text" class="form-control" id="inputName" placeholder="请输入姓名">
  </div>
  <div class="form-group">
    <label for="inputEmail">邮箱</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
  </div>
</form>

14. 内联表单

将表单元素放置在一个容器内，使表单看起来像是嵌入在页面中的。

<form class="form-inline">
  <div class="form-group">
    <label for="inputEmail2">邮箱</label>
    <input type="email" class="form-control" id="inputEmail2" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="inputPassword2">密码</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

15. 面板表单

使用Bootstrap面板组件来增强表单的可读性和组织性。

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-group">
        <label for="inputUsername3">用户名</label>
        <input type="text" class="form-control" id="inputUsername3" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="inputPassword3">密码</label>
        <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
      </div>
      <button type="submit" class="btn btn-primary">登录</button>
    </form>
  </div>
</div>

16. 带有图标表单

使用图标与表单结合，增加视觉吸引力。

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-prepend">@</span>
    </div>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-prepend">
  </div>
</form>

17. 垂直堆叠表单

创建一个垂直堆叠的表单，适用于较小屏幕或移动设备。

<form class="form-vertical">
  <div class="form-group">
    <label for="inputEmail4">邮箱</label>
    <input type="email" class="form-control" id="inputEmail4" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="inputPassword4">密码</label>
    <input type="password" class="form-control" id="inputPassword4" placeholder="请输入密码">
  </div>
</form>

18. 水平表单

使用水平布局来创建一个对齐的表单。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail5" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail5" placeholder="请输入邮箱">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword5" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword5" placeholder="请输入密码">
    </div>
  </div>
</form>

19. 带有自定义边框的表单

使用自定义边框样式来增强表单的美观性。

<form class="form-bordered">
  <div class="form-group">
    <label for="inputEmail6">邮箱</label>
    <input type="email" class="form-control" id="inputEmail6" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="inputPassword6">密码</label>
    <input type="password" class="form-control" id="inputPassword6" placeholder="请输入密码">
  </div>
</form>

20. 空表单

创建一个空的表单，以便用户可以从中开始。

<form class="form-empty">
  <div class="form-group">
    <label for="inputEmail7">邮箱</label>
    <input type="email" class="form-control" id="inputEmail7" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="inputPassword7">密码</label>
    <input type="password" class="form-control" id="inputPassword7" placeholder="请输入密码">
  </div>
</form>

21. 带有提示信息的表单

使用提示信息来向用户说明如何填写表单字段。

<form>
  <div class="form-group">
    <label for="inputName8">姓名</label>
    <input type="text" class="form-control" id="inputName8" placeholder="请输入您的姓名">
    <small class="form-text text-muted">我们将使用此信息进行验证。</small>
  </div>
  <div class="form-group">
    <label for="inputEmail9">邮箱</label>
    <input type="email" class="form-control" id="inputEmail9" placeholder="请输入您的邮箱">
    <small class="form-text text-muted">我们会通过此邮箱发送验证链接。</small>
  </div>
</form>

22. 水平排列的复选框和单选按钮

在水平排列的复选框和单选按钮中使用表单控件。

<form>
  <div class="form-group">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
      <label class="form-check-label" for="inlineCheckbox1">选项 1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
      <label class="form-check-label" for="inlineCheckbox2">选项 2</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">选项 1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">选项 2</label>
    </div>
  </div>
</form>

23. 自定义复选框和单选按钮

使用自定义复选框和单选按钮样式来增加设计感。

<form>
  <div class="form-check custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheckbox1">
    <label class="custom-control-label" for="customCheckbox1">自定义复选框</label>
  </div>
  <div class="form-check custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio">
    <label class="custom-control-label" for="customRadio1">自定义单选按钮</label>
  </div>
</form>

24. 分组复选框和单选按钮

将复选框和单选按钮分组以改善用户体验。

<form>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checkbox1">
    <label class="form-check-label" for="checkbox1">复选框 1</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checkbox2" disabled>
    <label class="form-check-label" for="checkbox2">禁用复选框 2</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="checkbox3">
    <label class="form-check-label" for="checkbox3">复选框 3</label>
  </div>
</form>

25. 优雅的错误提示

当表单验证失败时，提供优雅的错误提示信息。

<form>
  <div class="form-group has-danger">
    <label for="inputDanger9">错误输入</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger9" placeholder="错误的输入">
    <div class="form-control-feedback">错误：此字段是必需的。</div>
  </div>
</form>

26. 添加图片作为背景

将图片作为背景添加到表单中，以增加视觉吸引力。

”`html

<label for="inputUsername10">用户名</label>
<input type="text" class="form-control" id="inputUsername10" placeholder="请输入用户名">

<label for="inputPassword10">密码</label>
<input type="password" class