第七篇Bootstrap表单布局实例代码详解(三种表单布局)

Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单。下面逐一给大家介绍，有兴趣的朋友一起学习吧。

创建垂直或基本表单：

•·向父

元素添加 role="form"。 •·把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。 •·向所有的文本元素 、 和 <select> <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-control </p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;"> <form role="form"> <div class="form-group"> <label for="name"><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></label> <input type="text" class="form-control" id="name" placeholder="请输入<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>"> </div> <div class="form-group"> <label for="inputfile"><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>输入</label> <input type="file" id="inputfile"> <p class="help-block">这里是块级帮助文本的实例。</p> </div> <div class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> <label> <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> 请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </pre> </div> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201606/20160621151717103.png" alt="" /></p></p> <p><h3>内联表单：</h3> </p> <p>内联表单中所有元素都向左对齐，<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>并排，要创建内联表单，需要在form<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>中加入class </p> <p><h3>.form-inline </h3></p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;"> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name"><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></label> <input type="text" class="form-control" id="name" placeholder="请输入<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>"> </div> <div class="form-group"> <label class="sr-only" for="inputfile"><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>输入</label> <input type="file" id="inputfile"> </div> <div class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> <label> <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> 请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form></pre> </div> <p><a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>如下： </p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201606/20160621151717104.png" alt="" /></p></p> <p>注意:<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>宽度。 </p> <p>水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤. </p> <p>•向父 <form> 元素<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-horizontal。 </p> <p>•把<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>和控件放在<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>带有 class .form-group 的 <div> 中。 </p> <p>•向<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .control-label。 </p> <p>例如: </p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> <label> <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"> 请记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default"><a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a></button> </div> </div> </form></pre> </div> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201606/20160621151717105.png" alt="" /></p></p> <p>以上所述是小编给大家介绍的第七篇Bootstrap表单布局实例<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>详解(三种表单布局)的全部叙述。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可<a href="https://www.jb51.cc/tag/fenxiang/" target="_blank" class="keywords">分享</a>给好友！感谢<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/bootstrapbiaodanbuju/" class="tag_link" target="_blank">bootstrap表单布局</a></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738675.html" title="Bootstrip HTML 查询搜索常用格式模版">Bootstrip HTML 查询搜索常用格式模版</a> </div> <div class="summary">Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738674.html" title="如何在按钮上加红色数字">如何在按钮上加红色数字</a> </div> <div class="summary">如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738673.html" title="让两个按钮左右排列">让两个按钮左右排列</a> </div> <div class="summary">要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738672.html" title="status能否设置为布尔值类型，前端采用复选框形式">status能否设置为布尔值类型，前端采用复选框形式</a> </div> <div class="summary">是的，可以将status设置为布尔类型，这样可以在前端使用复选...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2022/10-08/13/3873491c2cd9a95fadbb4d45bbe243d6.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/bootstrap/3764763.html" title="Bootstrap 按钮总结">Bootstrap 按钮总结</a> </div> <div class="summary">前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/3764762.html" title="Python学习-day52-bootstrap">Python学习-day52-bootstrap</a> </div> <div class="summary">起步导入：<linkrel="stylesheet"href="b...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>