bootstrap - form

我们拿一个常见的登录界面为案例。默认情况下的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即可。

    原文作者:1000copy
    原文地址: https://segmentfault.com/a/1190000006833305
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