Tutorial Bootstrap menu dropdown (Dropdown) widget Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
pemakaian,contoh,contoh,Pilihan,cara,contoh,
Bootstrap menu dropdown (Dropdown) widget
Bootstrap menu dropdown Bab ini menjelaskan menu drop-down, tapi tidak berhubungan dengan bagian interaksi, bab ini akan menjelaskan secara rinci interaksi menu drop-down. Gunakan menu pull-down (Dropdown) plug-in, Anda dapat menambahkan menu drop-down untuk salah satu komponen (seperti navigasi bar, tab, kapsul, menu navigasi, tombol, dll).
Jika Anda ingin merujuk pada plug-in fitur individu, Anda perlu referensidropdown.js.Atau, seperti Bootstrap Ikhtisar Plugin bab disebutkan, Anda bisa merujuk kebootstrap.jsatau versi kompresibootstrap.min.js.
pemakaian
Anda dapat beralih menu hide dropdown (Dropdown) plug-in:
- Melalui atribut Data: link atau tombol untuk menambahkan data-ubah = "dropdown"menu drop-down untuk beralih, sebagai berikut:
<Class Div = "dropdown">
<a data-toggle="dropdown" href="#"> menu drop-down (Dropdown) memicu </a>
<Class Ul = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
id.
</ Ul>
</ Div>
Jika Anda perlu menjaga link utuh (berguna ketika browser tidak diaktifkan JavaScript), gunakandata atribut-target bukan href = "#":
<Class Div = "dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page">
menu (Dropdown) pull-down <span class = "sisipan"> </ span>
</a>
<Class Ul = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
id.
</ Ul>
</ Div>
- Dengan JavaScript: JavaScript dengan memanggil menu drop-down untuk beralih, silakan gunakan metode berikut:
$ ( '. Dropdown-ubah'). Dropdown ()
contoh
Pada panel navigasi
Contoh berikut menunjukkan penggunaan bar navigasi menu drop-down:
contoh
<Nav class = "navbar navbar-default" Peran = "navigasi">
<Div class = "container-cairan">
<Div class = "navbar-header">
<A class = "navbar-merek" href = "#"> tutorial </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "aktif"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "dropdown">
<A href = "#" class = "dropdown-ubah" Data-ubah = "dropdown"> Java <b class = "sisipan"> </ b>
</ A>
<Ul class = "dropdown-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Laporan Jasper </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> Link terisolasi </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> link lain terisolasi </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Coba » Hasilnya adalah sebagai berikut:
Di tab dalam
Contoh berikut menunjukkan penggunaan tab di menu drop-down:
contoh
<P> tag dengan halaman pull-down menu </ p>
<Ul class = "nav nav-tab" >
<Li class = "aktif">
<A href = "#"> Home < / a> </ li>
<Li>
<A href = "#"> SVN < / a> </ li>
<Li>
<A href = "#"> iOS < / a> </ li>
<Li>
<A href = "#"> VB.Net < / a> </ li>
<Li class = "dropdown">
<A class = "dropdown-ubah" Data-ubah = "dropdown" href = "#"> Java < rentang class = "sisipan"> </ span> </ a>
<Ul class = "dropdown-menu">
<Li>
<A href = "#"> Ayunan < / a> </ li>
<Li>
<A href = "#"> Jmeter < / a> </ li>
<Li>
<A href = "#"> EJB < / a> </ li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a> </ li>
</ Ul>
</ Li>
<Li>
<A href = "#"> PHP < / a> </ li>
</ Ul>
Coba » Hasilnya adalah sebagai berikut:
Pilihan
Tidak ada pilihan.
cara
menu drop-down untuk beralih ada cara sederhana untuk menampilkan atau menyembunyikan menu drop-down.
$ (). Dropdown ( 'beralih')
contoh
Contoh berikut menunjukkan menu pull-down (Dropdown) metode plug-in:
contoh
<Nav class = "navbar navbar-default" Peran = "navigasi">
<Div class = "container-cairan">
<Div class = "navbar-header">
<A class = "navbar-merek" href = "#"> W3Cschool < / a>
</ Div>
<Div id = "myexample">
<Ul class = "nav navbar-nav" >
<Li class = "aktif">
<A href = "#"> iOS < / a>
</ Li>
<Li>
<A href = "#"> SVN < / a>
</ Li>
<Li class = "dropdown">
<A href = "#" class = "dropdown-ubah" Data-ubah = "dropdown"> Java <b class = "sisipan"> </ b>
</ A>
<Ul class = "dropdown-menu">
<Li>
<A id = "tindakan-1" href = "#"> jmeter < / a>
</ Li>
<Li>
<A href = "#"> EJB < / a>
</ Li>
<Li>
<A href = "#"> Jasper Laporan </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> link lain terisolasi </ a>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (function () {$ ( "dropdown-ubah.") Dropdown ( 'beralih') ;.}); </ script>
Coba » Hasilnya adalah sebagai berikut: