详解Bootstrap创建表单的三种格式（一）

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

导读：在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基

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

垂直或基本表单(display:block;)

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

向父
元素添加 role="form"。

把标签和控件放在一个带有 class .form-group 的
中。这是获取最佳间距所必需的。

向所有的文本元素、和 <select> 添加 class .form-control。</p> <div class="jb51code"> <pre class="brush:js;"> <!doctype html> <html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="关键词一，关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width,initial-scale = 1 "> <title>BootstrapDemo</title>  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head> <body style="padding: 20px;"> <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> <form role = "form"> <div class = "form-group"> <label for = "name">姓名</label> <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> </div> <div class = "form-group"> <label for = "tel">电话号码</label> <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> </div> <div class = "form-group"> <label for = "idCard">请上传身份证</label> <input type = "file" id = "idCard"></input> </div> <div class = "form-group"> <label for = "profession">选择职业</label> <select id = "profession" class = "form-control"> <option>软件工程师</option> <option>测试工程师</option> <option>硬件工程师</option> <option>质量分析师</option> </select> </div> <div class="form-group"> <button type = "submit" class="btn-info btn-lg">提交</button> </div> </form> </div> </body> </html></pre> </div> <p>效果如下：</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.52php.cn/file_images/article/201601/201601041020031.png" /></p></p> <p>如果我们将select的form-control去掉，并给input type = "file"加上form-control，看看效果如何。</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.52php.cn/file_images/article/201601/201601041020042.png" /></p></p> <p>是不是能看出和上面效果的区别了呢？这样您大概明白form-control的作用了，它是设置外围的边框效果，包括宽、高、获取焦点时form的样式。</p> <p><h3>内联表单（全部在同一行，display为inline-block）</h3></p> <p>如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。</p> <p>因为head部分的内容都是一样的，所以我们只列出body部分的内容。</p> <div class="jb51code"> <pre class="brush:js;"> <body style="padding: 20px;"> <form role = "form" class="form-inline"> <div class = "form-group"> <label for = "name">姓名</label> <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> </div> <div class = "form-group"> <label for = "tel">电话号码</label> <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> </div> <div class = "form-group"> <label for = "idCard">请上传身份证</label> <input type = "file" id = "idCard"></input> </div> <div class = "form-group"> <label for = "profession">选择职业</label> <select id = "profession" class = "form-control"> <option>软件工程师</option> <option>测试工程师</option> <option>硬件工程师</option> <option>质量分析师</option> </select> </div> <div class="form-group"> <button type = "submit" class="btn-info btn-lg">提交</button> </div> </form> </body> </pre> </div> <p>显示效果：</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.52php.cn/file_images/article/201601/201601041020043.png" /></p></p> <p>默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用水平表单时，您需要在表单控件上设置一个宽度。 </p> <p>使用 class .sr-only，可以隐藏内联表单的标签。</p> <p>注：sr-only是展示给屏幕阅读器，而非是普通的读者看的。</p> <p>其它元素在form的class为form-inline时，display为inLine-block;但是input tyoe = "file"却仍是display:block，可以看出其布局是有问题的，此时可以单独设置其display为inline-block;</p> <p><h3>水平表单(label和input等表单元素在同一行)</h3></p> <p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p> <p> 1、向父 <form> 元素添加 class .form-horizontal。 2、把标签和控件放在一个带有 class .form-group 的 <div> 中。 3、向标签添加 class .control-label。 4、设置label和其兄弟div的宽度（因为input等默认宽度是100%）。</p> <div class="jb51code"> <pre class="brush:js;"> <body style="padding: 20px;"> <form role = "form" class="form-horizontal"> <div class = "form-group"> <label class="col-sm-2 control-label" for = "name">姓名</label> <div class="col-sm-2"> <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> </div> </div> <div class = "form-group"> <label class="col-sm-2 control-label" for = "tel">电话号码</label> <div class="col-sm-2"> <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> </div> </div> <div class = "form-group"> <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label> <div class="col-sm-2"> <input type = "file" id = "idCard" style="display:inline-block;"></input> </div> </div> <div class = "form-group"> <label class="col-sm-2 control-label" for = "profession">选择职业</label> <div class="col-sm-2"> <select id = "profession" class = "form-control"> <option>软件工程师</option> <option>测试工程师</option> <option>硬件工程师</option> <option>质量分析师</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-2 col-sm-offset-2"> <button type = "submit" class="btn-info btn-lg">提交</button> </div> </div> </form> </body> </pre> </div> <p>效果： </p> <p style="text-align: center"><p class="pic_center"><img src="https://files.52php.cn/file_images/article/201601/201601041020044.png" /></p></p> <p>以上内容给大家介绍了Bootstrap创建表单的相关内容，希望大家喜欢。</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/20201216/527072.html" target="_blank">CXF_WebService实现思路</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/569494.html" target="_blank">angular - 收藏集 - 掘金</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/391583.html" target="_blank">从字符串中删除两个子字符串</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/560301.html" target="_blank">angularjs – 错误：[ngModel：nonassign]表达式是不可分配</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/585723.html" target="_blank">Bootstrap学习笔记 - Images</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/579759.html" target="_blank">Angular2,如何导入visjs</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/555850.html" target="_blank">Angular 5和CSS Grid – 无法找到网格区域 – 警告</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/440265.html" target="_blank">linux – 添加新的veth接口时运行脚本</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/568255.html" target="_blank">Angularjs – 隐藏内容,直到DOM加载</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/568790.html" target="_blank">ref总结</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/568040.html" target="_blank">用得上的Angular库</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/379702.html" target="_blank">在UNIX下删除C文件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/554348.html" target="_blank">AngularJs中的类操作和实例操作有什么区别？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/380582.html" target="_blank">shell脚本字符串截取的8种方法</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/584109.html" target="_blank">Bootstrap table 刷新回调陷入死循环</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/470589.html" target="_blank">scala – Slick：使用获取列名来查询多个表/数据</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/535683.html" target="_blank">Update: example of webserver with webservice</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/572328.html" target="_blank">angular2 组件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/580709.html" target="_blank">vue项目踩坑-引入bootstrap</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/586515.html" target="_blank">Cakestp ClassRegistry :: init in bootstrap</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>