005 基本表单

一.基本表单

<form>
     <div class="form-group">
           <label >账号</label>
           <input type="text" placeholder="账号" class="form-control">
     </div>
     <div class="form-group">
             <label>密码</label>
             <input type="password" placeholder="密码信息" class="form-control" >
     </div>

     <div class='container'>
　　　　<div class="row">
　　　　　　<div class="col-md-4 col-md-offset-5">
　　　　　　　　<button >登录</button>
　　　　　　　　<button >重置</button>
　　　　　　</div
　　　　</div>
　　</div>

</form>

我们可以看到:

[1]基本的表单之中,每一个输入框都是由一个lable和一个input组成,整体包裹在在一个div之中.

[2]div使用class="form-group"

[3]input 使用class="form-control".

效果:

---

二.水平排列表单

<form class="form-horizontal">
　　<div class="form-group">
　　　　<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
　　　　<div class="col-sm-10">
　　　　　　<input type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
　　　　</div>
　　</div>
　　<div class="form-group">
　　　　<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
　　　　<div class="col-sm-10">
　　　　　　<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
　　　　</div>
　　</div>
</form>

实现水平表单的核心就是两个样式 class="form-horizontal" 和class="control-label"