一、概要
Bootstrap 提供了下列类型的表单布局
- 垂直表单（默认）
- 内联表单
- 水平表单
二、基本样式
1、说明
单独的表单控件会被自动赋予一些全局样式。
将
label元素和前面提到的控件包裹在.form-group中可以获得最好的排列
2、form-group
- 作用
增加块元素的下部留白，从而使块元素的间距变大 - 栗子
<form> <div class="form-group"> <label for="name">用户名</label> <input type="text" id="name" placeholder="请输入用户名"> </div> </form>
3、form-control
- 作用
换行+填充整行 - 栗子
<form> <div class="form-group"> <label for="name">用户名</label> <input type="text" id="name" class="form-control" placeholder="请输入用户名"> </div> <button type="submit">提交</button> </form>
4、注意
- 只有正确设置了输入框的 type 类型，才能被赋予正确的样式。
- 包括：text、password、、datetime-local、date、number、email、url、search、tel 和 color等。
三、内联表单
1、说明
为
<form>元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）
2、注意事项
- form-inline使带有form-control和form-group的元素表现出行内的效果
- form-inline一定要保证在至少768px的行宽下，否则会看不到内联效果
3、示例代码
<form class="form-inline">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="pwd">设置密码</label>
<input type="text" class="form-control" id="pwd" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="pwd1">确认密码</label>
<input type="text" class="form-control" id="pwd1" placeholder="请确认密码">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="123456@example.com">
</div>
<button class="btn btn-info">注册</button>
</form>
</div>
四、水平排列的表单
1、说明
通过为表单添加
.form-horizontal类，并联合使用 Bootstrap 预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了
2、示例代码
<span class="h1">水平排列</span>
<form class="form-horizontal">
<div class="form-group">
<label for="uname" class="col-sm-2">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="uname" placeholder="请输入用户名">
</div>
</div>
</form>
五、复选框、单选框、下拉列表
1 、说明
复选框（.checkbox）用于选择列表中的一个或多个选项，
单选框（.radio）用于从多个选项中只选择一个
下拉列表(.select) 用于下拉框的选择
2 、复选框(radio)
- 设置复选框和文字单独一行
<div class="checkbox">
<label>
<input type="radio" name="r1" value="1">鸡泽明步
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="r1" value="2">搏多野见衣
</label>
</div>
- 设置内联一行显示的复选框
<label class="checkbox-inline"> <input type="checkbox">鸡泽明步</label> <label class="checkbox-inline disabled"> <input type="checkbox" disabled>搏多野见衣</label>
3、单选框
- 单选框和文字独占一行
<div class="radio"> <label> <input type="radio" name="sex">男</label> </div> <div class="radio"> <label> <input type="radio" name="sex">女</label> </div> - 所有单选框同在一行
<label class="radio-inline"> <input type="radio" id="ick1" value="v1">1 </label> <label class="radio-inline"> <input type="radio" id="ick2" value="v2">2 </label> <label class="radio-inline"> <input type="radio" id="ick3" value="v3">3 </label>
4、下拉列表
- 基本使用
<select class="form-control"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>长沙</option> </select>
六、表单状态检测
任何包含在此元素之内的 .control-label、.form-control 等元素都将接受这些校验状态的样式。
1、has-warning
- 作用
表单填写警告 - 栗子
<div class="form-group has-warning"></div>
2、has-error
- 作用
表单填写错误 - 栗子
<div class="form-group has-error"></div>
3、has-success
- 作用
表单填写成功 - 栗子
<div class="form-group has-success"></div>
4、标签同步相应状态
- 作用
一般配合js使用动态的操作样式 - 栗子
<form role="form"> <div class="form-group has-success"> <label class="control-label" for="success">成功状态</label> <input type="text" class="form-control" id="success" placeholder="成功状态"> </div> <div class="form-group has-warning"> <label class="control-label" for="warning">警告状态</label> <input type="text" class="form-control" id="warning" placeholder="警告状态"> </div> <div class="form-group has-error"> <label class="control-label" for="error">错误状态</label> <input type="text" class="form-control" id="error" placeholder="错误状态"> </div> </form>
七、控制尺寸
1、说明
bootstrap还提供了一些控制表单元素大小的样式input-lg、input-sm
也可以设置父元素 form-group-lg、form-group-sm，来调整。
2、举个栗子
<input type="text" class="form-control input-lg" value="稍微大一点的">
<input type="text" class="form-control" value="默认大小的">
<input type="text" class="form-control input-sm" value="小号输入框">
