Bootstrap三种表单布局的使用方法

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

导读：Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单创建垂直或基本表单： ·向父元素添加 role="form"。·把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。·向所有的文本元素、和添加 class .form-control 内

Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单

创建垂直或基本表单：

•·向父

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

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

和 <select> 添加 class .form-control
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
 <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/2016062114430819.png" /></p></p>
<p><h3>内联表单：
</h3>内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
 <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/2016062114430820.png" /></p></p>
<p>注意:默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置一个宽度。
</p>
<p><h3>水平表单:</h3>和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.
•向父 <form> 元素添加 class .form-horizontal。
•把标签和控件放在一个带有 class .form-group 的 <div> 中。
•向标签添加 class .control-label。
例如:
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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>显示效果如下：
</p>
<p><p class="pic_center"><img  src="https://files.52php.cn/file_images/article/201606/2016062114430821.png" /></p></p>
<p>如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：</p>
<p></p>
<p></p>
<p></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</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/544468.html" target="_blank">实战WebService III: REST篇(基于php)</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/587192.html" target="_blank">BootStrap Table 设置height表头与内容无法对齐的问题</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/423341.html" target="_blank">vim – 如何设置Syntastic作为python3检查器而不是python2</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/581287.html" target="_blank">bootstrap, boosting, bagging 几种方法的联系</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/574422.html" target="_blank">Firebase作为AngularJS的后端</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/423138.html" target="_blank">有没有办法在Vim脚本中使用两个自定义的完整函数？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/491631.html" target="_blank">scala – ssl – 错误自签名证书获取链</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/579866.html" target="_blank">从Angular中的子组件调用父组件函数</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/495545.html" target="_blank">组织多个scala相关的sbt&amp;git项目 – 最佳实践建议</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/534692.html" target="_blank">WebService for Android</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/20201217/571592.html" target="_blank">angularjs 坑 小结</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/530508.html" target="_blank">WebService 概念入门</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/381174.html" target="_blank">本机shell命令设置为从XML中提取节点值</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/494363.html" target="_blank">scala – 我可以从setFoo和getFoo生成foo_ =和fo</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/333490.html" target="_blank">《数据结构》实验一：VC编程工具的灵活使用心得</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/376566.html" target="_blank">bash – 对于base来说,值太大了(错误标记是“092</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/378350.html" target="_blank">在bash脚本中测试stdout和stderr重定向</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/583068.html" target="_blank">Bootstrap 第26章 关于</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/576762.html" target="_blank">angularjs – ng-tags-input,如何禁用用户输入？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/554209.html" target="_blank">angularjs – 两个指令(不是嵌套在HTML中)如何相</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>