Bootstrap表单布局样式源代码

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

创建垂直或基本表单：

•·向父

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

中。这是获取最佳间距所必需的。 •·向所有的文本元素 、 和 <select> <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-control </p> <p><h3>内联表单： </h3>内联表单中所有元素都向左对齐，<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>并排，要创建内联表单，需要在form<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>中加入class.form-inline </p> <p><h3>水平表单:</h3>和其它两种表单有所不同,要创建水平表单需要遵循以下步骤. •向父 <form> 元素<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-horizontal。 •把<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>和控件放在<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>带有 class .form-group 的 <div> 中。 •向<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .control-label。 </p> <p>Bootstrap表单布局样式如下</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201607/201674160046608.jpg?20166416059" /></p></p> <p>实现<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <form class="form-horizontal" role="form"> <fieldset> <legend><a href="https://www.jb51.cc/tag/peizhishujuyuan/" target="_blank" class="keywords">配置数据源</a></legend> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_host">主机名</label> <div class="col-sm-4"> <input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/> </div> <label class="col-sm-2 control-label" for="ds_name"><a href="https://www.jb51.cc/tag/shujuku/" target="_blank" class="keywords">数据库</a>名</label> <div class="col-sm-4"> <input class="form-control" id="ds_name" type="text" placeholder="msh"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_username"><a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a></label> <div class="col-sm-4"> <input class="form-control" id="ds_username" type="text" placeholder="root"/> </div> <label class="col-sm-2 control-label" for="ds_password">密码</label> <div class="col-sm-4"> <input class="form-control" id="ds_password" type="password" placeholder="123456"/> </div> </div> </fieldset> <fieldset> <legend>选择相关表</legend> <div class="form-group"> <label for="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledSelect" class="col-sm-2 control-label">表名</label> <div class="col-sm-10"> <select id="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledSelect" class="form-control"> <option><a href="https://www.jb51.cc/tag/jinzhi/" target="_blank" class="keywords">禁止</a>选择</option> <option><a href="https://www.jb51.cc/tag/jinzhi/" target="_blank" class="keywords">禁止</a>选择</option> </select> </div> </div> </fieldset> <pre><code> <fieldset> <legend>字段名</legend> <div class="form-group"&gt; <label for="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledSelect" class="col-sm-2 control-label"&gt;表名</label> <div class="col-sm-10"&gt; <select id="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledSelect" class="form-control"&gt; <option><a href="https://www.jb51.cc/tag/jinzhi/" target="_blank" class="keywords">禁止</a>选择</option> <option><a href="https://www.jb51.cc/tag/jinzhi/" target="_blank" class="keywords">禁止</a>选择</option> </select> </div> </div> </fieldset> </form></code></pre> </pre> </div> <p>如果大家还想深入学习，可以点击<a target="_blank" href="//www.jb51.cc/article/84087.htm">这里</a>进行学习，再为大家附一个精彩的专题：<a target="_blank" href="//www.jb51.cc/Special/334.htm">Bootstrap学习教程</a></p> <p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/bootstrapbujuyangshi/" class="tag_link" target="_blank">bootstrap布局样式</a><a href="https://m.jb51.cc/tag/bootstrapbiaodan/" class="tag_link" target="_blank">bootstrap表单</a><a href="https://m.jb51.cc/tag/bootstrapbiaodanbuju/" class="tag_link" target="_blank">bootstrap表单布局</a><a href="https://m.jb51.cc/tag/bootstrapbiaodanbujuyangshi/" class="tag_link" target="_blank">bootstrap表单布局样式</a></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738675.html" title="Bootstrip HTML 查询搜索常用格式模版">Bootstrip HTML 查询搜索常用格式模版</a> </div> <div class="summary">Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738674.html" title="如何在按钮上加红色数字">如何在按钮上加红色数字</a> </div> <div class="summary">如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738673.html" title="让两个按钮左右排列">让两个按钮左右排列</a> </div> <div class="summary">要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/4738672.html" title="status能否设置为布尔值类型，前端采用复选框形式">status能否设置为布尔值类型，前端采用复选框形式</a> </div> <div class="summary">是的，可以将status设置为布尔类型，这样可以在前端使用复选...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2022/10-08/13/3873491c2cd9a95fadbb4d45bbe243d6.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/bootstrap/3764763.html" title="Bootstrap 按钮总结">Bootstrap 按钮总结</a> </div> <div class="summary">前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/bootstrap/3764762.html" title="Python学习-day52-bootstrap">Python学习-day52-bootstrap</a> </div> <div class="summary">起步导入：<linkrel="stylesheet"href="b...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <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> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>