Bootstrap 表单

1.输入框组 form-group   多选框checkbox

<div class="form-group">    
    <label for="exampleInputEmail1">Email address</label>    
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">  
</div>

<div class="checkbox">

   <label>
      <input type="checkbox"> Remember me
   </label> 

</div>

2.默认样式.form-control

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

3.文本 help-block

< p class= "help-block">***</p>

4.内联表单 （ 在一行）form-inline

<form class="form-inline"></form>

5. 隐藏  sr-only

<label class="sr-only">Email address</label>

6.水平排列的表单 form-horizontal

通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。

7.向右对齐 control-label 比text-right样式更加合理 （还加了行高）

<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

8.文本框（宽度固定 可根据需要调节row的数据）

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

9.单选框 （和复选框一致）

<div class="radio">  

<label>  

<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>  

Option one is this and that&mdash;be sure to include why it's great  

</label>

</div>

<div class="radio">  

<label>  

<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">  

Option two can be something else and selecting it will deselect option one  

</label>

</div>

10.单选 复选 行排列

<label class="checkbox-inline">  

<input type="checkbox" id="inlineCheckbox1" value="option1"> 1

</label>

<label class="checkbox-inline">  

<input type="checkbox" id="inlineCheckbox2" value="option2"> 2

</label>

<label class="checkbox-inline">  

<input type="checkbox" id="inlineCheckbox3" value="option3"> 3

</label>

11.输入框样式：has-success has-warning has-error

<div class="form-group has-success">  

<label class="control-label" for="inputSuccess">Input with success</label>  

<input type="text" class="form-control" id="inputSuccess">

</div>

<div class="form-group has-warning">  

<label class="control-label" for="inputWarning">Input with warning</label>  

<input type="text" class="form-control" id="inputWarning">

</div>

<div class="form-group has-error">  

<label class="control-label" for="inputError">Input with error</label>  

<input type="text" class="form-control" id="inputError">

</div>

12.控件大小

*-lg大 * 默认中等 *-sm 小