Bootstrap 表单

Bootstrap 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单布局

Bootstrap 提供了下列类型的表单布局：

垂直表单（默认）
内联表单
水平表单

垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

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

中。这是获取最佳间距所必需的。
向所有的文本元素、

和  添加 class =”<i>form-control</i>” 。</p><p><b>实例</b><br /><pre>
<code class="language-html"> </p>    <label for="name">名称</label></p>    <label for="inputfile">文件输入</label></p><p class="help-block">这里是块级帮助文本的实例。</p></p>    <label><br />      请打勾<br />    </label>  <p>  <button type="submit" class="btn btn-default">提交</button><br /></code></pre><br /></p><p>结果如下所示：</p><p><img class="alignnone size-full wp-image-892" src="https://www.easck.com/d/file/200618/20200618055410116.jpg" width="649" height="239" alt="基本表单" /></p><p><b>内联表单</b></p><p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向  标签添加 class <i>.form-inline</i>。</p><p><b>实例</b><br /><pre>
<code class="language-html"> </p>    <label class="sr-only" for="name">名称</label></p>    <label class="sr-only" for="inputfile">文件输入</label></p>    <label><br />      请打勾<br />    </label>  <p>  <button type="submit" class="btn btn-default">提交</button><br /></code></pre><br /></p><p>结果如下所示：</p><p><img class="alignnone size-full wp-image-893" src="https://www.easck.com/d/file/200618/20200618055410117.jpg" width="612" height="50" alt="内联表单" /></p><p>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。<br />使用 class <i>.sr-only</i>，您可以隐藏内联表单的标签。</p><p><b>水平表单</b></p><p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p><p>向父  元素添加 class <i>.form-horizontal</i>。<br />把标签和控件放在一个带有 class <i>.form-group</i> 的 </p> 中。<br />向标签添加 class <i>.control-label</i>。</p><p><b>实例</b><br /><pre>
<code class="language-html"> </p>    <label for="firstname" class="col-sm-2 control-label">名字</label></p></p>    <label for="lastname" class="col-sm-2 control-label">姓</label></p></p>        <label><br />          请记住我<br />        </label>      </p></p>      <button type="submit" class="btn btn-default">登录</button>    								 <div class="pagination"><a title="Page"> <b>1</b>/<b>4</b> </a>   <b>1</b> <a href="/cos/2020/0618/540251_2.shtml">2</a> <a href="/cos/2020/0618/540251_3.shtml">3</a> <a href="/cos/2020/0618/540251_4.shtml">4</a> <a href="/cos/2020/0618/540251_2.shtml">下一页</a> <a href="/cos/2020/0618/540251_4.shtml">尾页</a></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/0618/540251.shtml",
	"title": "Bootstrap 表单-易采站长站",
	"description": "Bootstrap 表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局",
	"pubDate": "2020-06-18 T 06:00:00+08:00",
	"upDate": "2020-06-18 T 06:00:00+08:00",
        "data":{
            "WebPage":{
                 "pcUrl":"https://www.easck.com/cos/2020/0618/540251.shtml",
                 "wapUrl":"https://www.easck.com/cos/2020/0618/540251.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>