Apa yang dimaksud dengan atribut `data-target` di Bootstrap 3?

95

Dapatkah Anda memberi tahu saya apa sistem atau perilaku di balik data-targetatribut yang digunakan oleh Bootstrap 3?

Saya tahu bahwa data-toggle digunakan untuk mengarahkan API JavaScript dari Bootstrap dengan fungsi grafis.

twitter-bootstrap-3 wanita gelap
sumber

Jawaban:

115

data-targetdigunakan 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-targetatribut harus berisi pemilih CSS yang menunjuk ke Element HTML yang akan diubah.

Kode Contoh Modal dari BS3 :

<!-- 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 #myModaldalam pemilih CSS menunjuk ke elemen yang memiliki idatribut dengan myModalnilai.

Informasi lebih lanjut tentang atribut "data-" HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Pascalmh
sumber
1
ini seperti mesin CSS pemilih dan tidak ada yang lain?
perempuan gelap
1
@miltone - tepatnya, tidak seperti. data-targetmenerima pemilih CSS yang menunjuk ke elemen yang relevan.
PhistucK
20

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.

pengguna3098847
sumber