Question

我们拿一个常见的登录界面为案例。默认情况下的 form，代码是这样的：

 <form> 
        <div>
            <label >Email</label>
            <input type="email">
        </div>
        <div >
            <label >Password</label>
            <input type="password">
        </div>
        <button type="submit"  >Login</button>
    </form>

而通过 bootstrap 稍加改造，就可以看起来工工整整的很专业，代码是这样的：

 <form class="form-horizontal"> 
        <div class="form-group">
            <label >Email</label>
            <input type="email" class="form-control">
        </div>
        <div class="form-group">
            <label >Password</label>
            <input type="password" class="form-control">
        </div>
        <button type="submit"  class="btn">Login</button>
    </form>

只需要给 form 加上 class="form-horizontal"，给 input 加上 class="form-control"，就可以出来效果。

form 的控件还可以设置为单行，设置 class 值为 form-inline 即可。