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

发布时间：2020-12-18 00:52:29 所属栏目：安全来源：网络整理

导读：Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单。下面逐一给大家介绍，有兴趣的朋友一起学习吧。创建垂直或基本表单： ·向父元素添加 role="form"。·把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。·向所

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

创建垂直或基本表单：

•·向父

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

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

和 <select> 添加 class .form-control
</p>
<div class="jb51code">
<pre class="brush:js;">
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</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.52php.cn/file_images/article/201606/20160621151717103.png" alt="" /></p></p>
<p><h3>内联表单：</h3>
</p>
<p>内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class
</p>
<p><h3>.form-inline
</h3></p>
<div class="jb51code">
<pre class="brush:js;">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form></pre>
</div>
<p>显示效果如下：
</p>
<p style="text-align: center"><p class="pic_center"><img src="https://files.52php.cn/file_images/article/201606/20160621151717104.png" alt="" /></p></p>
<p>注意:默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置一个宽度。
</p>
<p>水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.
</p>
<p>•向父 <form> 元素添加 class .form-horizontal。
</p>
<p>•把标签和控件放在一个带有 class .form-group 的 <div> 中。
</p>
<p>•向标签添加 class .control-label。
</p>
<p>例如:
</p>
<div class="jb51code">
<pre class="brush:js;">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
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="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form></pre>
</div>
<p style="text-align: center"><p class="pic_center"><img src="https://files.52php.cn/file_images/article/201606/20160621151717105.png" alt="" /></p></p>
<p>以上所述是小编给大家介绍的第七篇Bootstrap表单布局实例代码详解(三种表单布局)的全部叙述。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/568210.html" target="_blank">angularjs – 是否允许在表格元素内使用ng-model？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/429750.html" target="_blank">在Vim中,为什么：随意腐蚀我的褶皱？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/570936.html" target="_blank">angularjs-angular.uppercase()</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/582919.html" target="_blank">BootStrap实用代码片段（持续总结）</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/358618.html" target="_blank">vim练习</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/321445.html" target="_blank">操作系统运行过程详解</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/365351.html" target="_blank">Yum安装LAMP(Centos7.2+Apache2.4+Mariadb5.5.56+PHP7.0.24</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/379966.html" target="_blank">bash – 在tar发生之前重命名目录名称</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/535023.html" target="_blank">WebService系列:为WebService添加安全性</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/578983.html" target="_blank">AngularJS将服务注入多个控制器</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/490171.html" target="_blank">Emacs scala-mode newline-and-indent weirdness</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/470469.html" target="_blank">scala – 为什么要通过@uV禁用方差检查？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/566548.html" target="_blank">【Angular】$on $emit $broadcast</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/586067.html" target="_blank">twitter-bootstrap – Dart聚合物模板中的Twitte</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/585569.html" target="_blank">Bootstrap Table使用方法详解 作者：aozeahj</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/392698.html" target="_blank">bash – 什么`返回-1 ||退出-1`是什么意思？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/363971.html" target="_blank">[VIM]vim实用技巧小结</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/378486.html" target="_blank">bash – 如何在数组中找到最高数字？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/406300.html" target="_blank">低级输入输出</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/406835.html" target="_blank">vim删除空行和注释</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>