在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 , , 和 elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。</p> <b>Bootstrap4 表单布局</b> 堆叠表单 (全屏宽度)：垂直方向 内联表单：水平方向 <p>Bootstrap 提供了两种类型的表单布局:</p> <b> <b>堆叠表单</b> <p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：</p> <b>实例</b> <code> <div class="form-group"> <label for="email">Email address:</label> </div> <div class="form-group"> <label for="pwd">Password:</label> </div> <div class="form-check"> <label class="form-check-label"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </code> <br> <b> <b>内联表单</b> <p>所有内联表单中的元素都是左对齐的。</p> <p><strong>注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。</strong></p> <p>内联表单需要在 元素上添加 .form-inline类。 </p> <p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：</p> <b>实例</b> <code> <label for="email">Email address:</label> <label for="pwd">Password:</label> <div class="form-check"> <label class="form-check-label"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </code> <br> <p><br /> <script src="/upload/common/article_bottom1.js"></script></p> <p class="info"><br /> <a href="/bootstrap4/">Bootstrap4</a> </p> </div> <div class="card-footer clearfix"> <div class="opts"> <a title="对我有帮助" data-count="1024" data-state="deactive" data-type="article" data-id="315" class="likeable deactive digg" href="#"><i class='icon fa fa-thumbs-up'></i> <span>1024 个赞</span></a> <div class="pull-right"> <div class="dropdown"> <a href="#" data-bs-toggle ="dropdown"> <i class='icon fa fa-ellipsis-v'></i> </a> <div class="dropdown-menu dropdown-menu-end"> <a href="/user/article/315" target="_blank">编辑</a> <a href="/user/jubao/315" target="_blank">举报</a> </div> </div> </div> </div> </div> </div> <div id="replies" class="card" data-last-floor="7"> <div class="items card-body"> </div> </div> <div class="card"> <div class="card-body" style="padding: 10px;overflow: hidden;white-space: nowrap"> <script src="/upload/common/article_bottom2.js"></script> </div> </div> <div class="card"> <div class="card-body"> <div id="reply" class="form box"> <div style="padding:20px;" data-turbolinks-action="replace"> 需要 <a href="/user/login" class="btn btn-primary">登录</a> 后方可回复, 如果你还没有账号请 <a href="/user/reg">注册新账号</a> </div> </div> </div> </div> <div class="topics topics-index card"> <div class="card-body item-list"> <div class="card-header">相关文章</div> <div class="topic media topic-102" data-prefetch="/html/102"> <div class="avatar"> <a target="_blank" title="HTML 基础- 4个实例" href="/html/102"><img class="media-object avatar-48" src="/upload/wp-content/uploads/2020/01/logo.png?x-oss-process=style/40x40" /></a> </div> <div class="infos media-body"> <div class="title media-heading"> <a title="HTML 基础- 4个实例" target="_blank" href="/html/102">HTML 基础- 4个实例</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/382">Ivie</a> <abbr class="timeago" title='2021-01-23'>2021-01-23</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/html/102">701</a> </div> </div> <div class="topic media topic-317" data-prefetch="/shurukuang/317"> <div class="avatar"> <a target="_blank" title="Bootstrap4 输入框组" href="/shurukuang/317"><img class="media-object avatar-48" src="/upload/wp-content/uploads/2020/01/9F8A9143-892B-4A8A-901A-37C1E4E55941.jpg?x-oss-process=style/40x40" /></a> </div> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 输入框组" target="_blank" href="/shurukuang/317">Bootstrap4 输入框组</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/1690">Lilac</a> <abbr class="timeago" title='2021-03-30'>2021-03-30</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/shurukuang/317">767</a> </div> </div> <div class="topic media topic-318" data-prefetch="/bootstrap4/318"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 自定义表单" target="_blank" href="/bootstrap4/318">Bootstrap4 自定义表单</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/221">Lewa</a> <abbr class="timeago" title='2020-08-07'>2020-08-07</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/318">959</a> </div> </div> <div class="topic media topic-319" data-prefetch="/bootstrap4/319"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 轮播" target="_blank" href="/bootstrap4/319">Bootstrap4 轮播</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/1098">Cindy</a> <abbr class="timeago" title='2020-11-14'>2020-11-14</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/319">995</a> </div> </div> <div class="topic media topic-320" data-prefetch="/bootstrap4/320"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 模态框" target="_blank" href="/bootstrap4/320">Bootstrap4 模态框</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/101">Winona</a> <abbr class="timeago" title='2020-12-15'>2020-12-15</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/320">597</a> </div> </div> <div class="topic media topic-321" data-prefetch="/bootstrap4/321"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 提示框" target="_blank" href="/bootstrap4/321">Bootstrap4 提示框</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/1732">Quinta</a> <abbr class="timeago" title='2020-07-23'>2020-07-23</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/321">502</a> </div> </div> <div class="topic media topic-322" data-prefetch="/bootstrap4/322"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 弹出框" target="_blank" href="/bootstrap4/322">Bootstrap4 弹出框</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/274">Tertia</a> <abbr class="timeago" title='2021-07-16'>2021-07-16</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/322">720</a> </div> </div> <div class="topic media topic-324" data-prefetch="/bootstrap4/324"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 小工具" target="_blank" href="/bootstrap4/324">Bootstrap4 小工具</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/1591">Hea</a> <abbr class="timeago" title='2021-06-14'>2021-06-14</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/324">818</a> </div> </div> <div class="topic media topic-327" data-prefetch="/bootstrap4/327"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 创建一个网页" target="_blank" href="/bootstrap4/327">Bootstrap4 创建一个网页</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/14">Zarah</a> <abbr class="timeago" title='2020-02-25'>2020-02-25</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/327">889</a> </div> </div> <div class="topic media topic-28746" data-prefetch="/bootstrap4/28746"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 gulp 配置详解" target="_blank" href="/bootstrap4/28746">Bootstrap4 gulp 配置详解</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/1230">Vanora</a> <abbr class="timeago" title='2020-05-21'>2020-05-21</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/28746">642</a> </div> </div> <div class="topic media topic-31997" data-prefetch="/bootstrap4/31997"> <div class="infos media-body"> <div class="title media-heading"> <a title="详解处理bootstrap4不支持远程静态框问题" target="_blank" href="/bootstrap4/31997">详解处理bootstrap4不支持远程静态框问题</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/1424">Akili</a> <abbr class="timeago" title='2020-12-10'>2020-12-10</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/31997">712</a> </div> </div> <div class="topic media topic-127632" data-prefetch="/bootstrap4/127632"> <div class="avatar"> <a target="_blank" title="Bootstrap4如何定制自己的颜色和风格" href="/bootstrap4/127632"><img class="media-object avatar-48" src="/upload/wp-content/uploads/2020/01/jrbatga4pra.png?x-oss-process=style/40x40" /></a> </div> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4如何定制自己的颜色和风格" target="_blank" href="/bootstrap4/127632">Bootstrap4如何定制自己的颜色和风格</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/408">Dabria</a> <abbr class="timeago" title='2020-09-07'>2020-09-07</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/127632">925</a> </div> </div> <div class="topic media topic-128545" data-prefetch="/fenyechaxun/128545"> <div class="avatar"> <a target="_blank" title="使用Bootstrap4 + Vue2实现分页查询的示例代码" href="/fenyechaxun/128545"><img class="media-object avatar-48" src="/upload/wp-content/uploads/2020/01/epd2lbwcknh.png?x-oss-process=style/40x40" /></a> </div> <div class="infos media-body"> <div class="title media-heading"> <a title="使用Bootstrap4 + Vue2实现分页查询的示例代码" target="_blank" href="/fenyechaxun/128545">使用Bootstrap4 + Vue2实现分页查询的示例代码</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/22">Honoria</a> <abbr class="timeago" title='2020-03-07'>2020-03-07</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/fenyechaxun/128545">621</a> </div> </div> <div class="topic media topic-136093" data-prefetch="/bootstrap4/136093"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4一次重大更新 几乎涉及每行代码" target="_blank" href="/bootstrap4/136093">Bootstrap4一次重大更新 几乎涉及每行代码</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/82">Lena</a> <abbr class="timeago" title='2021-01-15'>2021-01-15</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/136093">849</a> </div> </div> <div class="topic media topic-176713" data-prefetch="/bootstrap4/176713"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4的栅格布局" target="_blank" href="/bootstrap4/176713">Bootstrap4的栅格布局</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/806">Edana</a> <abbr class="timeago" title='2021-05-02'>2021-05-02</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/176713">614</a> </div> </div> <div class="topic media topic-181829" data-prefetch="/bootstrap4/181829"> <div class="avatar"> <a target="_blank" title="解决BootStrap4版本以上不能用图标问题" href="/bootstrap4/181829"><img class="media-object avatar-48" src="/upload/wp-content/uploads/2020/03/20200320164446648.png?x-oss-process=style/40x40" /></a> </div> <div class="infos media-body"> <div class="title media-heading"> <a title="解决BootStrap4版本以上不能用图标问题" target="_blank" href="/bootstrap4/181829">解决BootStrap4版本以上不能用图标问题</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/371">Nadia</a> <abbr class="timeago" title='2021-02-25'>2021-02-25</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/181829">569</a> </div> </div> <div class="topic media topic-263655" data-prefetch="/bootstrap4/154766570428563456"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 加载效果" target="_blank" href="/bootstrap4/154766570428563456">Bootstrap4 加载效果</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/365">Tia</a> <abbr class="timeago" title='2022-05-04'>2022-05-04</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/154766570428563456">579</a> </div> </div> <div class="topic media topic-275383" data-prefetch="/bootstrap4/181593816311005184"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 滚动监听(Scrollspy)" target="_blank" href="/bootstrap4/181593816311005184">Bootstrap4 滚动监听(Scrollspy)</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/535">Petunia</a> <abbr class="timeago" title='2022-09-29'>2022-09-29</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/181593816311005184">367</a> </div> </div> <div class="topic media topic-275384" data-prefetch="/bootstrap4/181593822078173184"> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 Flex（弹性）布局" target="_blank" href="/bootstrap4/181593822078173184">Bootstrap4 Flex（弹性）布局</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/426">Hellens</a> <abbr class="timeago" title='2022-09-29'>2022-09-29</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/181593822078173184">239</a> </div> </div> <div class="topic media topic-275385" data-prefetch="/bootstrap4/181593831609729024"> <div class="avatar"> <a target="_blank" title="Bootstrap4 多媒体对象" href="/bootstrap4/181593831609729024"><img class="media-object avatar-48" src="/upload/images/article/2022/09/02067f05ff7a2e5ea0afbbf1cc39c5c5.jpg?x-oss-process=style/40x40" /></a> </div> <div class="infos media-body"> <div class="title media-heading"> <a title="Bootstrap4 多媒体对象" target="_blank" href="/bootstrap4/181593831609729024">Bootstrap4 多媒体对象</a> </div> <div class="info"> <a target="_blank" class="user-name" data-name="Rei" href="/user/304">Belle</a> <abbr class="timeago" title='2022-09-29'>2022-09-29</abbr> </div> </div> <div class="count media-right"> <a class="state-false" href="/bootstrap4/181593831609729024">1008</a> </div> </div> </div> </div> </div> <div class="sidebar col-lg-3" id="sideright"> <div class="card"> <div class="card-body"> <a class="btn btn-primary btn-block" href="/user/tougao">我要提问</a> </div> </div> <div class="card"> <script src="/upload/common/right.js"></script> </div> <div class="card"> <h3 class="card-header">致谢</h3> <div class="card-body"> <p><b>帮助他人，成就自己。</b></p> <p>人生最大成功就是伸出热情而温暖的双手，尽自己所能去帮助身边的每一个人，只要无私的奉献，就会收获到美好的生活。</p> <p>1024问感谢每一位朋友的帮助和支持。</p> 软件开发网提供编程的基础软件技术培训教程,软件开发编程实例讲解Go,Node,HTML,CSS,Javascript,Python,Java,Ruby,C,PHP,MySQL等软件开发编程语言以及数据开发的基础知识，也提供大量的软件开发在线实例、从入门到精通就在1024问。 </div> </div> <div class="card"> <div class="card-body"> <div id="link"> <a href="https://www.pcbaby.cn/" target="_blank" >育儿网</a> <a href="https://www.wys.net/" target="_blank" >微养生</a> <a href="https://www.qqx.com/" target="_blank" >全球行</a> <a href="https://www.msj.com/" target="_blank" >美食街</a> <a href="http://www.baoerle.com/" target="_blank" >育儿</a> <a href="https://www.3meishi.com/" target="_blank" >菜谱大全</a> <a href="http://www.haihua365.com/" target="_blank" >海南旅游</a> <a href="https://www.163lady.com/" target="_blank" >女性</a> <a href="http://www.bubugou.com/" target="_blank" >养狗百科</a> <a href="http://www.xingzuo8090.com/" target="_blank" >星座</a> </div> <script> document.getElementById("l"+"i"+"n"+"k").style.display = "none"; </script> <script src="/upload/common/right1.js"></script> </div> </div> </div> </div> </div> <footer class="footer" id="footer" data-turbolinks-permanent> <div class="container"> <div class="media" data-turbolinks="false"> <div class="media-body"> <div class="copyright" style="margin-left: 15px"> © 2021 1024问 MIT <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备11031391号-29</a> </div> </div> </div> </div> </footer> <div class="zoom-overlay"></div> <script src="/upload/static/js/tongji.js"></script> <script> document.getElementById("u"+"p"+"da"+"te").style.display = "none"; </script> </body> </html>