您所在的位置:小祥子 » 编程 » CSS » 正文

Bootstrap~表单Form

时间:2015-07-21 编辑:张占岭 来源:CnBlogs

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

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" border="0" onload="return imgzoom(this,600);"/>

普通表单

我们需要将表单元素包裹到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>

运行之后的效果

水平排放的表单

需要你的表单元素需要水平排放,可以在表单上添加类.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>

普通表单+元素水平排放

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

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" border="0" onload="return imgzoom(this,600);"/>

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

form class="form-horizontal">
  <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进行栅格布局!

关键词:表单 or