轻松掌握Bootstrap表单布局：50个实用样例详解，让设计更高效！

在网页设计中，表单是用户与网站互动的关键元素。Bootstrap作为一个流行的前端框架，提供了丰富的工具和组件来帮助开发者快速构建美观、响应式的表单。本篇文章将详细介绍Bootstrap表单布局的50个实用样例，旨在帮助您更高效地进行网页设计。

1. 基础表单

Bootstrap的基础表单非常简单，只需要将表单控件放在.form-group类中即可。例如：

<div class="form-group">
  <label for="exampleInputEmail1">邮箱地址</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
</div>

2. 内联表单

内联表单将表单控件并排显示，适合空间有限的情况。通过添加form-inline类到.form-group中实现：

<div class="form-group form-inline">
  <label class="sr-only" for="exampleInputPassword2">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="密码">
</div>

3. 搜索表单

搜索表单是一种特殊的表单，Bootstrap提供了form-search类来简化其创建：

<form class="form-search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="搜索...">
    <span class="input-group-btn">
      <button class="btn btn-default" type="submit">搜索</button>
    </span>
  </div>
</form>

4. 响应式表单

Bootstrap的栅格系统使得表单在不同设备上具有响应性。例如，在手机屏幕上，表单控件会自动堆叠：

<div class="row">
  <div class="col-xs-12">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
</div>

5. 禁用表单控件

通过添加disabled属性到输入框，可以禁用表单控件：

<input type="text" class="form-control" placeholder="禁用输入" disabled>

6. 添加帮助文本

在表单控件下方添加帮助文本，可以为用户提供额外信息：

<div class="form-group">
  <label for="exampleInputFile">文件输入</label>
  <input type="file" id="exampleInputFile">
  <p class="help-block">选择一个文件来上传。</p>
</div>

7. 状态样式

Bootstrap提供了.has-success、.has-warning和.has-error类来为表单控件添加状态样式：

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder=".has-success">
</div>

8. 表单控件尺寸

Bootstrap允许您通过添加.input-lg、.input-sm类来改变表单控件的尺寸：

<input type="text" class="form-control input-lg" placeholder=".input-lg">
<input type="text" class="form-control input-sm" placeholder=".input-sm">

9. 颜色输入框

使用color输入类型创建颜色选择器：

<input type="color" class="form-control">

10. 文本域

使用textarea控件创建多行文本输入：

<textarea class="form-control" rows="3"></textarea>

11. 水平分组按钮

水平排列的按钮可以与表单控件结合使用：

<div class="row">
  <div class="col-lg-8">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword">
  </div>
  <div class="col-lg-4">
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">登录</button>
      <button type="button" class="btn btn-default">注册</button>
    </div>
  </div>
</div>

12. 水平分组输入

水平排列的输入控件：

<div class="row">
  <div class="col-lg-8">
    <label for="inputEmail">邮箱</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
  </div>
  <div class="col-lg-4">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
</div>

13. 表单内嵌复选框和单选按钮

在表单内使用复选框和单选按钮：

<div class="form-group">
  <div class="checkbox">
    <label>
      <input type="checkbox"> 我同意服务条款
    </label>
  </div>
</div>
<div class="form-group">
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      选项1
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      选项2
    </label>
  </div>
</div>

14. 表单内嵌下拉菜单

在表单内使用下拉菜单：

<div class="form-group">
  <label for="exampleInputSelect">选择选项</label>
  <select class="form-control" id="exampleInputSelect">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
  </select>
</div>

15. 表单内嵌日期选择器

使用<input type="date">创建日期选择器：

<div class="form-group">
  <label for="exampleInputDate">日期</label>
  <input type="date" class="form-control" id="exampleInputDate">
</div>

16. 表单内嵌时间选择器

使用<input type="time">创建时间选择器：

<div class="form-group">
  <label for="exampleInputTime">时间</label>
  <input type="time" class="form-control" id="exampleInputTime">
</div>

17. 表单内嵌月份选择器

使用<input type="month">创建月份选择器：

