Bootstrap4 表单
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 , , 和<br /> elements<br />在使用 .form-control 类的情况下，宽度都是设置为 100%。</p><p><b>Bootstrap4 表单布局</b></p><p> 堆叠表单 (全屏宽度)：垂直方向<br /> 内联表单：水平方向</p><p>Bootstrap 提供了两种类型的表单布局:</p><p><b><br /><b>堆叠表单</b></p><p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：</p><p><b>实例</b><br /><pre> <code class="language-html"></p> <label for="email">Email address:</label></p> <label for="pwd">Password:</label></p> <label class="form-check-label"><br /> Remember me<br /> </label> <p> <button type="submit" class="btn btn-primary">Submit</button><br /></code></pre></p><p><b><br /><b>内联表单</b></p><p>所有内联表单中的元素都是左对齐的。</p><p><strong>注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。</strong></p><p>内联表单需要在 元素上添加 .form-inline类。 </p><p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：</p><p><b>实例</b><br /><pre> <code class="language-html"></p><p> <label for="email">Email address:</label></p><p> <label for="pwd">Password:</label></p> <label class="form-check-label"><br /> Remember me<br /> </label> <p> <button type="submit" class="btn btn-primary">Submit</button><br /></code></pre></p><p></p> <div class="pagination"></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0306/1095808.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-06/20230306132811984.jpg" src="https://www.easck.com/d/file/p/2023/03-06/20230306132811984.jpg"></div> <div class="txtInfo"><h3>鲁大师驱动备份在哪 鲁大师驱动下载位置说明</h3><div class="extr clearfix"><p><span class="time fl">2023-03-06</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094234.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/20230227095920578.jpg" src="https://www.easck.com/d/file/p/2023/02-27/20230227095920578.jpg"></div> <div class="txtInfo"><h3>应用宝怎么连接不上手机 应用宝连接不上手机解决方法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0226/1094157.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-26/202302261632531555.jpg" src="https://www.easck.com/d/file/p/2023/02-26/202302261632531555.jpg"></div> <div class="txtInfo"><h3>迅雷7怎么设置下载完自动关机</h3><div class="extr clearfix"><p><span class="time fl">2023-02-26</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093264.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="/e/data/images/notimg.gif" src="/e/data/images/notimg.gif"></div> <div class="txtInfo"><h3>如何刻录dv/|如何刻录dvd光盘</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">7万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093000.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040621y16.jpg" src="http://hard.onlinedown.net/images/ys/20040621y16.jpg"></div> <div class="txtInfo"><h3>盈通：NEC 8X DVD刻录机狂降400！再送大礼！</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0216/1091546.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-16/202302161623362998.jpg" src="https://www.easck.com/d/file/p/2023/02-16/202302161623362998.jpg"></div> <div class="txtInfo"><h3>编程语言排行榜2020年9月 TIOBE编程语言排行榜2020年</h3><div class="extr clearfix"><p><span class="time fl">2023-02-16</span></p><p><span class="time fr">7万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086834.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301171351311643.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301171351311643.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之照片披上面纱，打造MV魅惑冷色调</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086772.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/0e/b3/1086772.jpg" src="https://www.easck.com/d/file/ap/0e/b3/1086772.jpg"></div> <div class="txtInfo"><h3>k8s编排之DaemonSet知识点详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0104/1083551.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-04/202301041232501404.jpg" src="https://www.easck.com/d/file/p/2023/01-04/202301041232501404.jpg"></div> <div class="txtInfo"><h3>酷我k歌怎么下载mv 酷我k歌mv怎么下载</h3><div class="extr clearfix"><p><span class="time fl">2023-01-04</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2022/1229/1082546.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2022/12-29/202212291807052549.jpg" src="https://www.easck.com/d/file/p/2022/12-29/202212291807052549.jpg"></div> <div class="txtInfo"><h3>QQ无法定位程序输入点怎么办 QQ无法定位程序输入点</h3><div class="extr clearfix"><p><span class="time fl">2022-12-29</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0306/1095808.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-06/20230306132811984.jpg" src="https://www.easck.com/d/file/p/2023/03-06/20230306132811984.jpg"></div> <div class="txtInfo"><h3>鲁大师驱动备份在哪 鲁大师驱动下载位置说明</h3><div class="extr clearfix"><p><span class="time fl">2023-03-06</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094234.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/20230227095920578.jpg" src="https://www.easck.com/d/file/p/2023/02-27/20230227095920578.jpg"></div> <div class="txtInfo"><h3>应用宝怎么连接不上手机 应用宝连接不上手机解决方法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0226/1094157.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-26/202302261632531555.jpg" src="https://www.easck.com/d/file/p/2023/02-26/202302261632531555.jpg"></div> <div class="txtInfo"><h3>迅雷7怎么设置下载完自动关机</h3><div class="extr clearfix"><p><span class="time fl">2023-02-26</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093264.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="/e/data/images/notimg.gif" src="/e/data/images/notimg.gif"></div> <div class="txtInfo"><h3>如何刻录dv/|如何刻录dvd光盘</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">7万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093000.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040621y16.jpg" src="http://hard.onlinedown.net/images/ys/20040621y16.jpg"></div> <div class="txtInfo"><h3>盈通：NEC 8X DVD刻录机狂降400！再送大礼！</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0216/1091546.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-16/202302161623362998.jpg" src="https://www.easck.com/d/file/p/2023/02-16/202302161623362998.jpg"></div> <div class="txtInfo"><h3>编程语言排行榜2020年9月 TIOBE编程语言排行榜2020年</h3><div class="extr clearfix"><p><span class="time fl">2023-02-16</span></p><p><span class="time fr">7万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086834.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301171351311643.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301171351311643.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之照片披上面纱，打造MV魅惑冷色调</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086772.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/0e/b3/1086772.jpg" src="https://www.easck.com/d/file/ap/0e/b3/1086772.jpg"></div> <div class="txtInfo"><h3>k8s编排之DaemonSet知识点详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0104/1083551.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-04/202301041232501404.jpg" src="https://www.easck.com/d/file/p/2023/01-04/202301041232501404.jpg"></div> <div class="txtInfo"><h3>酷我k歌怎么下载mv 酷我k歌mv怎么下载</h3><div class="extr clearfix"><p><span class="time fl">2023-01-04</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2022/1229/1082546.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2022/12-29/202212291807052549.jpg" src="https://www.easck.com/d/file/p/2022/12-29/202212291807052549.jpg"></div> <div class="txtInfo"><h3>QQ无法定位程序输入点怎么办 QQ无法定位程序输入点</h3><div class="extr clearfix"><p><span class="time fl">2022-12-29</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0619/546298.shtml", "title": "Bootstrap4 表单-易采站长站", "description": "Bootstrap4 表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单元素 , , 和 elements 在使用 .form-control 类的", "pubDate": "2020-06-19 T 08:31:04+08:00", "upDate": "2020-06-19 T 08:31:04+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0619/546298.shtml", "wapUrl":"https://www.easck.com/cos/2020/0619/546298.shtml", "fromSrc":"易采站长站" } } } </script> <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> </body> </html>
