本篇将主要介绍Bootstrap表单的使用技巧。
1.Bootstrap基础表单
表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
我们先来看一个基础表单：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础表单</title> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <form role="form"> <div> <label for="exampleInputEmail1">邮箱：</label> <input type="email" placeholder="请输入您的邮箱地址"> </div> <div> <label for="exampleInputPassword1">密码：</label> <input type="password" placeholder="请输入您的密码"> </div> <div> <label><input type="checkbox">记住密码</label> </div> <button type="submit">登录</button> </form> </body> </html>
效果图如下所示：
我们还可以通过为form添加不同的类名达成不同的效果，form的具体规则如下表所示：
例如：
<form role="form">...</form>
2.Bootstrap表单控件
1）输入框input
<form role="form"> <div> <!--必须添加type类型，如果没有指定type类型，将无法得到正确的样式--> <input type="email" placeholder="Enter email"> </div> </form>
2）下拉选择框select
<form role="form"> <div> <!--单行下拉选择框--> <select> <option>1</option> <option>2</option> </select> </div> <div> <!--多行选择框--> <select multiple> <option>1</option> <option>2</option> </select> </div> </form>
3）文本域textarea
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
<form role="form"> <div> <!--rows="3"设置高度三行--> <textarea rows="3"></textarea> </div> </form>
4）复选框checkbox
垂直排列：
<form role="form"> <div> <label><input type="checkbox" value="">复选框</label> </div> </form>
水平排列：
<form role="form"> <div> <label><input type="checkbox" value="option1">复选框1</label> <label><input type="checkbox" value="option2">复选框2</label> </div> </form>
5）单选择按钮radio
垂直排列：
<form role="form"> <div> <label><input type="radio" value="love" checked>A</label> </div> <div> <!--不管是checkbox还是radio都使用label包起来了--> <label><input type="radio" value="hate">B</label> </div> </form>
水平排列：
<form role="form"> <div> <label><input type="radio" value="option1">A</label> <label><input type="radio" value="option2">B</label> </div> </form>
注意：checkbox连同label标签放置在一个名为“.checkbox”的容器内；radio连同label标签放置在一个名为“.radio”的容器内。
3.Bootstrap表单控件状态
1）焦点状态
焦点状态是通过为input添加类名form-control来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。
<!--form-horizontal实现水平表单效果--> <form role="form"> <div> <div> <input type="text" placeholder="焦点状态"> </div> </div> </form>
2）禁用状态
只需要在需要禁用的表单控件上加上“disabled”即可：
<input type="text" placeholder="表单已禁用，不能输入" disabled>
3）验证状态
做表单验证，同样也需要提供验证状态样式，在Bootstrap中同样提供这几种效果：
使用的时候只需要在form-group容器上对应添加状态类名。