你的位置:首页 > 网页设计

[网页设计]Bootstrap~表单Form

在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布局,一切都是那么的完整与完美!

普通表单

我们需要将表单元素包裹到form-group类里,一般以<div >...</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>

运行之后的效果

水平排放的表单

需要你的表单元素需要水平排放,可以在表单上添加类.form-inline,这种表单一般在元素比较少时比较适用

例如

<form class="form-inline"> <div class="form-group">  <label class="sr-only" for="exampleInputEmail3">Email address</label>  <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> <div class="form-group">  <label class="sr-only" for="exampleInputPassword3">Password</label>  <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> <div class="checkbox">  <label>   <input type="checkbox"> Remember me  </label> </div> <button type="submit" class="btn btn-default">Sign in</button></form>

普通表单+元素水平排放

这种表单用的是最多的,在一般用户注册,填写资料时,经常可以见到如下的表单效果

实现这种表单使用了.form-horizontal类,每行元素被包裹在 <div class="form-group">...</div>即可

form > <div class="form-group">  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>  <div class="col-sm-10">   <input type="email" class="form-control" id="inputEmail3" placeholder="Email">  </div> </div> <div class="form-group">  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>  <div class="col-sm-10">   <input type="password" class="form-control" id="inputPassword3" placeholder="Password">  </div> </div> <div class="form-group">  <div class="col-sm-offset-2 col-sm-10">   <div class="checkbox">    <label>     <input type="checkbox"> Remember me    </label>   </div>  </div> </div> <div class="form-group">  <div class="col-sm-offset-2 col-sm-10">   <button type="submit" class="btn btn-default">Sign in</button>  </div> </div></form>

我们通过代码也可以看到,在进行表单布局时,也可以用col-sm和col-sm-offset进行栅格布局!