Bootstrap简单表单显示学习笔记

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

导读：表单布局基本的表单结构时BootStrap自带的，创建基本表单的步骤如下： 1、向父元素添加role = “form”；2、为了获取最佳的间距，把标签和控件放在一个div.form-group中,div放在父form下；3、向所有的文本元素、和添加.form-control Bootstrap 模板 for

表单布局

基本的表单结构时BootStrap自带的，创建基本表单的步骤如下：

1、向父
元素添加role = “form”； 2、为了获取最佳的间距，把标签和控件放在一个div.form-group中,div放在父form下； 3、向所有的文本元素、和<select>添加.form-control </p> <div class="jb51code"> <pre class="brush:xhtml;"> <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8">  <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p><form role="form"><br /> <div class="form-group"><br /> <label for="name">名称</label><br /> <input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称"></p> </div> </form>  <p><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script></p>  <p><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></p> </body> </html> </pre> </div> <p>添加了form-controlClass的input会和label分为两行，并且获得焦点时会有蓝色的边框样式。</p> <p><span style="color: #800000"><h3>内联表单</h3> </p> <p>内联表单中所有的元素都是内联的，标签都是并排的</p> <p>1、向<form>标签中添加classfrom-inline; 2、每个表单需要被包含在div.form-group，checkbox可以包含在div.checkbox,radio可以包含在div.radio; 3、默认情况下，bootstrap中的input、select和textarea有100%宽度，使用内联表单时，可以设置表单控件的宽度来设置; 4、对标签描述添加sr-only可以隐藏标签描述。 </p> <div class="jb51code"> <pre class="brush:xhtml;"> <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8">  <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p><form class="form-inline" role="form"><br /> <div class="form-group"><br /> <label class = "sr-only" for="name">名称</label><br /> <input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称" style="width: 170px"></p> </div> <div class="form-group"> <input type="file" name="inputfile" style="width: 170px"> </div> <label> <input type="checkbox" class="checkbox">请打勾 </label> </form>  <p><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script></p>  <p><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></p> </body> </html> </pre> </div> <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/566960.html" target="_blank">angularjs – ng-include在angular js中的加载完成</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/568292.html" target="_blank">angularjs – 多个指令[myPopup,myDraggable]要求新的/隔离</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/331628.html" target="_blank">【数据结构】线性表</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/407764.html" target="_blank">玩转vim编辑器</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/564754.html" target="_blank">angularjs – 以角度上传多个文件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/379758.html" target="_blank">Unix|Linux系列知识(1)——用户态与内核态</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/492099.html" target="_blank">scala – 强制特性实现方法</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/583383.html" target="_blank">bootstrap table使用小记</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/584887.html" target="_blank">nodejs分页设计配合bootstrap-paginator</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/578852.html" target="_blank">angular – 如何在ngx-bootstrap accordion-group标题中添加</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/539712.html" target="_blank">开发WebService两种开源工具CXF和Axis2的比较</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/423058.html" target="_blank">unix – write()和printf()之间的区别</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/555011.html" target="_blank">AngularJS标准Web业务流程开发框架—1.AngularJS</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/380283.html" target="_blank">【php安装扩展报错】-bash: pecl: command not f</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/429949.html" target="_blank">shell regex：提取价格</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/569622.html" target="_blank">angularjs – 服务,指令和模块之间的差异</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/376663.html" target="_blank">如何在不提供shell访问权限的情况下为站点设置SF</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/496029.html" target="_blank">算法 – 从两个字符串中创建一个唯一的哈希</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/479082.html" target="_blank">斯卡拉 – 为什么未来的恢复没有捕获例外？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/559260.html" target="_blank">在Angular 4中获取当前路径路径名称的最简单方法</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>