表单

基础表单:

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱：</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
  </div>
</form>

邮箱：

密码

水平表单:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label">邮箱</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
    </div>
  </div>

</form>

form 表单为form-horizontal,    label标签class为col-sm-3 control-label占一行20%(类似珊格12格)，input的父标签div标签class为col-sm-9占3/4。

label 中for为input的ID，页面中点击 邮箱 （label）会光标会移到对应ID的input。

未到768以上，不会展示成一列中。

@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
  }
}

邮箱

密码

内联表单：

表单少了栅格系统，如：<div class="col-sm-9">，系统

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  </div>
</form>  

邮箱

 

密码