第七篇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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
利用vue实现模态框组件
Dec 19 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
关于微信小程序map组件z-index的层级问题分析
Jul 09 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php如何连接sql server
2015/10/16 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
详解vue 命名视图
2019/08/14 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
numpy数组拼接简单示例
2017/12/15 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
初中科学教学反思
2014/01/21 职场文书
民生工程实施方案
2014/03/22 职场文书
《桥》教学反思
2014/04/09 职场文书
征兵宣传标语
2014/06/20 职场文书
模具专业求职信
2014/06/26 职场文书
网吧消防安全责任书
2014/07/29 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang