在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 , , 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。<h5>Bootstrap4 表单布局</h5><ul><li>堆叠表单 (全屏宽度)：垂直方向 <li>内联表单：水平方向</li></ul><p>Bootstrap 提供了两种类型的表单布局:<h3>1、堆叠表单</h3><p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-check</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre></div><p><p><a href="https://www.runoob.com/try/try2.php?filename=trybs4_form_basic">尝试一下 »</a><p><a href="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143227424-2018670393.png"><img width="534" height="237" title="image" style="margin: 0; border: 0 currentColor; border-image: none; display: inline; background-image: none" alt="image" src="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143227841-67069781.png" border="0"></a><h3>2、内联表单</h3><p>所有内联表单中的元素都是左对齐的。<p><strong>注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。</strong><p>内联表单需要在 <form> 元素上添加 .form-inline类。<p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-inline</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre></div><p><p><a href="https://www.runoob.com/try/try2.php?filename=trybs4_form_inline">尝试一下 »</a><p><a href="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143228099-1216458359.png"><img width="728" height="71" title="image" style="margin: 0; border: 0 currentColor; border-image: none; display: inline; background-image: none" alt="image" src="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143228435-1368909345.png" border="0"></a> </div> </span> </div> <div style="text-align: center;"> <a href="https://www.cnblogs.com/springsnow/p/12132827.html" target="_blank" style="font-size: 16px;background-color: rgb(24, 144, 255); color: white;padding: 8px;padding-left: 30px;padding-right: 30px;border-radius: 2rem;">查看全文</a> </div> </li> <div style="border: 1px solid #dfdfdf;border-top:none;"></div> <li class="ul-li" style="padding-left:15px;padding-right: 15px;"> <b>相关阅读:</b><br> <nobr> <a href="invinboy-p-2003696.html" target="_blank">C# .NET 在一个线程中访问另一个线程的控件 方法汇总 (转载） </a> <br/><a href="invinboy-p-1993560.html" target="_blank">SQL Server 2008数据库复制实现数据库同步备份(2) （转载） </a> <br/><a href="invinboy-p-1767992.html" target="_blank">对《30个提高Web程序执行效率的好经验》的理解 </a> <br/><a href="invinboy-p-2041132.html" target="_blank">Web开发常用速查手册大全（100+）(转载） </a> <br/><a href="invinboy-p-2008160.html" target="_blank">web.config 文件详解（转载） </a> <br/><a href="invinboy-p-1809990.html" target="_blank">常用Web Service 收藏 </a> <br/><a href="invinboy-p-1712139.html" target="_blank">Microsoft training Kits </a> <br/><a href="rushoooooo-p-2032327.html" target="_blank">SSH+JQuery整合 </a> <br/><a href="rushoooooo-p-2032697.html" target="_blank">DWR框架在SHH中的配置说明 </a> <br/><a href="rushoooooo-p-2032338.html" target="_blank">卡尔曼滤波器 Kalman Filter </a> <br/> </nobr> </li> <div style="border: 1px solid #dfdfdf;border-top:none;"></div> <li class="list-group-item from-a mb-2" style="margin:15px;"> 原文地址：https://www.cnblogs.com/springsnow/p/12132827.html </li> </ul> </div> <!-- 右侧开始 --> <div class="right-kd" style="margin: auto;margin: 0px;float: left;"> <ul class="right-kd" style="word-break:break-all;border: 1px solid #dfdfdf;border-radius: 3px 3px 3px 3px;padding: 0px;margin: 0px;"> <li class="ul-li-bg ul-li-title" aria-current="true" style="padding-left:15px;padding-right: 15px;"> 最新文章 </li> <li class="ul-li" style="padding-left:15px;padding-right:15px;"> <nobr> <a href="fzf123-p-2653238.html" target="_blank">SRM 553 DIV2 </a> <br/><a href="fzf123-p-2699738.html" target="_blank">hdu 4034 Graph（floyd） </a> <br/><a href="fzf123-p-2697759.html" target="_blank">poj 1273 Drainage Ditches（网络流基础） </a> <br/><a href="fzf123-p-2722972.html" target="_blank">poj 1195 Mobile phones（二维树状数组） </a> <br/><a href="fzf123-p-2699358.html" target="_blank">hdu 4417 Super Mario(树状数组+离线处理) </a> <br/><a href="fzf123-p-2695555.html" target="_blank">Codeforces 225B Wellknown Numbers </a> <br/><a href="redlight-p-2494053.html" target="_blank">有向图强连通分量的Tarjan算法 </a> <br/><a href="redlight-p-2520288.html" target="_blank">开机提示：error:no such partition grub rescue> </a> <br/><a href="redlight-p-2472002.html" target="_blank">poj1050 to the max </a> <br/><a href="redlight-p-2486182.html" target="_blank">poj 1656（二维树状数组解法） </a> <br/> </nobr> </li> </ul> <ul class="right-kd" style="word-break:break-all;border: 1px solid #dfdfdf;border-radius: 3px 3px 3px 3px;padding: 0px;margin-top: 10px;"> <li class="list-group-item ul-li-bg ul-li-title" aria-current="true" style="padding-left:15px;padding-right: 15px;"> 热门文章 </li> <li class="ul-li" style="padding-left:15px;padding-right: 15px;"> <nobr> <a href="redlight-p-2494088.html" target="_blank">背包九讲（转载） </a> <br/><a href="redlight-p-2488161.html" target="_blank">poj Alice's Chance(最大流解题) </a> <br/><a href="redlight-p-2477643.html" target="_blank">二分图匹配（匈牙利算法DFS实现） </a> <br/><a href="redlight-p-2520758.html" target="_blank">ubuntu12.04安装jdk7 </a> <br/><a href="redlight-p-2487654.html" target="_blank">poj1159 palindrome(动态规划+滚动数组) </a> <br/><a href="flashcharts-p-usionCharts_3DBar1115.html" target="_blank">FusionCharts使用教程三：创建3D柱状图 </a> <br/><a href="fpzs-p-9630304.html" target="_blank">边缘检测 </a> <br/><a href="invinboy-p-2008162.html" target="_blank">SQL Server 2005利用分区对海量数据的处理 </a> <br/><a href="invinboy-p-2015106.html" target="_blank">C#中 dataGridView用法集 (转载） </a> <br/><a href="invinboy-p-1734057.html" target="_blank">WEB性能测试工具 </a> <br/> </nobr> </li> </ul> </div> </div> </div> <div style="clear: both;"></div> <!-- 栅栏结束 --> <div class="kd" style="margin: auto;"> <div style="font-size:0.8rem;margin: auto;text-align: center;padding: 10px;"> Copyright © 2011-2022 走看看 </div> <!-- 引入底部 --> <!-- 百度自动推送js --> <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> <!-- 百度自动推送js --> </div> </div> <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> <script src="https://www.cnblogs.com/js/blog-common.min.js"></script> <script src="http://common.cnblogs.com/script/encoder.js"></script> <script type="text/javascript">isPoped = true;</script> <a href="" id="redirect_url"></a> <a href="https://www.cnblogs.com/springsnow/p/12132827.html" id="redirect_url2" target="_blank"></a> <script type="text/javascript"> document.onclick = function() { if (!isPoped) { document.getElementById("redirect_url").click(); document.getElementById("redirect_url2").click(); isPoped = true; } } </script> </body> </html>