Bootstrap 表单

【Bootstrap 表单】

1、垂直（默认表单）

　　1、form元素添加role="form"

　　2、div添加class ="form-group"

　　3、input添加class="form-control"

<form role="form"> 
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
    </div>

</form>    

2、内联表单。form元素添加class="form-inline"即可。

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

3、水平表单。

• 向父 <form> 元素添加 class .form-horizontal。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。
• 向标签添加 class .control-label。

　　

4、对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

<div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="inputError">输入错误</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
    </div>
  </div>

参考：http://www.runoob.com/bootstrap/bootstrap-forms.html