Bootstrap3 表单支持的控件
支持的控件
Bootstrap支持所有的标准表单控件,包括 input 控件、textarea 控件、checkbox 和 radio 控件、select 控件等。
1、input 控件
Bootstrap除了支持大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件:text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和color
。如:
<input type="text" class="form-control" placeholder="Text input">
效果如图 2‑52所示:
图2-52 input控件
注意:在使用 input 控件时,只有设置了正确的type
属性,才能被赋予正确的样式。因为 Bootstrap是根据input 控件的 type 属性来为它定义样式的,如 input[type="text"]。
2、textarea 控件
textarea 控件用于输入多行文本。可以根据需要改变 rows 属性,来控制预留的行数。当用户输入的行数超过 rows 属性设定的值后,textarea 控件会自动添加滚动条。如:
<textarea class="form-control" rows="3"></textarea>
效果如图 2‑53所示:
图2-53 textarea控件
3、复选框和单选按钮
复选框和单选按钮用于让用户在一组预定选项中进行选择:多选框(checkbox)允许用户选择一个或多个选项,而单选框(radio)只允许选择一项。
为了获得正确的样式,要把每个复选框和单选按钮的 <input> 控件都包裹在一个 <label> 中,并为 <label> 应用 .checkbox 或 .radio 类,或者把 <label> 包裹在一个 .checkbox 或 .radio 的 <div> 容器中。
可以通过添加 disabled 属性,来禁用某个 checkbox 或 radio。对于被禁用的checkbox 和 radio,如果希望在鼠标悬停时获得 not-allowed 的鼠标样式,还需要为它的父元素 <label> 或 <div> 应用 .disabled 类。如:
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
默认情况下,复选框和单选按钮垂直堆叠排列。效果如图 2‑54所示:
图2-54 复选框和单选按钮垂直堆叠
如果希望复选框或单选按钮在一行内水平排列,只需为它们的父元素 <label> 或 <div> 应用 .checkbox-inline 或 .radio-inline 类即可。如:
<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="radio-inline">
<input type="radio" name="inlineRadio" id="inlineRadio1" value="option1">1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadio" id="inlineRadio2" value="option2">2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadio" id="inlineRadio3" value="option3">3
</label>
效果如图 2‑55所示:
图2-55 复选框和单选按钮水平排列
当然,<label>
也可以没有文字,不过,目前只适用于非内联的 checkbox 和 radio。请记住,仍然需要为使用辅助技术(如,使用aria-label
)的用户,提供某种形式的 label。如:
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
效果如图 2‑56所示:
图2-56 复选框和单选按钮水平排列
4、select 控件
select 控件用于创建下拉列表框。在 Safari 和 Chrome 中,无法通过border-radius为原生的select 控件添加圆角。在 Bootstrap 中,只需为 select 控件应用 .form-control 类,就可以为它添加圆角。如:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
默认的 select 控件是单选的,只允许选择一项。可以为 select 控件显式定义 multiple 属性,让它支持多选,用户就可以按住 ctrl 或 shift 键来选择多个选项。如:
<select class="form-control" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
效果如图 2‑57所示:
图2-57 可多选的select控件
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap3 表单支持的控件相关推荐
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)...
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- html5表单上传控件Files API
表单上传控件:<input type="file" /> (IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:&l ...
- Bootstrap 表单的基本控件
Bootstrap支持所有的标准表单控件,包括 input 控件.textarea 控件.checkbox 和 radio 控件.select 控件等. 1.input 控件 Bootstrap 支持 ...
- Bootstrap 表单的扩展控件
除了基本的控件,作为对 HTML 表单控件的补充,Bootstrap 还为表单额外提供了一些非常实用的扩展控件. 输入框的前置和后置组件,是非常实用的控制控件.利用输入框的前置和后置组件,可以在输入框 ...
- .Net Core使用视图组件(ViewComponent)封装表单文本框控件
实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩.他们在一行中按照水平三等分排列. 在cshtml中用html实现上述表单效果的的代码如下: 1 <form class=&q ...
- android tible控件_android自定义表单,表格控件TableRowTextView
先上图: TableRowTextView----单元格宽度自适应[app:cell_mode="wrapContent"] 单元格宽度属性[app:cell_mode=wrapC ...
- H5新增表单元素、控件
表单-新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. • ①email.②url.③number.④range • ⑤Date pick ...
- PHP+JavaScript+HTML实现注册界面表单及日历控件
本文主要是介绍我做PHP网站时的一个HTML的简单静态界面,它的主要功能是用户注册界面,并且参照了网上的例子使用JavaScript判断和My97DatePicker的日历控件.界面效果如下图所示: ...
最新文章
- 拉线自动行走机器人_煤矿机器人重点研发目录来了!
- python gevent缺点_python的flask框架结合gevent性能反而大幅度下降?
- 数据结构Java08【二叉平衡树(AVL)-概述、单旋转、双旋转】
- 每秒8.8亿次请求!让数据存得起,看得见 - 云原生多模数据库Lindorm 2020双十一总结
- c语言pta按等级统计学生成绩,第九周作业
- HTTP和HTTPS的了解
- 【推荐实践】深度学习在阿里B2B电商推荐系统中的实践
- 1.Thinkphp入门--框架介绍
- @JsonView的使用
- LU分解 LDL分解 Cholesky分解
- 8.7.1. Declaration of Enumerated Types
- 最优模型选择的准则:AIC、BIC准则
- 一、注册功能怎么测试
- MIPI入门——What the hell is mipi?
- 面向对象类和类之间的几种关系
- 双向dijkstra
- 一个差劲程序员的历程(一)
- 301重定向解决域名被墙教程
- 前端接收java验证码_在Web项目中手机短信验证码实现的全过程记录
- 光伏发电与“鸭子曲线”
热门文章
- 快速迭代的开发方式中的QA实践方法
- zabbix3.0.4监控mysql主从同步
- javascript的BOM
- Gridview 单选效果实现,且用且珍惜
- 出租车燃油附加费之阴谋[10-22]
- 数据库 查询XML XQuery
- 单行溢出文本显示省略号的方法(兼容IE FF)
- dockerHub国内镜像设置
- TransD:通过动态映射矩阵嵌入(知识图谱嵌入)ACL 2015
- ERROR in static/js/vendor.js from UglifyJs UUnexpected token: name (Dom7)