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 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
Angular的MVC和作用域
Dec 26 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
浅析JavaScript中的变量提升
Jun 01 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
JS上传前预览图片实例
2013/03/25 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
Python函数返回值实例分析
2015/06/08 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python实现烟花小程序
2019/01/30 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
小学数学国培感言
2014/03/10 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
局火灾防控工作方案
2014/05/25 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2014年文员工作总结
2014/11/18 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
团组织关系介绍信
2019/06/24 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库