引导带|微调框2

简介

引导带|微调框2是Bootstrap中的一个插件，用于实现快速创建带有popover弹出框和spinner微调框的表单元素。它可以方便地使用JavaScript和CSS定制和扩展其外观和行为。

安装

• 方式一：通过CDN引入前端框架

<!-- 引入jQuery -->
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- 引入Bootstrap -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- 引入引导带|微调框2 -->
<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css">
<script src="//cdn.bootcdn.net/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>

• 方式二：通过npm安装

npm install bootstrap-slider --save

使用

引入样式和脚本后即可使用data-provide="slider"属性标记需要使用引导带|微调框2的表单元素，例如：

<input type="text" data-provide="slider" data-slider-min="-100" data-slider-max="100" data-slider-step="1" data-slider-value="0">

配置项

下表是引导带|微调框2中支持的所有配置项：

| 配置项 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | id | string | '' | 元素id | | min | number | 0 | 最小值 | | max | number | 10 | 最大值 | | step | number / 'logarithmic' | 1 | 步长，当值为'logarithmic'时使用对数步长 | | precision | number / false | 0 | 精度，例如0.01表示保留两位小数 | | orientation | string | 'horizontal' | 方向，可选值：horizontal、vertical | | selection | string | 'before' | 选择区域，可选值：before、after、none | | tooltip | string / 'show' | 'show' | 是否显示tooltip，可选值：show、hide | | tooltip_split | boolean | false | 是否在两个刻度线之间显示tooltip | | tooltip_position | string / function | 'Top' | tooltip位置，函数形式为：(value:Number, pointer:Object):String | | tooltip_formatter | function | function(value) { return value; } | tooltip格式化函数 | | handle_position | string | 'round' | 拖动元素样式，可选值：round、triangle | | reversed | boolean | false | 是否反转 | | rtl | boolean | false | 是否从右到左书写 | | enabled | boolean | true | 是否启用 | | natural_arrow_keys | boolean | false | 是否启用自然箭头键 | | ticks | [] / boolean | [] | 是否显示刻度线，当值为true时显示默认刻度线 | | ticks_positions | [] | [] | 刻度线位置，可选值：top、bottom、left、right | | ticks_labels | [] | [] | 刻度线标签 | | ticks_snap_bounds | number | 0 | 点击刻度线时滑块到达的位置差异度 | | scale | string / array | '' | 刻度线比例坐标来显示标签 ; 如果 scale 为字符串，则为一个由“[,],[,]”分隔的数组 | | focus | boolean | false | 是否应自动定位句柄 | | value | number / [] / string | 5 | 初始值 |

示例

创建一个垂直方向、反转的微调框，步长为2，初始值为30，最小值为0，最大值为100，显示刻度线和刻度线标签：

<input type="text" 
  data-provide="slider" 
  data-slider-min="0" 
  data-slider-max="100" 
  data-slider-step="2" 
  data-slider-value="30" 
  data-slider-orientation="vertical" 
  data-slider-reversed="true" 
  data-slider-ticks="[0, 25, 50, 75, 100]" 
  data-slider-ticks-labels='["0", "25", "50", "75", "100"]'>

结束语

引导带|微调框2是Bootstrap中的一个实用的插件，可以快速地创建美观的带popover弹出框和spinner微调框的表单元素。它支持许多配置选项，可以方便地实现各种需求。希望各位程序员可以通过本文介绍，更好地应用引导带|微调框2。