<div class="form-group">
  <label for="exampleInputMonth">月份</label>
  <input type="month" class="form-control" id="exampleInputMonth">
</div>

18. 表单内嵌周选择器

使用<input type="week">创建周选择器：

<div class="form-group">
  <label for="exampleInputWeek">周</label>
  <input type="week" class="form-control" id="exampleInputWeek">
</div>

19. 表单内嵌数字选择器

使用<input type="number">创建数字选择器：

<div class="form-group">
  <label for="exampleInputNumber">数字</label>
  <input type="number" class="form-control" id="exampleInputNumber">
</div>

20. 表单内嵌滑块

使用<input type="range">创建滑块：

<div class="form-group">
  <label for="exampleInputRange">滑块</label>
  <input type="range" class="form-control" id="exampleInputRange">
</div>

21. 表单内嵌搜索输入

使用<input type="search">创建搜索输入：

<div class="form-group">
  <label for="exampleInputSearch">搜索</label>
  <input type="search" class="form-control" id="exampleInputSearch">
</div>

22. 带边框的表单

通过添加form-bordered类，可以为表单控件添加边框：

<form class="form-bordered">
  <div class="form-group">
    <label for="exampleInputBordered">带边框的输入框</label>
    <input type="text" class="form-control" id="exampleInputBordered">
  </div>
</form>

23. 表单内嵌水平线

使用<hr>标签在表单控件之间添加水平线：

<div class="row">
  <div class="col-lg-6">
    <label for="exampleInputHorizontalLine">水平线左侧</label>
    <input type="text" class="form-control" id="exampleInputHorizontalLine">
  </div>
  <div class="col-lg-6">
    <label for="exampleInputHorizontalLine2">水平线右侧</label>
    <input type="text" class="form-control" id="exampleInputHorizontalLine2">
  </div>
</div>
<hr>

24. 表单内嵌水平分组按钮

水平排列的按钮可以与水平线结合使用：

<div class="row">
  <div class="col-lg-6">
    <label for="exampleInputHorizontalButton">水平线左侧按钮</label>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">按钮1</button>
      <button type="button" class="btn btn-default">按钮2</button>
    </div>
  </div>
  <div class="col-lg-6">
    <label for="exampleInputHorizontalButton2">水平线右侧按钮</label>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">按钮3</button>
      <button type="button" class="btn btn-default">按钮4</button>
    </div>
  </div>
</div>

25. 表单内嵌文本对齐

使用.text-left、.text-center和.text-right类来设置文本对齐方式：

<div class="row">
  <div class="col-lg-6 text-left">
    <label for="exampleInputTextAlign">文本左对齐</label>
    <input type="text" class="form-control" id="exampleInputTextAlign">
  </div>
  <div class="col-lg-6 text-center">
    <label for="exampleInputTextAlign2">文本居中对齐</label>
    <input type="text" class="form-control" id="exampleInputTextAlign2">
  </div>
</div>

26. 表单内嵌表头

使用.table类创建带有表头的表格：

<table class="table">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
  </tbody>
</table>

27. 表单内嵌列表组

使用.list-group类创建列表组：

<div class="list-group">
  <a href="#" class="list-group-item active">列表项1</a>
  <a href="#" class="list-group-item">列表项2</a>
  <a href="#" class="list-group-item">列表项3</a>
</div>

28. 表单内嵌面板

使用.panel类创建面板：

<div class="panel panel-default">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容...
  </div>
</div>

29. 表单内嵌轮播图

使用.carousel类创建轮播图：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 轮播图指示器 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- 轮播图内容 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- 轮播图控制按钮 -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

30. 表单内嵌下拉菜单

使用.dropdown类创建下拉菜单：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

31. 表单内嵌标签页

使用.tab-content类创建标签页：

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active">
    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">标签1</a>
  </li>
  <li role="presentation">
    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">标签2</a>
  </li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    ...
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    ...
  </div>
</div>

32. 表单内嵌缩略图

使用.thumbnail类创建缩略图：

<div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>缩略图标题</h3>
    <p>缩略图内容...</p>
  </div>
</div>

33. 表单内嵌轮播图