Bootstrap~表单Form在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的，有大气的边框，多功能的按钮及宏观的表单布局，一切都是那么的完整与完美！
普通表单我们需要将表单元素包裹到form-group类里，一般以<div class="form-group">...</div>来进行存放，而在它内容表单元素名称一般放在label标签里，而input标签的类名为form-control，值得注意的是，你的checkbox和radio等元素需要写在自己的div里。
例如下面的表单
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassWord1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button></form>
运行之后的效果
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
