Bootstrap menu dropdown (Dropdown) widget

Sebelumnya: Bootstrap kotak modal (Modal) widget

Berikutnya: Bootstrap Monitor scroll (Scrollspy) 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">
    ...
  </ 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.html">
    menu (Dropdown) pull-down <span class = "sisipan"> </ span>
  </a>


  <Class Ul = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
  </ 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: