[TOC] ## 水平排列的表单模版 <details> <summary>index.html</summary> ``` <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <!-- 通过 offset-2 去对齐 input表单--> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <!-- 通过 offset-2 去对齐 input表单--> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> ``` </details> <br/> ## 多选和单选框 > [参考](https://v3.bootcss.com/css/#%E5%A4%9A%E9%80%89%E5%92%8C%E5%8D%95%E9%80%89%E6%A1%86) ### 纵向添加 ``` <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <!--纵向添加--> <div class="checkbox"> <label> <input type="checkbox" value=""> 多个checkbox 进行堆叠 </label> </div> </div> </div> ``` > radio 同理 只是把`.checkbox` 换成 `.radio` 但其实他们只是互为别名,样式相同 ### 横向添加 横向只需要把 `.checkbox` 改为 `.checkbox-inline` ``` <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox-inline"> <label> <input type="checkbox"> Remember me </label> </div> <!--纵向添加--> <div class="checkbox-inline"> <label> <input type="checkbox" value="">多个checkbox 进行堆叠 </label> </div> </div> </div> ``` > radio 同理 只是把`.checkbox-inline` 换成 `.radio-inline` 但其实他们只是互为别名,样式相同 ## 下拉列表（select） ``` <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> ``` ## 修饰控件 ### 对控件的提示文字 - help-block  <br/> ``` <div class="form-group"> <label for="passwd" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <input type="text" class="form-control" id="passwd" name="passwd"> <span class="help-block">这是测试的提示文字</span> </div> </div> ``` ### 校验状态-颜色  <br/> - `.has-warning`、`.has-error`或`.has-success`类到这些控件的父元素即可。 - 任何包含在此元素之内的`.control-label`、`.form-control`和`.help-block`元素都将接受这些校验状态的样式 - 对所有空间生效 ``` <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> </div> ``` ### 校验状态-图标  <br/> - 在`hs-*` 后添加 `has-feedback` - `glyphicon-*-*` 前一个"*"可选择颜色和后一个"*"可选择形状 ``` <div class="form-group has-success has-feedback"> <label for="passwd" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <input type="text" class="form-control" id="passwd" name="passwd"> <span class="help-block">这是测试的提示文字</span> <span class="glyphicon glyphicon-ok-sign form-control-feedback" aria-hidden="true"></span> </div> </div> ``` ### 控件前后修饰文字  - 使用 `input-group` 包裹 空间 - 使用 `input-group-addon` 添加文字 ``` <div class="form-group "> <label for="passwd" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <div class="input-group"> <!-- @ 在 input 前--> <span class="input-group-addon">@</span> <input type="text" class="form-control" id="passwd" name="passwd"> </div> <!-- 由于 input-group 看为一个input 整体 修饰在 input-group 外--> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> ```