当前位置：首页 > 资讯 > 技术文档

Bootstrap表单Form全面解析

时间：2021-08-22 22:50 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap表单Form全面解析

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的，有大气的边框，多功能的按钮及宏观的表单布局，一切都是那么的完整与完美！ [img]http://files.jb51.net/file_images/article/201606/2016613104439946.png?2016513104458[/img] [b]普通表单 [/b] 我们需要将表单元素包裹到form-group类里，一般以<div class="form-group">...</div>来进行存放，而在它内容表单元素名称一般放在label标签里，而input标签的类名为form-control，值得注意的是，你的checkbox和radio等元素需要写在自己的div里。 [b]例如下面的表单[/b]

<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>

运行之后的效果 [img]http://files.jb51.net/file_images/article/201606/2016613104520055.png?2016513104532[/img] [b]水平排放的表单[/b] 需要你的表单元素需要水平排放，可以在表单上添加类.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>

[img]http://files.jb51.net/file_images/article/201606/2016613104546063.png?2016513104612[/img] [b]普通表单+元素水平排放[/b] 这种表单用的是最多的，在一般用户注册，填写资料时，经常可以见到如下的表单效果 [img]http://files.jb51.net/file_images/article/201606/2016613104632977.png?2016513104643[/img] 实现这种表单使用了.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>

我们通过代码也可以看到，在进行表单布局时，也可以用[b]col-sm和col-sm-offset进行栅格布局[/b]！以上所述是小编给大家介绍的Bootstrap表单Form全面解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：分享一个自定义的console类让你不再纠结JS中的调试代码的兼容
下一篇：在js文件中如何获取basePath处理js路径问题

资讯排行榜
更多>>