【1 data-屬性】

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都做網(wǎng)站、烏達(dá)網(wǎng)絡(luò)推廣、小程序開發(fā)、烏達(dá)網(wǎng)絡(luò)營(yíng)銷、烏達(dá)企業(yè)策劃、烏達(dá)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供烏達(dá)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：chinadenli.net

data屬性是HTML5的新屬性。允許開發(fā)者自由為其標(biāo)簽添加屬性.存儲(chǔ)數(shù)據(jù)，這種自定義屬性一般用“data-”開頭。

存儲(chǔ)的（自定義）數(shù)據(jù)能夠被頁(yè)面的 JavaScript 中利用。

data-* 屬性包括兩部分：

1. * 屬性名不應(yīng)該包含任何大寫字母，并且在前綴 “data-” 之后必須有至少一個(gè)字符。
2. * 屬性值可以是任意字符串。

說(shuō)直白點(diǎn)就是data屬性的應(yīng)用，讓HTML標(biāo)簽可以隱式的附帶一些數(shù)據(jù)，而javascript就可以對(duì)這些屬性數(shù)據(jù)進(jìn)行 讀/寫 操作,進(jìn)而可以做出相應(yīng)的動(dòng)作和事件。

【2 Bootstrap 中的data屬性】官網(wǎng)有一段介紹說(shuō) 你可以僅僅通過(guò) data 屬性 API 就能使用所有的 Bootstrap 插件，無(wú)需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應(yīng)該是你的選方式。

以前我們使用原生的javascrpt時(shí)候，是先確定了前端樣式布局以及交互事件，然后在去利用javascript以及HTML的DOM樹去操作已經(jīng)存在文本對(duì)象，從而實(shí)習(xí)動(dòng)態(tài)效果等交互。

后來(lái)facebook公司就發(fā)現(xiàn)，很多基本網(wǎng)頁(yè)上效果是比較常用也是使用頻繁的，比如下拉菜單、折疊、模態(tài)框等等。為什么不把這些常用的提取出一套標(biāo)準(zhǔn)模型，然后制定出使用規(guī)則，使用時(shí)按照這些規(guī)則直接拿來(lái)使用就可以了，于是就誕生了bootstrap。

說(shuō)白了，以前是先有功能需求，再去實(shí)現(xiàn)?，F(xiàn)在是功能都基本給你覆蓋了，js操作函數(shù)都已經(jīng)寫好了，css樣式也已經(jīng)寫好，你想使用就直接按照他的規(guī)則調(diào)用就行。然后為了能更多樣化,bootstrap.js中的函數(shù)可以有不同的參數(shù)值，這些參數(shù)值就是根據(jù)你給標(biāo)簽的屬性來(lái)設(shè)置的。（其實(shí)現(xiàn)在js插件基本都是這個(gè)套路）

標(biāo)簽的class="xxx" 屬性，主要是用來(lái)使用bootstrap的css樣式，以及作為一個(gè)可識(shí)別對(duì)象對(duì)象的類名標(biāo)識(shí)。

標(biāo)簽的data-[xx]="yy"屬性，主要是用來(lái)使用和調(diào)用bootstrap的組件和插件，即使用bootstrap.js來(lái)實(shí)現(xiàn)一些交互效果。

【3 Bootstrap 常見data屬性】

1 data-toggle data-toggle指以什么事件類型觸發(fā),常用的如下。

data-toggle="dropdown"http://下拉菜單
data-toggle="model" //模態(tài)框事件
data-toggle="tooltip"http://提示框事件
data-toggle="tab"http://標(biāo)簽頁(yè)
data-toggle="collapse"http://折疊
data-toggle="popover"http://彈出框
data-toggle="button"http://按鈕事件

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站標(biāo)題：Bootstrap中data-[*]屬性的整理-創(chuàng)新互聯(lián)
本文地址：http://chinadenli.net/article44/dejsee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、App設(shè)計(jì)、標(biāo)簽優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)