bootstrap中的data屬性有哪些

這篇文章主要講解了“bootstrap中的data屬性有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“bootstrap中的data屬性有哪些”吧！

在bootstrap中，data的意思是定義自定義屬性，自定義屬性一般使用“data-”開頭，data屬性的應用可以讓HTML標簽可以隱式的附帶一些數據，而Javascript就可以對這些屬性數據進行讀寫操作。

本教程操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦

bootstrap中的data是什么意思

【1 data-屬性】

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

存儲的（自定義）數據能夠被頁面的 JavaScript 所獲取利用。

data-* 屬性包括兩部分：

• * 屬性名不應該包含任何大寫字母，并且在前綴 “data-” 之后必須有至少一個字符。

• * 屬性值可以是任意字符串。

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

【2 Bootstrap 中的data屬性】

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

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

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

換一種簡說法就是，以前是先有功能需求，再去實現。現在是功能都基本給你覆蓋寫好了，js相關操作函數都已經寫好了，css樣式也已經寫好，你想使用就直接按照他的規則調用就行。然后為了能更多樣化,Bootstrap.js中的函數可以有不同的參數值，這些參數值就是根據你給標簽的屬性來設置的。（其實現在js插件基本都是這個套路,Java各種類庫也是）

標簽的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） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                code。。。
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

2 data-dismiss

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

3 data-slide-to、data-slide、data-ride

data-slide-to、data-slide、data-ride用于輪播圖carousel。

感謝各位的閱讀，以上就是“bootstrap中的data屬性有哪些”的內容了，經過本文的學習后，相信大家對bootstrap中的data屬性有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！