首页
所有分类
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 相关文章推荐
JS获取Table中td值的方法
Mar 19 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
js异步接口并发数量控制的方法示例
Nov 22 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
保加利亚购物网站(3) 白俄罗斯购物网站(3) Android面试题(6) 约旦购物网站(1) 哈萨克斯坦购物网站(2) 马耳他购物网站(1) C++面试题(199) PHP面试题(54) JAVA面试题(401) 冰岛购物网站(1)
You might like
PHP静态类
2006/11/25 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
IP攻击升级，程序改进以对付新的攻击
2010/11/23 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
python的re正则表达式实例代码
2018/01/24 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
wxpython绘制圆角窗体
2019/11/18 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
皮尔·卡丹巴西官方商店：Pierre Cardin
2017/07/21 全球购物
草莓网官网：StrawberryNET
2019/08/21 全球购物
行政人事专员岗位职责
2014/03/05 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
竞聘开场白方式有哪些？
2019/08/28 职场文书
“爱眼护眼，提前预防近视”倡议书3篇
2019/10/30 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL