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

•·向所有的文本元素 、 和 <select> 添加 class .form-control</p><p> </p> <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> <p style="text-align: center"><img alt="" src="http://files.jb51.net/file_images/article/201606/2016062114430819.png" /></p> <p><strong>内联表单：</p><p> </strong>内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline</p><p> </p> <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> <p>显示效果如下：</p><p> </p> <p style="text-align: center"><img alt="" src="http://files.jb51.net/file_images/article/201606/2016062114430820.png" /></p> <p>注意:默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置一个宽度。</p><p> </p> <p><strong>水平表单:</strong>和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.</p><p> •向父 <form> 元素添加 class .form-horizontal。</p><p> •把标签和控件放在一个带有 class .form-group 的 <div> 中。</p><p> •向标签添加 class .control-label。</p><p> 例如:</p><p> </p> <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> <p>显示效果如下：</p><p> </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201606/2016062114430821.png" /></p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。</p></div> <div class="prev-next"> <div class="prev">上一篇：<a href="/javascript/skill/item-3245.html">第三篇Bootstrap网格基础</a></div><div class="next">下一篇：<a href="/javascript/skill/item-3241.html">第二篇Bootstrap起步</a></div> </div> </div> <!--广告 start--> <div class="qf-ads"><ul class="qf-ads-nUl-12"><li><a href="" target="_blank"><img src="/uploads/images/ads/202306/20230610084915300842.jpg"></a><a href="" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> <div class="qf-article-container"> <div class="qf-cms-name"> <h3>相关推荐</h3> </div> <div class="qf-cms-container"> <ul class="article-list-relationship"> <li><a href="/javascript/skill/item-31277.html" title="document.domain会导致ueditor拒绝访问解决办法" target="_blank">document.domain会导致ueditor拒绝访问解决办法</a> </li> <li><a href="/javascript/skill/item-31224.html" title="Javascript实现代码折叠功能" target="_blank">Javascript实现代码折叠功能</a> </li> <li><a href="/javascript/skill/item-31223.html" title="深入浅出ES6之let和const命令" target="_blank">深入浅出ES6之let和const命令</a> </li> <li><a href="/javascript/skill/item-31222.html" title="PhotoSwipe异步动态加载图片方法" target="_blank">PhotoSwipe异步动态加载图片方法</a> </li> <li><a href="/javascript/skill/item-31221.html" title="相册展示PhotoSwipe.js插件实现" target="_blank">相册展示PhotoSwipe.js插件实现</a> </li> <li><a href="/javascript/skill/item-31220.html" title="移动端点击图片放大特效PhotoSwipe.js插件实现" target="_blank">移动端点击图片放大特效PhotoSwipe.js插件实现</a> </li> <li><a href="/javascript/skill/item-31219.html" title="手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现" target="_blank">手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现</a> </li> <li><a href="/javascript/skill/item-31218.html" title="手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果" target="_blank">手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果</a> </li> <li><a href="/javascript/skill/item-31217.html" title="手机图片预览插件photoswipe.js使用总结" target="_blank">手机图片预览插件photoswipe.js使用总结</a> </li> <li><a href="/javascript/skill/item-31213.html" title="select隐藏选中值对应的id,显示其它id的简单实现方法" target="_blank">select隐藏选中值对应的id,显示其它id的简单实现方法</a> </li> <li><a href="/javascript/skill/item-31212.html" title="Js得到radiobuttonlist选中值的两种方法(推荐)" target="_blank">Js得到radiobuttonlist选中值的两种方法(推荐)</a> </li> <li><a href="/javascript/skill/item-31211.html" title="总结JavaScript的正则与其他语言的不同之处" target="_blank">总结JavaScript的正则与其他语言的不同之处</a> </li> <li><a href="/javascript/skill/item-31210.html" title="js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法" target="_blank">js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法</a> </li> <li><a href="/javascript/skill/item-31208.html" title="JS实现图片延迟加载并淡入淡出效果的简单方法" target="_blank">JS实现图片延迟加载并淡入淡出效果的简单方法</a> </li> <li><a href="/javascript/skill/item-31207.html" title="JavaScript中闭包之浅析解读(必看篇)" target="_blank">JavaScript中闭包之浅析解读(必看篇)</a> </li> <li><a href="/javascript/skill/item-31204.html" title="微信JS接口大全" target="_blank">微信JS接口大全</a> </li> <li><a href="/javascript/skill/item-31203.html" title="JS解决iframe之间通信和自适应高度的问题" target="_blank">JS解决iframe之间通信和自适应高度的问题</a> </li> <li><a href="/javascript/skill/item-31202.html" title="浅析Javascript ES6新增值比较函数Object.is" target="_blank">浅析Javascript ES6新增值比较函数Object.is</a> </li> <li><a href="/javascript/skill/item-31201.html" title="js图片上传前预览功能（兼容所有浏览器）" target="_blank">js图片上传前预览功能（兼容所有浏览器）</a> </li> <li><a href="/javascript/skill/item-31199.html" title="前端程序员必须知道的高性能Javascript知识" target="_blank">前端程序员必须知道的高性能Javascript知识</a> </li> </ul> </div> </div> </div> <div class="sidebar"> <!--广告 start--> <div class="qf-ads"><ul class="qf-ads-nUl-9"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231605989299.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> <div class="qf-cms-name"> <h3>文章分类</h3> </div> <div class="qf-cms-container"> <div class="qf-category-list"> <a href="/javascript/formeffect/index.html" title="表单特效" target="_blank">表单特效</a> <a href="/javascript/effects/index.html" title="网页特效" target="_blank">网页特效</a> <a href="/javascript/ads/index.html" title="广告代码" target="_blank">广告代码</a> <a href="/javascript/hacker/index.html" title="黑客性质" target="_blank">黑客性质</a> <a href="/dom/index.html" title="DOM" target="_blank">DOM</a> <a href="/javascript/node/index.html" title="node.js" target="_blank">node.js</a> <a href="/javascript/other/index.html" title="js其它" target="_blank">js其它</a> <a href="/javascript/skill/index.html" title="javascript技巧" target="_blank">javascript技巧</a> <a href="/javascript/basic/index.html" title="基础知识" target="_blank">基础知识</a> <a href="/javascript/class/index.html" title="javascript类库" target="_blank">javascript类库</a> </div> </div> <div class="qf-cms-name"> <h3>热门关键词</h3> </div> <div class="qf-cms-container"> <div class="qf-tag-list"> <a href="https://zhannei.baidu.com/cse/site?q=雪佛兰&cc=fuphp.cn&ie=utf-8" title="雪佛兰" target="_blank">雪佛兰</a> <a href="https://zhannei.baidu.com/cse/site?q=通用&cc=fuphp.cn&ie=utf-8" title="通用" target="_blank">通用</a> <a href="https://zhannei.baidu.com/cse/site?q=奢华&cc=fuphp.cn&ie=utf-8" title="奢华" target="_blank">奢华</a> <a href="https://zhannei.baidu.com/cse/site?q=劳斯莱斯&cc=fuphp.cn&ie=utf-8" title="劳斯莱斯" target="_blank">劳斯莱斯</a> <a href="https://zhannei.baidu.com/cse/site?q=旗舰版&cc=fuphp.cn&ie=utf-8" title="旗舰版" target="_blank">旗舰版</a> <a href="https://zhannei.baidu.com/cse/site?q=64位&cc=fuphp.cn&ie=utf-8" title="64位" target="_blank">64位</a> <a href="https://zhannei.baidu.com/cse/site?q=收藏夹&cc=fuphp.cn&ie=utf-8" title="收藏夹" target="_blank">收藏夹</a> <a href="https://zhannei.baidu.com/cse/site?q=解调器&cc=fuphp.cn&ie=utf-8" title="解调器" target="_blank">解调器</a> <a href="https://zhannei.baidu.com/cse/site?q=网卡&cc=fuphp.cn&ie=utf-8" title="网卡" target="_blank">网卡</a> <a href="https://zhannei.baidu.com/cse/site?q=网线&cc=fuphp.cn&ie=utf-8" title="网线" target="_blank">网线</a> <a href="https://zhannei.baidu.com/cse/site?q=分辨率&cc=fuphp.cn&ie=utf-8" title="分辨率" target="_blank">分辨率</a> <a href="https://zhannei.baidu.com/cse/site?q=家电&cc=fuphp.cn&ie=utf-8" title="家电" target="_blank">家电</a> <a href="https://zhannei.baidu.com/cse/site?q=4k&cc=fuphp.cn&ie=utf-8" title="4k" target="_blank">4k</a> <a href="https://zhannei.baidu.com/cse/site?q=显示器&cc=fuphp.cn&ie=utf-8" title="显示器" target="_blank">显示器</a> <a href="https://zhannei.baidu.com/cse/site?q=header&cc=fuphp.cn&ie=utf-8" title="header" target="_blank">header</a> <a href="https://zhannei.baidu.com/cse/site?q=USER_AGENT&cc=fuphp.cn&ie=utf-8" title="USER_AGENT" target="_blank">USER_AGENT</a> <a href="https://zhannei.baidu.com/cse/site?q=色彩&cc=fuphp.cn&ie=utf-8" title="色彩" target="_blank">色彩</a> <a href="https://zhannei.baidu.com/cse/site?q=图形&cc=fuphp.cn&ie=utf-8" title="图形" target="_blank">图形</a> <a href="https://zhannei.baidu.com/cse/site?q=商业&cc=fuphp.cn&ie=utf-8" title="商业" target="_blank">商业</a> <a href="https://zhannei.baidu.com/cse/site?q=生成&cc=fuphp.cn&ie=utf-8" title="生成" target="_blank">生成</a> </div> </div> <!--广告 start--> <div class="qf-ads"><ul class="qf-ads-nUl-10"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231537994005.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> <div class="qf-cms-name"> <h3>热门文章</h3> </div> <div class="qf-cms-container"> <ul class="qf-article-list"> <li><em>1</em> <a href="/cehua/item-29482.html" title="什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？" target="_blank">什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？</a> </li> <li><em>2</em> <a href="/jingyan/item-20869.html" title="各大搜索引擎登录入口,网站收录入口" target="_blank">各大搜索引擎登录入口,网站收录入口</a> </li> <li><em>3</em> <a href="/mac/item-22368.html" title="Mac设置VPN来登录youtube等国外网站的步骤" target="_blank">Mac设置VPN来登录youtube等国外网站的步骤</a> </li> <li><em>4</em> <a href="/qilin/item-30816.html" title="Openvpn在麒麟操作系统上的配置方法" target="_blank">Openvpn在麒麟操作系统上的配置方法</a> </li> <li><em>5</em> <a href="/bios/item-23598.html" title="联想笔记本BIOS设置图解中文详细说明" target="_blank">联想笔记本BIOS设置图解中文详细说明</a> </li> <li><em>6</em> <a href="/mac/item-23040.html" title="Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解" target="_blank">Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解</a> </li> <li><em>7</em> <a href="/bios/item-27940.html" title="AMI BIOS设置图解教程+Award Bios设置全程图解" target="_blank">AMI BIOS设置图解教程+Award Bios设置全程图解</a> </li> <li><em>8</em> <a href="/yunying/other/item-29261.html" title="分享最受美国人喜欢的十大搜索引擎" target="_blank">分享最受美国人喜欢的十大搜索引擎</a> </li> <li><em>9</em> <a href="/tools/item-30528.html" title="分享10个常见的SQL注入工具" target="_blank">分享10个常见的SQL注入工具</a> </li> <li><em>10</em> <a href="/ubuntu/item-24072.html" title="ubuntu如何截图? ubuntu中截屏的三种方法" target="_blank">ubuntu如何截图? ubuntu中截屏的三种方法</a> </li> </ul> </div> <div class="qf-cms-name"> <h3>最新更新</h3> </div> <div class="qf-cms-container"> <ul class="qf-article-list"> <li><a href="/changshi/item-79334.html" title="无线路由器经常断线 故障解决" target="_blank">无线路由器经常断线 故障解决</a> </li> <li><a href="/changshi/item-79351.html" title="怎么在Mac上设置锁屏不待机" target="_blank">怎么在Mac上设置锁屏不待机</a> </li> <li><a href="/changshi/item-79354.html" title="VHD和VHDX硬盘格式有什么区别?" target="_blank">VHD和VHDX硬盘格式有什么区别?</a> </li> <li><a href="/changshi/item-79363.html" title="关闭Aero Shake节约系统资源的方法" target="_blank">关闭Aero Shake节约系统资源的方法</a> </li> <li><a href="/changshi/item-79362.html" title="怎么更改Mac中的邮件字体大小" target="_blank">怎么更改Mac中的邮件字体大小</a> </li> <li><a href="/changshi/item-79371.html" title="提高WIN7系统开机速度方法分享" target="_blank">提高WIN7系统开机速度方法分享</a> </li> <li><a href="/changshi/item-79361.html" title="Mac系统怎么更改用户登录密码" target="_blank">Mac系统怎么更改用户登录密码</a> </li> <li><a href="/changshi/item-79358.html" title="Mac上如何修改时间和日期" target="_blank">Mac上如何修改时间和日期</a> </li> <li><a href="/changshi/item-79366.html" title="如何将常用应用固定至开始屏幕或任务栏" target="_blank">如何将常用应用固定至开始屏幕或任务栏</a> </li> <li><a href="/mysql/item-79372.html" title="MySQL中replace into语句的用法详解（insert into 的增强版）" target="_blank">MySQL中replace into语句的用法详解（insert into 的增强版）</a> </li> </ul> </div> <!--广告 start--> <div class="qf-ads qf-ads-ontop"><ul class="qf-ads-nUl-11"><li><a href="http://www.hnqfu.cn" target="_blank"><img src="/uploads/images/ads/202306/20230610081510415263.jpg"></a><a href="http://www.hnqfu.cn" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div> </div> </div> </div> <script type="text/javascript"> var scrollPh = 1680; layui.use('code', function(){ layui.code({ elem: 'pre', title: '代码', encode: false, ln: true, //skin: 'dark', //about: '123', about: [ //'<a href="javascript:;">复制</a>' ] }); }); </script> <div class="wrap bottom"> <div class="wrapper clearfix"> <div class="links"> <a href="http://www.fuphp.cn">网站首页</a> 　|　<a href="/aboutus.html">关于我们</a> 　|　<a href="/wangzhanshengming.html">免责声明</a> 　|　<a href="/guanggaohezuo.html">广告合作</a> 　|　<a href="/contact.html">联系我们</a> </div> <div class="copyright"> Copyright @ 2015-2025 <a href="" title="河南全福网络科技有限公司专业网制设计制作，PHP二次开发">福编程 fuphp</a> All Rights Reserved. </div> <div class="copyright"> <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">豫ICP备15036959号-4</a> </div> </div> </div> <script type="text/javascript"> layui.config({ base: '/static/js/layuiadmin/' //静态资源所在路径 }).extend({ qf: '../qfplus/qf/qf', contact: '../qfplus/contact/contact', }).use(['contact'], function(){ var contact = layui.contact; contact.render({'position': 'left', 'oappend':'.qf-quick-bar'}); //菜单 jQuery(".submenu").slide({ type:"menu",// 效果类型，针对菜单/导航而引入的参数（默认slide） titCell:".nLi", //鼠标触发对象 targetCell:".sub", //titCell里面包含的要显示/消失的对象 titOnClassName:'current', effect:"slideDown", //targetCell下拉效果 delayTime:300 , //效果时间 triggerTime:0, //鼠标延迟触发时间（默认150） returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false） }); //表单 var form = layui.form; form.render(null, 'component-form'); /* 监听提交 */ form.on('submit(component-form-submit)', function(data){ var searchkey = data.field.searchkey; return true; }); //滚动固顶 $(document).scroll(function(){ var sTop = $(document).scrollTop(); if( sTop >= scrollPh ){ $('.qf-ads-ontop').css({'position':'fixed', 'top':'0'}); }else{ $('.qf-ads-ontop').css({'position':'relative'}); } }); }); <!--百度统计------------------> </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?9eb8fd7c57fefc4283caaf6d0c7e37f7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>