Jawaban:
Ini adalah atribut data Bootstrap yang secara otomatis menghubungkan elemen ke jenis widgetnya. Data- * adalah bagian dari spec html5, dan data-toggle khusus untuk Bootstrap.
Beberapa contoh:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"Buka dokumen Bootstrap JavaScript dan cari data-toggle dan Anda akan melihatnya digunakan dalam contoh kode.
Satu contoh kerja:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Item</a></li>
</ul>
</div>Atribut apa pun yang dimulai dengan data-adalah awalan untuk atribut khusus yang digunakan untuk beberapa tujuan tertentu (tujuan itu tergantung pada aplikasi). Itu ditambahkan sebagai obat semantik untuk penggunaan banyak orang reldan atribut lainnya untuk tujuan selain tujuan semula yang dimaksudkan ( relsering digunakan untuk menyimpan data untuk hal-hal seperti tooltips canggih).
Dalam hal Bootstrap, saya tidak terbiasa dengan cara kerja bagian dalamnya, tetapi jika dilihat dari namanya, saya kira itu adalah pengait yang memungkinkan pengalih pandang dari visibilitas atau mungkin mode elemen yang dilampirkannya (seperti yang dapat dilipat) bilah samping di Octopress.org ).
html5doctor memiliki artikel bagus tentang atribut data .
Siklus 2 adalah contoh lain dari penggunaan atribut data yang ekstensif .
Misalnya, Anda membuat aplikasi web untuk membuat daftar dan menampilkan resep. Anda mungkin ingin pelanggan Anda dapat mengurutkan daftar, menampilkan fitur resep, dan sebagainya sebelum mereka memilih resep untuk dibuka. Untuk melakukan ini, Anda perlu mengasosiasikan hal-hal seperti waktu memasak, bahan utama, posisi makan, dan sebagainya tepat di dalam elemen daftar untuk resep.
<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>Untuk memasukkan informasi itu ke halaman, Anda dapat melakukan banyak hal berbeda. Anda dapat menambahkan komentar ke setiap elemen LI, Anda dapat menambahkan atribut rel ke item daftar, Anda dapat menempatkan semua resep dalam folder terpisah berdasarkan waktu, makan, dan bahan (yaitu). Solusi yang diambil sebagian besar pengembang adalah menggunakan atribut kelas untuk menyimpan informasi tentang elemen saat ini. Ini memiliki beberapa keunggulan:
Tetapi ada beberapa kelemahan utama dari metode ini:
Semua metode lain yang saya sarankan memiliki masalah ini dan juga yang lain. Tetapi karena itu adalah satu-satunya cara untuk memasukkan data dengan cepat dan mudah, itulah yang kami lakukan. Atribut Data HTML5 untuk Penyelamatan
HTML5 menambahkan tipe atribut baru ke elemen apa pun — elemen data khusus (data- *). Ini adalah atribut khusus (dilambangkan dengan *) yang dapat Anda tambahkan ke elemen HTML Anda untuk menentukan jenis data apa pun yang Anda inginkan. Mereka terdiri dari dua bagian:
Nama Atribut Ini adalah nama atribut. Itu harus setidaknya satu karakter huruf kecil dan memiliki data awalan-. Misalnya: data-bahan utama, data waktu memasak, data-makan. Ini adalah nama data Anda.
Atribut Vaule Seperti atribut HTML lainnya, Anda memasukkan data itu sendiri dalam tanda kutip yang dipisahkan oleh tanda sama dengan. Data ini dapat berupa string apa pun yang valid pada halaman web. Misalnya: data-main-ingredient = "chocolate".
Anda kemudian dapat menerapkan atribut data ini ke elemen HTML apa pun yang Anda inginkan. Misalnya, Anda dapat menentukan informasi dalam daftar contoh di atas:
<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>Setelah Anda memiliki informasi itu dalam HTML Anda, Anda akan dapat mengaksesnya dengan JavaScript dan memanipulasi halaman berdasarkan data itu.
Dari Bootstrap Docs:
<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a
controller element, like a button, along with a data-target="#foo" or href="#foo"
to target a specific modal to toggle.-->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>Begitu banyak jawaban telah diberikan, tetapi mereka tidak sampai pada intinya. Mari kita perbaiki ini.
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
Langsung ke intinya
data-tidak diuraikan oleh parser HTML5.data-toggleatribut untuk membuat fungsionalitas runtuh.Cara menggunakan : Hanya 2 Langkah
class="collapse"ke elemen #Ayang ingin Anda hancurkan.data-target="#A"dan data-toggle="collapse".Tujuan: data-toggleatribut memungkinkan kita untuk membuat kontrol untuk menutup / memperluas div(blok) jika kita menggunakan Bootstrap.
Kehadiran atribut-data ini memberitahu Bootstrap untuk beralih antara kondisi visual atau logis elemen lain pada interaksi pengguna.
Ini digunakan untuk menampilkan modals, konten tab, tooltips dan menu popover serta mengatur keadaan yang ditekan untuk tombol toggle. Ini digunakan dalam berbagai cara tanpa dokumentasi yang jelas.
Tujuan dari toggle data di bootstrap adalah agar Anda dapat menggunakan jQuery untuk menemukan semua tag dari jenis tertentu. Misalnya, Anda meletakkan data-toggle = "popover" di semua tag popover dan kemudian Anda dapat menggunakan pemilih JQuery untuk menemukan semua tag tersebut dan menjalankan fungsi popover () untuk menginisialisasi mereka. Anda juga bisa memasukkan class = "myPopover" pada tag dan menggunakan pemilih .myPopover untuk melakukan hal yang sama. Dokumentasinya membingungkan, karena membuatnya tampak bahwa sesuatu yang istimewa sedang terjadi dengan atribut itu.
Ini
<div class="container">
<h3>Popover Example</h3>
<a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
<a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>
<script>
$(document).ready(function(){
$('.myPop').popover();
});
</script>berfungsi dengan baik.
Bootstrap memanfaatkan standar HTML5 untuk mengakses atribut elemen DOM dengan mudah dalam javascript.
Membentuk kelas atribut, yang disebut atribut data khusus, yang memungkinkan informasi hak milik untuk dipertukarkan antara HTML dan representasi DOM-nya yang dapat digunakan oleh skrip. Semua data khusus tersebut tersedia melalui antarmuka HTMLElement dari elemen yang diset atribut. Properti HTMLElement.dataset memberikan akses kepada mereka.