這篇文章主要講解了“bootstrap中的data屬性有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“bootstrap中的data屬性有哪些”吧！

創(chuàng)新互聯(lián)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供做網(wǎng)站、成都網(wǎng)站制作、成都網(wǎng)頁(yè)設(shè)計(jì)、微信小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、成都APP應(yīng)用開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來見證！

在bootstrap中，data的意思是定義自定義屬性，自定義屬性一般使用“data-”開頭，data屬性的應(yīng)用可以讓HTML標(biāo)簽可以隱式的附帶一些數(shù)據(jù)，而Javascript就可以對(duì)這些屬性數(shù)據(jù)進(jìn)行讀寫操作。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦

bootstrap中的data是什么意思

【1 data-屬性】

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

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

data-* 屬性包括兩部分：

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

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

說直白點(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)有一段介紹說你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應(yīng)該是你的首選方式。

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

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

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

標(biāo)簽的class="xxx" 屬性，主要是用來使用bootstrap的css樣式，

以及作為一個(gè)可識(shí)別對(duì)象對(duì)象的類名標(biāo)識(shí)。

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

【3 Bootstrap 常見data屬性】

1 data-toggle

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

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

一般事件會(huì)作用到一個(gè)標(biāo)簽對(duì)象，如果是其他標(biāo)簽對(duì)象，就需要使用data-target指事件的標(biāo)簽?zāi)繕?biāo)。所以data-loggle和data-target有時(shí)會(huì)結(jié)合一起使用。如下

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    開始演示模態(tài)框
</button>
<!-- 模態(tài)框（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

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

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

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

感謝各位的閱讀，以上就是“bootstrap中的data屬性有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)bootstrap中的data屬性有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前標(biāo)題：bootstrap中的data屬性有哪些
新聞來源：http://m.newbst.com/article44/jeepee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、虛擬主機(jī)、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航、、靜態(tài)網(wǎng)站

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)