最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

【1 data-屬性】

創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比蘭考網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式蘭考網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋蘭考地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

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

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

data-* 屬性包括兩部分：

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

說直白點就是data屬性的應用，讓HTML標簽可以隱式的附帶一些數(shù)據，而javascript就可以對這些屬性數(shù)據進行 讀/寫 操作,進而可以做出相應的動作和事件。

【2 Bootstrap 中的data屬性】官網有一段介紹說 你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式。

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

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

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

標簽的class="xxx" 屬性，主要是用來使用bootstrap的css樣式，以及作為一個可識別對象對象的類名標識。

標簽的data-[xx]="yy"屬性，主要是用來使用和調用bootstrap的組件和插件，即使用bootstrap.js來實現(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://標簽頁
data-toggle="collapse"http://折疊
data-toggle="popover"http://彈出框
data-toggle="button"http://按鈕事件

一般事件會作用到一個標簽對象，如果是其他標簽對象，就需要使用data-target指事件的標簽目標。所以data-loggle和data-target有時會結合一起使用。如下

 開始演示模態(tài)框



 

  

   

    
     ×
    
    code。。。
   
  

 

2 data-dismiss

常見的是在模態(tài)窗口中用于關閉模態(tài)窗口 data-dismiss=”modal”

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開始計數(shù)。

   data-ride="carousel" 屬性用于標記輪播在頁面加載時就開始動畫播放

總結

以上所述是小編給大家介紹的Bootstrap 中data-[*] 屬性的整理，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持！