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操作cookie的一点小收获分享
Sep 03 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
SVG描边动画
Feb 23 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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在Web开发领域的优势
2006/10/09 PHP
完美的php分页类
2017/10/24 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
Python编程之微信推送模板消息功能示例
2017/08/21 Python
深入浅出学习python装饰器
2017/09/29 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python实现websocket的客户端压力测试
2019/06/25 Python
浅谈Python type的使用
2019/11/19 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python属于跨平台语言码
2020/06/09 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
中专自我鉴定
2014/02/05 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
孝女彩金观后感
2015/06/10 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
Go使用协程交替打印字符
2021/04/29 Golang
Python加密与解密模块hashlib与hmac
2022/06/05 Python