Bootstrap表单布局


Posted in Javascript onJuly 19, 2016

Bootstrap 提供了下列类型的表单布局:

•垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看;

•内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖排。

•水平表单 -> 用栅格系统控制显示

一、垂直表单

垂直表单使用的标准步骤

1.<form> 元素添加 role="form"。

2.把标签和控件放在一个带有"form-group"的<div> 中,获取最佳间距。

3.向所有的文本元素 <input>、<textarea> 和 <select> 添加"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="name">年龄</label>
<input type="text" class="form-control" id="name" placeholder="请输入年龄">
</div>
</form>

二、内联布局

内联布局与垂直布局其他完全一样,只是需要给<form role="form">加个class=form-inline。

<form role="form" class="form-inline">

使用这样的内联布局之后,就是大屏幕横排显示,小屏幕垂直显示。

小屏幕:

Bootstrap表单布局

大屏幕:

Bootstrap表单布局

三、水平表单

水平表单指的是Label标签与控件(input、button)之间的水平。

其使用步骤如下:

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

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

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

<form role="form" class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-sm-2">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-2">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-10" id="name" placeholder="请输入年龄">
</div>
</form>

使用了form-horizontal之后,才能给input控件套div,并且div也能够使用网格系统了。form-horizontal样式改变了.form-group的行为,将其表现得像栅格中的行(row)一样。

四、复选框Checkbox和单选框Radio

这两个控件在Bootstrap里面比较特殊,有时候需要横排,有时候需要竖排。

它也跟form一样,也是有内联的。

•如果需要内联显示,则设置其外层包围的label的class为checkbox-inline。
•如果需要默认的竖排显示,则设置外层包围的label的class为heckbox。

<form role="form">
<!-- 复选 -->
<div class="checkbox">
<label><input type="checkbox" value="">香蕉</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">苹果</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">西瓜</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" value="">香蕉</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" value="">苹果</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" value="">西瓜</label>
</div>
<!-- 单选 -->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option1" checked> 男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option2" checked> 女
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="radio" name="optionsRadios" value="option1" checked> 男
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="radio" name="optionsRadios" value="option2" checked> 女
</label>
</div>
</form>

其显示效果如下:

Bootstrap表单布局

五、静态控件

静态控件指的是那些不能够改变值的控件,在bootstrap中,当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用class="form-control-static"。

<form role="form">
<div class="form-group">
<label class="col-sm-1 control-label">名称</label>
<div class="col-sm-11">
<p class="form-control-static">刘玄德</p>
</div>
</div>
</form>

显示效果如下:

Bootstrap表单布局

六、表单帮助文本

Bootstrap表单帮助文本一般指的是输入录入的提示,通常在input后面跟个.help-block的HTML元素就可以了。

<form role="form">
<div class="form-group">
<input class="form-control" type="text" >
<span class="help-block">
特别提醒,如果你没有什么,就不要输入了。
</span>
</div>
</form>

显示效果如下:

Bootstrap表单布局

除了这些之外,Bootstrap还有很多用来控制input高度啊,输入是否成功啊等等的一些列样式,这些只要查一下,找到相应的关键字就能够用,以后遇到奇葩的再记录。

以上所述是小编给大家介绍的Bootstrap表单布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
js实现拖拽效果
Feb 12 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
php 修改密码实现代码
May 24 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
一次$.getJSON不执行的简单记录
Jul 19 #Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 #Javascript
javascript弹出带文字信息的提示框效果
Jul 19 #Javascript
总结在前端排序中遇到的问题
Jul 19 #Javascript
ECMAScript6快速入手攻略
Jul 18 #Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 #Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 #Javascript
You might like
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php object转数组示例
2014/01/15 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
医学生自荐信
2013/12/03 职场文书
实习教师自我鉴定
2013/12/12 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书