<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名" class="form-control" >
</div>
<div class="form-group">
<label for="passwd">密码</label>
<input type="text" id="passwd" placeholder="请输入密码" class="form-control" >
</div>
<div class="form-group">
<label for="email">邮件地址</label>
<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<input type="submit" value="提交" class="btn btn-primary">
</div>
</form>
结果如下图，注意：
1. label中的for属性作用： 当鼠标点击该label时，鼠标光标会移动到id等于该for的值的元素中。
2.将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
2.内联表单
- 为
<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
- 修改上述例子的代码，只修改如下部分：
<form class="form-inline">
3. 水平排列的表单
- 通过为表单添加
.form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10 " >
<input type="text" id="username" placeholder="请输入用户名" class="form-control" >
</div>
</div>
<div class="form-group">
<label for="passwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10 " >
<input type="text" id="passwd" placeholder="请输入密码" class="form-control" >
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮件地址</label>
<div class="col-sm-10 " >
<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="提交" class="btn btn-primary">
</div>
</div>
</form>
-
这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和 父元素样式同步。
- input 标签不能直接写 col-sm-10 样式，必须外面加一层div。
- control-label的文本采用右对齐方式，加载label标签中，使得布局更合理。
4.输入框组
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。
- 我们不支持在输入框的单独一侧添加多个额外元素（
.input-group-addon 或 .input-group-btn）。
- 我们不支持在单个输入框组中添加多个表单控件。
<div class="input-group">
<label class="input-group-addon">$</label>
<input type="text" class="form-control" placeholder="请输入金额">
<label class="input-group-addon">.00</label>
</div>
5.多选和单选框
<div class="checkbox">
<label>
<input type="checkbox">音乐
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">玩游戏
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">旅游
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sex" value="man" checked>男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sex" value="woman">女
</label>
</div>
6.内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
<label class="checkbox-inline">
<input type="checkbox">音乐
</label>
<label class="checkbox-inline">
<input type="checkbox">玩游戏
</label>
<label class="checkbox-inline">
<input type="checkbox">旅游
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="man" checked>男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="woman">女
</label>
7.下拉列表
//设置下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
8.校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
<form class="form-horizontal">
<div class="form-group has-success ">
<label for="username" class="col-sm-2 control-label ">用户名</label>
<div class="col-sm-10 " >
<input type="text" id="username" placeholder="请输入用户名" class="form-control " >
</div>
</div>
<div class="form-group has-warning ">
<label for="passwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10 " >
<input type="text" id="passwd" placeholder="请输入密码" class="form-control" >
</div>
</div>
<div class="form-group has-error">
<label for="email" class="col-sm-2 control-label">邮件地址</label>
<div class="col-sm-10 " >
<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
</div>
</form>
- 结果如下
9.添加额外的图标
还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
- 反馈图标（feedback icon）只能使用在文本输入框
<input class="form-control"> 元素上。
- 对于不带有
label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。
<div class="form-group has-success has-feedback">
<label for="username" class="col-sm-2 control-label ">用户名</label>
<div class="col-sm-10 " >
<input type="text" id="username" placeholder="请输入用户名" class="form-control " >
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
10.控件尺寸
//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">
注：也可以设置父元素 form-group-lg、form-group-sm，来调整。
二、图片
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
- 请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
//响应式图片
<img src="img/pic.png" alt="图片" class="img-responsive">
