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>
4000

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—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 小