HR 2.9 | 高级表单

高级表单

旋钮输入 http://anthonyterrien.com/knob/

旋钮 - 拨号

轻松创建旋钮输入样式。

简单的旋钮示例

动态旋钮示例

选择 http://harvesthq.github.io/chosen/

选择选择用户可以从选择输入中选择较大。

基本例子

多选

范围滑块 https://github.com/IonDen/ion.rangeSlider

滑块

是完美的范围选择选项。

示例: 将diapason从0设置为5000，将后缀“+”添加到最大值，将滑块类型设置为双，美元符号作为前缀，启用网格

示例: 将diapason从0设置为10，设置分数步长值：0.1，启用网格

示例: 将从零开始设置为-50到+50，将FROM值设置为0，将度数符号添加为后缀

示例:将常用滑块编号更改为自定义（月份名称）。使用值数组。数组可以是任意长度，Slider会自动修改min和max的数值，以适应数组的长度，Step参数也会被更改为1，允许在值中选择项数组

阅读API

触摸旋转 http://www.virtuosoft.eu/code/bootstrap-touchspin/

用于Bootstrap 3的移动和触摸友好的输入微调器组件。它支持鼠标滚轮和上/下键。

具有空值的基本示例

后缀示例

垂直按钮对齐示例：

双重列表框

Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。

Select2 https://select2.github.io/

Select2 is a jQuery based replacement for select boxes. It can take a regular select box and turn it into:

可以定义占位符值，并显示，直到进行选择。

Select2还支持多值选择框。下面的选择用multiple属性声明。

范围滑块 http://refreshless.com/nouislider/

范围滑块

简单的范围选择滑块。

基本例子

范围选择示例

日期选择器 https://github.com/eternicode/bootstrap-datepicker

日期选择器

使用鼠标轻松选择文字输入的时间。

简单的数据输入格式

今年

十年

本月

范围选择

至

时钟选择器 http://weareoutman.github.io/clockpicker/

时钟选择器

Bootstrap（或jQuery）的时钟计时风格。

日期范围选择器 http://www.daterangepicker.com/

日期范围选择器

用于选择日期范围的JavaScript小部件。旨在与Bootstrap CSS框架配合使用。

所有选项示例

选色器 http://mjolnic.github.io/bootstrap-colorpicker/

选色器

用于Twitter Bootstrap工具包的Colorpicker插件。

作为正常输入

作为链接

更改背景颜色

引导标签输入

jQuery插件提供了一个用于管理标签的Twitter Bootstrap用户界面

几个初始标签的基本示例

输入掩码 http://jasny.github.io/bootstrap/

输入掩码

输入掩码允许用户更容易地输入您希望他们以特定格式输入数据的数据。

ISBN 1

999-99-999-9999-9

ISBN 2

999 99 999 9999 9

ISBN 3

999/99/999/9999/9

IPV4

192.168.100.200

税号

99-9999999

电话

(999) 999-9999

货币

$ 999,999,999.99

日期

dd/mm/yyyy

切换器 http://abpetkov.github.io/switchery/

切换器

您的复选框是iOS 7风格的开关。

自定义开关

纯CSS3 开/关切换闪光动画。

图像裁剪器 http://fengyuanchen.github.io/cropper/

一个简单的jQuery图像裁剪插件。

预览图像

常用方法

您可以将新图像上传到裁剪容器，并轻松下载新的裁剪图像。

上传新图片下载

其他方法

您可以设置裁剪器选项 $(image}).cropper(options)

高级表单

旋钮输入 http://anthonyterrien.com/knob/

旋钮 - 拨号

选择 http://harvesthq.github.io/chosen/

范围滑块 https://github.com/IonDen/ion.rangeSlider

滑块

触摸旋转 http://www.virtuosoft.eu/code/bootstrap-touchspin/

双重列表框

Select2 https://select2.github.io/

范围滑块 http://refreshless.com/nouislider/

范围滑块

日期选择器 https://github.com/eternicode/bootstrap-datepicker

日期选择器

时钟选择器 http://weareoutman.github.io/clockpicker/

时钟选择器

日期范围选择器 http://www.daterangepicker.com/

日期范围选择器

所有选项示例

选色器 http://mjolnic.github.io/bootstrap-colorpicker/

选色器

作为正常输入

作为链接

引导标签输入

输入掩码 http://jasny.github.io/bootstrap/

输入掩码

切换器 http://abpetkov.github.io/switchery/

切换器

自定义开关

自定义开关

图像裁剪器 http://fengyuanchen.github.io/cropper/

预览图像

常用方法

其他方法

Awesome bootstrap复选框

基本

盘旋

Radio