Dapatkah Anda memberi tahu saya apa sistem atau perilaku di balik data-target
atribut yang digunakan oleh Bootstrap 3?
Saya tahu bahwa data-toggle digunakan untuk mengarahkan API JavaScript dari Bootstrap dengan fungsi grafis.
Dapatkah Anda memberi tahu saya apa sistem atau perilaku di balik data-target
atribut yang digunakan oleh Bootstrap 3?
Saya tahu bahwa data-toggle digunakan untuk mengarahkan API JavaScript dari Bootstrap dengan fungsi grafis.
Jawaban:
data-target
digunakan oleh bootstrap untuk membuat hidup Anda lebih mudah. Anda (kebanyakan) tidak perlu menulis satu baris Javascript untuk menggunakan komponen JavaScript yang telah dibuat sebelumnya .
The data-target
atribut harus berisi pemilih CSS yang menunjuk ke Element HTML yang akan diubah.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
[...]
</div>
Dalam contoh ini, tombol tersebut data-target="#myModal"
, jika Anda mengkliknya, <div id="myModal">...</div>
akan dimodifikasi (dalam hal ini menjadi kabur). Ini terjadi karena #myModal
dalam pemilih CSS menunjuk ke elemen yang memiliki id
atribut dengan myModal
nilai.
Informasi lebih lanjut tentang atribut "data-" HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
data-target
menerima pemilih CSS yang menunjuk ke elemen yang relevan.
Sakelar memberi tahu Bootstrap apa yang harus dilakukan dan target memberi tahu Bootstrap elemen mana yang akan dibuka. Jadi setiap kali link seperti itu diklik, modal dengan id "basicModal" akan muncul.