Dropdown dasar
Sebuah menu dropdown adalah menu toggleable yang memungkinkan pengguna untuk memilih salah satu nilai dari daftar yang tersedia:
Contoh
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Cobalah sendiri " misalnya Dijelaskan
The .dropdown kelas menunjukkan menu dropdown.
Untuk membuka menu dropdown, gunakan tombol atau link dengan kelas .dropdown-toggle dan data-toggle="dropdown" atribut.
The .caret kelas menciptakan ikon tanda sisipan panah ( ) ( ) ( ) , Yang menunjukkan bahwa tombol adalah sebuah dropdown.
Tambahkan .dropdown-menu kelas ke <ul> elemen untuk benar-benar membangun menu dropdown.
Divider dropdown
The .divider kelas digunakan untuk link yang terpisah dalam menu dropdown dengan perbatasan horisontal tipis:
dropdown header
The .dropdown-header kelas digunakan untuk menambahkan header di dalam menu dropdown:
Nonaktifkan Item
Untuk menonaktifkan item dalam menu dropdown, gunakan .disabled kelas:
Posisi dropdown
Ke kanan-menyelaraskan dropdown, menambahkan .dropdown-menu-right kelas untuk elemen dengan .dropdown-menu:
Dropup
Jika Anda ingin menu dropdown untuk memperluas ke atas bukan ke bawah, mengubah <div> elemen dengan class="dropdown" untuk "dropup" :
Aksesibilitas dropdown
Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup sebagai berikut role dan aria-* atribut, saat membuat menu dropdown:
Contoh
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
Menyelesaikan Bootstrap Dropdown Referensi
Untuk referensi lengkap semua pilihan dropdown, metode dan peristiwa, pergi ke kami Bootstrap JS Dropdown Referensi .