第七篇Bootstrap表单布局实例代码详解(三种表单布局)


Posted in Javascript onJune 21, 2016

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单。下面逐一给大家介绍,有兴趣的朋友一起学习吧。

创建垂直或基本表单:

•·向父 <form> 元素添加 role="form"。
•·把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
•·向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control

<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>

第七篇Bootstrap表单布局实例代码详解(三种表单布局)

内联表单:

内联表单中所有元素都向左对齐,标签并排,要创建内联表单,需要在form标签中加入class

.form-inline

<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>

显示效果如下:

第七篇Bootstrap表单布局实例代码详解(三种表单布局)

注意:默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,需要在表单控件上设置一个宽度。

水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.

•向父 <form> 元素添加 class .form-horizontal。

•把标签和控件放在一个带有 class .form-group 的 <div> 中。

•向标签添加 class .control-label。

例如:

<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>

第七篇Bootstrap表单布局实例代码详解(三种表单布局)

以上所述是小编给大家介绍的第七篇Bootstrap表单布局实例代码详解(三种表单布局)的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
Javascript打印局部页面实例
Jun 21 #Javascript
第六篇Bootstrap表格样式介绍
Jun 21 #Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 #Javascript
第五篇Bootstrap 排版
Jun 21 #Javascript
Javascript随机标签云代码实例
Jun 21 #Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 #Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 #Javascript
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Python tkinter事件高级用法实例
2018/01/31 Python
python3.x实现发送邮件功能
2018/05/22 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
python实现批处理文件
2020/07/28 Python
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
C#笔试题集合
2013/06/21 面试题
土木工程应届生求职信
2013/10/31 职场文书
英语自荐信范文
2013/12/11 职场文书
亲子活动总结
2014/04/26 职场文书
品牌推广策划方案
2014/05/28 职场文书
企业宗旨标语
2014/06/10 职场文书
党员民主生活会材料
2014/12/15 职场文书
爱心捐款感谢信
2015/01/20 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
Java SSM配置文件案例详解
2021/08/30 Java/Android