Bootstrap 表单的基本控件
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" placeholder="Text input">
效果如图 3‑33所示:
图3-33 Bootstrap表单input控件
需要注意的是,任何时候使用 input 控件,都需要指定它的 type 属性,因为Bootstrap在为这些元素定义样式时,都使用了 type 属性,如 input[type="text"]。
2、textarea 控件
textarea 控件用于输入多行文本。可以根据需要改变 rows 属性,来控制预留的行数。当用户输入的行数超过 rows 属性设定的值后,textarea 控件会自动添加滚动条。如:
<textarea rows="3"></textarea>
效果如图 3‑34所示:
图3-34 Bootstrap表单textarea控件
3、复选框和单选按钮
复选框和单选按钮用于让用户在一组预定选项中进行选择。如果想让用户选择任意多项,使用 <checkbox>,如果想让用户只选择一项,使用 <radio>。
在使用的时候,每个 <input> 都要包裹在 <label> 中,并为 <label> 应用 .checkbox 或 .radio 类。如:
<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
默认情况下,多个复选框和单选按钮垂直堆叠排列。效果如图 3‑35所示:
图3-35 Bootstrap表单复选框和单选按钮垂直堆叠
如果想让多个复选框或单选按钮在一行内水平排列,那么就给它们添加 .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>
效果如图 3‑36所示:
图3-36 Bootstrap表单复选框和单选按钮水平排列
4、select 控件
select 控件用于创建下拉列表框,默认只允许选择一项。如:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
如果为 select 控件显式定义 multiple 属性,控件便支持多选,用户就可以按住 ctrl 或 shift 键来来选择多个选项。如:
<select multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
效果如图 3‑37所示:
图3-37 Bootstrap表单select控件
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 表单的基本控件相关推荐
- Bootstrap 表单的扩展控件
除了基本的控件,作为对 HTML 表单控件的补充,Bootstrap 还为表单额外提供了一些非常实用的扩展控件. 输入框的前置和后置组件,是非常实用的控制控件.利用输入框的前置和后置组件,可以在输入框 ...
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)...
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- html5表单上传控件Files API
表单上传控件:<input type="file" /> (IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:&l ...
- Bootstrap3 表单支持的控件
支持的控件 Bootstrap支持所有的标准表单控件,包括 input 控件.textarea 控件.checkbox 和 radio 控件.select 控件等. 1.input 控件 Bootst ...
- .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的日历控件.界面效果如下图所示: ...
最新文章
- 漫画:三种 “奇葩” 的排序算法
- Java:判断一个字符串中是否存在另一个字符子串以及判断一个字符串中是否存在指定字符
- Install ArchLinux on SSD
- Zuul:智能路由和过滤(译)
- 如何使用阿里云ARMS轻松重现用户浏览器问题
- 云栖专辑 | 阿里开发者们的第3个感悟:从身边开源开始学习,用过才能更好理解代码
- 3dmax批量导入obj_ArcGIS 与 3DMax 结合建模
- java中有ClockPane类吗_Java程序设计教程 冶金工业出版社第9章
- 【C#/WPF】用Thumb做可拖拽的UI控件
- 【复习笔记】Cache的映像方法
- linux利用内存加快读盘速度,Linux性能优化从入门到实战:10 内存篇:如何利用Buffer和Cache优化程序的运行效率?...
- php中一个字符占用几个字节?
- 变分自编码器(VAE)
- PAIP.java程序调试的注意点及流程总结
- python实现文本分割
- 阿里达摩院招聘 Research Intern
- Failed to read artifact descriptor for
- vue移动端上传文件插件_轻量级Vue图片上传插件——Vue-core-image-Upload
- 【华为OD机试真题 Python】判断字符串子序列
- python排版word文档命令方法大全_简易常用Word文档使用技巧方法大全(超全).doc
热门文章
- 《BackTrack 5 Cookbook中文版——渗透测试实用技巧荟萃》—第1章1.3节安装BackTrack到USB驱动器...
- 【ASM C/C++】 Makefile 规则说明
- webservice常见名词
- http-server 简介 复制的
- vue 源码学习(一) 目录结构和构建过程简介 1
- (2)基于Bootstrap的网页开发
- JavaScript对象的深入理解 (一)
- uva 10077 - The Stern-Brocot Number System
- 如何快速实现word转为pdf
- svn常用命令与分支操作