Bootstrap 中data-[*] 屬性的整理

本文為大家收藏整理了關於Bootstrap 中data-[*] 屬性的相關知識，有興趣的朋友一起看看吧

【1 data-屬性】

data屬性是HTML5的新屬性。允許開發者自由為其標籤添加屬性.存儲數據，這種自訂屬性一般用“data-”開頭。

儲存的（自訂）資料能夠被頁面的 JavaScript 中利用。

data-* 屬性包括兩個部分：

1. * 屬性名稱不應該包含任何大寫字母，並且在前綴 “data-” 之後必須至少有一個字元。

2. * 屬性值可以是任意字串。

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

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

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

後來facebook公司就發現，很多基本網頁上效果是比較常用也是使用頻繁的，例如下拉式選單、折疊、模態框等等。為什麼不把這些常用的提取出一套標準模型，然後製定出使用規則，使用時按照這些規則直接拿來使用就可以了，於是就誕生了bootstrap。

說穿了，以前是先有功能需求，再去實現。現在是功能都基本上給你覆蓋了，js操作函數都已經寫好了，css樣式也已經寫好，你想使用就直接按照他的規則調用就行。然後為了能更多樣化,bootstrap.js中的函數可以有不同的參數值，這些參數值就是根據你給標籤的屬性來設定的。 （其實作在js外掛基本上都是這個套路）

標籤的class="xxx" 屬性，主要是用來使用bootstrap的css樣式，以及作為一個可辨識物件物件的類別名稱識別。

標籤的data-[xx]="yy"屬性，主要是用來使用和呼叫bootstrap的元件和插件，也就是使用bootstrap.js來實現一些互動效果。

【3 Bootstrap 常見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-target指事件的標籤目標。所以data-loggle和data-target有時會結合一起使用。如下

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始演示模态框
</button>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
  <p class="modal-content">
   <p class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    code。。。
   </p>
  </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>

2 data-dismiss

常見的是在模態視窗中用於關閉模態視窗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開始計數。

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

Servlet3.0與純javascript透過Ajax互動的實例詳解

##jQuery取代節點元素的操作方法

使用Angular CLI產生Angular 5專案教學課程詳解

########################################################################## ###

以上是Bootstrap 中data-[*] 屬性的整理的詳細內容。更多資訊請關注PHP中文網其他相關文章！