首页
所有分类
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 相关文章推荐
JavaScript Title、alt提示（Tips）实现源码解读
Dec 12 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
webpack优化的深入理解
Dec 10 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
JavaScript：ES2019 的新特性(译)
Aug 08 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
微信小程序实现购物车小功能
Dec 30 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
frozenset(1) create(1) 子查询(1) Next.js(1) Mybatis-Plus(3) 脚手架(2) set(1) el-table(1) mounted(1) TableField(1)
You might like
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
js函数般调用正则
2008/04/08 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python导入oracle数据的方法
2015/07/10 Python
简单实现python爬虫功能
2015/12/31 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
AmazeUI折叠式卡片布局，整合内容列表、表格组件实现
2020/08/20 HTML / CSS
理肤泉美国官网：La Roche-Posay
2018/01/17 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
初婚初育证明
2014/01/14 职场文书
健康家庭事迹材料
2014/05/02 职场文书
高中班主任心得体会
2016/01/07 职场文书
受欢迎的自荐信，就这么写！
2019/04/19 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL