首頁  >  文章  >  web前端  >  bootstrap中的data是什麼意思

bootstrap中的data是什麼意思

WBOY
WBOY原創
2022-02-11 18:11:493011瀏覽

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

bootstrap中的data是什麼意思

本教學操作環境: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教學

#

以上是bootstrap中的data是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn