第七篇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 相关文章推荐
json简单介绍
Jun 10 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
MYSQL数据库初学者使用指南
2006/11/16 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
js change,propertychange,input事件小议
2011/12/20 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python机器学习之神经网络实现
2018/10/13 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
员工拓展培训方案
2014/02/15 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
工作保证书范文
2014/04/29 职场文书
外联部演讲稿
2014/05/24 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
店面出租协议书范本
2014/11/28 职场文书
党支部意见范文
2015/06/02 职场文书