我们拿一个常见的登录界面为案例。默认情况下的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-vertical">
<div>
<label >Email</label>
<input type="email" class="form-control">
</div>
<div >
<label >Password</label>
<input type="password" class="form-control">
</div>
<button type="submit" class="btn">Login</button>
</form>
只需要给form加上class=”form-vertical”,给input加上class=”form-control”,就可以出来效果。
form的class还可以设置为水平和单行,设置的值分别为form-horizontal、form-inline即可。