Apakah maksud data dalam bootstrap?

Dalam bootstrap, data bermaksud mentakrifkan atribut tersuai biasanya bermula dengan "data-". data.

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3

Apakah maksud data dalam bootstrap

【1 atribut data】

Atribut data ialah atribut baharu HTML5. Pembangun dibenarkan untuk menambahkan atribut pada teg mereka dan menyimpan data secara bebas. Atribut tersuai sedemikian biasanya bermula dengan "data-".

Data yang disimpan (tersuai) boleh diambil dan digunakan oleh JavaScript halaman.

data-* Atribut terdiri daripada dua bahagian:

• * Nama atribut tidak boleh mengandungi sebarang huruf besar dan mesti ada sekurang-kurangnya satu aksara selepas awalan "data-".

• * Nilai atribut boleh berupa sebarang rentetan.

Secara terang-terangan, ia adalah aplikasi atribut data, supaya teg HTML boleh melampirkan beberapa data secara tersirat, dan Javascript boleh membaca/menulis data atribut ini, dan kemudian anda boleh melakukannya Menghasilkan tindakan dan peristiwa yang sepadan.

[2 atribut data dalam Bootstrap]

Terdapat pengenalan di tapak web rasmi bahawa anda boleh menggunakan semua pemalam Bootstrap hanya melalui API atribut data tanpa menulis baris kod JavaScript. Ini ialah API kelas pertama dalam Bootstrap dan harus menjadi pilihan pertama anda.

Pada masa lalu, apabila kami menggunakan javascrpt asli, kami mula-mula menentukan reka letak gaya bahagian hadapan dan memerlukan acara interaktif, dan kemudian menggunakan pepohon Javascript dan HTML DOM untuk mengendalikan objek teks sedia ada untuk mencapai kesan dinamik, dsb. Interaksi.

Kemudian Facebook mendapati bahawa banyak kesan halaman web asas yang biasa digunakan dan kerap digunakan, seperti menu lungsur, lipatan, kotak modal, dsb. Mengapa tidak mengekstrak yang biasa digunakan ini ke dalam satu set model standard, dan kemudian merumuskan peraturan penggunaan Apabila menggunakan, hanya gunakannya secara langsung mengikut peraturan ini, dan dengan itu Bootstrap dilahirkan.

Dalam erti kata lain, pada masa lalu, kami mempunyai keperluan fungsian dahulu dan kemudian melaksanakannya. Kini fungsi tersebut pada dasarnya dilindungi dan ditulis untuk anda Fungsi operasi yang berkaitan dengan js telah ditulis, dan gaya css juga telah ditulis Jika anda ingin menggunakannya, hubungi terus mengikut peraturannya. Kemudian untuk menjadi lebih pelbagai, fungsi dalam Bootstrap.js boleh mempunyai nilai parameter yang berbeza Nilai parameter ini ditetapkan mengikut atribut yang anda berikan kepada teg. (Malah, pemalam js pada asasnya mengikuti rutin ini sekarang, begitu juga dengan pelbagai perpustakaan kelas Java) Atribut class="xxx" bagi teg

digunakan terutamanya untuk menggunakan gaya css bootstrap,

dan Dikenal pasti sebagai nama kelas bagi objek objek yang boleh dikenal pasti. Atribut data-[xx]="yy" bagi teg

digunakan terutamanya untuk menggunakan dan memanggil komponen bootstrap dan pemalam, iaitu menggunakan bootstrap.js untuk mencapai beberapa kesan interaktif.

[3 atribut data biasa Bootstrap]

1 togol data

togol data merujuk kepada jenis acara yang dicetuskan, yang biasa digunakan adalah seperti berikut.

data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件

Acara umum akan mempengaruhi objek label Jika ia adalah objek label lain, anda perlu menggunakan sasaran data untuk merujuk kepada sasaran label acara tersebut. Jadi log masuk data dan sasaran data kadangkala digunakan bersama. Seperti berikut

<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

biasanya digunakan dalam tetingkap modal untuk menutup tetingkap modal data-dismiss="modal"

3 data- slaid- kepada, slaid data, tunggangan data

slaid-data-ke, slaid data, tunggangan data digunakan untuk karusel karusel.

Cadangan berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Apakah maksud data dalam bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!