第七篇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 相关文章推荐
常用的javascript function代码
May 23 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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中的串行化变量和序列化对象
2006/09/05 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python直接访问私有属性的简单方法
2016/07/25 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python微信公众号开发简单流程
2018/03/23 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
放牛班的春天观后感
2015/06/01 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis