php date属性,常见data属性

## **1 data-toggle data-toggle**

以什么事件类型触发,常用的如下。

```

data-toggle="dropdown"//下拉菜单

data-toggle="model" //模态框事件

data-toggle="tooltip"//提示框事件

data-toggle="tab"//标签页

data-toggle="collapse"//折叠

data-toggle="popover"//弹出框

data-toggle="button"//按钮事件

data-toggle="pill"

```

一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。所以data-loggle和data-target有时会结合一起使用。如下

```

开始演示模态框

×

code。。。

```

## **2 data-dismiss**

常见的是在模态窗口中用于关闭模态窗口 data-dismiss=”modal”

或者关闭警告框

>#### 确保在所有设备上的正确行为

务必给``元素添加`data-dismiss="alert"`属性。

~~~html

×

Warning! Better check yourself, you're not looking too good.

~~~


## **3 data-slide-to、data-slide、data-ride**

data-slide-to、data-slide、data-ride用于轮播图carousel。

* `data-slide`：接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。

* `data-slide-to`： 用来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从 0开始计数。

* `data-ride="carousel"`： 属性用于标记轮播在页面加载时就开始动画播放

## **4、data-spy="scroll"**

滚动监听(依赖导航插件)

* data-offset="10" ：计算滚动位置时相对于顶部的偏移量(像素数)。

~~~css

body {

position: relative;

}

~~~

~~~html

...

...

...

~~~

## **data-placement="top"**

工具提示，一般和`data-toggle="tooltip"`用

~~~html

Tooltip on left

Tooltip on top

Tooltip on bottom

Tooltip on right

~~~


data-dismiss

data-api

data-parent

data-original-title

data-content

data-whatever="@mdo"

~~~html

role="alert"

~~~

~~~html

aria-label="Close"

~~~

我们还提供了关闭 data 属性 API 的方法，即解除以`data-api`为命名空间并绑定在文档上的事件。就像下面这样：

~~~js

$(document).off('.data-api')

~~~

另外，如果是针对某个特定的插件，只需在`data-api`前面添加那个插件的名称作为命名空间，如下：

~~~js

$(document).off('.alert.data-api')

~~~