首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap所支持的表单控件实例详解

Posted in Javascript onMay 16, 2016

 Bootstrap所支持的表单控件如下所示：

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 输入框</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">标签</label>
<input type="text" class="form-control" placeholder="文本输入">
</div>
</form>
</body>
</html>

结果如下所示：

Bootstrap所支持的表单控件实例详解

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 文本框</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
</body>
</html>

结果如下所示：

Bootstrap所支持的表单控件实例详解

复选框（（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。

对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

下面的实例演示了这两种类型（默认和内联）：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 复选框和单选按钮</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" 
value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" 
value="option2">
选项 2 - 选择它将会取消选择选项 1
</label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
value="option1" checked> 选项 1
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
value="option2"> 选项 2
</label>
</div>
</body>
</html>

结果如下所示：

Bootstrap所支持的表单控件实例详解

复选框和单选按钮

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。

使用 multiple="multiple" 允许用户选择多个选项。

下面的实例演示了这两种类型（select 和 multiple）：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 选择框</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">可多选的选择列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</body>
</html>

结果如下所示：

Bootstrap所支持的表单控件实例详解

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 静态控件</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" 
placeholder="请输入密码">
</div>
</div>
</form>
</body>
</html>

结果如下所示：

Bootstrap所支持的表单控件实例详解

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 表单控件状态</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">聚焦</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" 
value="该输入框获得焦点...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">
禁用
</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" 
placeholder="该输入框禁止输入..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">
禁用输入（Fieldset disabled）
</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" 
placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">
禁用选择菜单（Fieldset disabled）
</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">
输入成功
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">
输入警告
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">
输入错误
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>
</body>
</html>

结果如下所示：

Bootstrap所支持的表单控件实例详解

表单控件大小

可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 表单控件大小</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text" 
placeholder=".input-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="默认输入">
</div>
<div class="form-group">
<input class="form-control input-sm" type="text" 
placeholder=".input-sm">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">默认选择</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>
</body>
</html>

结果如下所示：

Bootstrap所支持的表单控件实例详解

三水点靠木小编给大家推荐相关专题：

BootStrap组件操作技巧

Bootstrap 相关知识汇总

以上就是bootstrap所支持的表单控件。大家都看明白了，有任何疑问欢迎给我留言，小编会及时回复大家的，同时也非常感谢大家对三水点靠木网站的支持

Bootstrap所支持的表单控件实例详解

- Author -

lfsf802

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery插件开发全解析
Oct 10 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
js微信分享实现代码
Oct 11 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
移动端横屏的JS代码(beta)
May 16 #Javascript
js实现带农历和八字等信息的日历特效
May 16 #Javascript
jQuery 常用代码集锦(必看篇)
May 16 #Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 #Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 #Javascript
javascript实现起伏的水波背景效果
May 16 #Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 #Javascript
hook(1) 云服务器(1) 腾讯云(1) JDK(1) expdp(1) Vite(1) 外键约束(1) Foreign Key(1) dict(1) 数据备份(2)
You might like
用Flash图形化数据(二)
2006/10/09 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Python错误提示：[Errno 24] Too many open files的分析与解决
2017/02/16 Python
你还在@微信官方？聊聊Python生成你想要的微信头像
2019/09/25 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
匡威意大利官方商店 ：Converse意大利
2018/11/27 全球购物
高级运动鞋：GREATS
2019/07/19 全球购物
德国高尔夫商店：Par71.de
2020/11/29 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
大学生先进事迹材料
2014/02/16 职场文书
培训讲师岗位职责
2014/04/13 职场文书
活动宣传策划方案
2014/05/23 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
药剂专业求职信
2014/06/20 职场文书
个人原因辞职信模板
2015/05/13 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
Oracle使用别名的好处
2022/04/19 Oracle