Tutorial tombol bootstrap menu drop-down Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
contoh,tombol perpecahan menu drop-down,contoh,Ukuran tombol menu pull-down,contoh,tombol menu bawah,contoh,
tombol bootstrap menu drop-down
Bab ini menjelaskan cara menggunakan kelas Bootstrap untuk menambahkan tombol menu drop-down. Untuk menambah tombol menu drop-down, hanya ditempatkan tombol dan menu tarik-turun di.btn-kelompok dapat di.Anda juga dapat menggunakan <span class = "sisipan"> </ span> untuk menunjukkan menu drop down.
Contoh berikut menunjukkan menu dasar tombol sederhana tarik-turun:
contoh
<Div class = "btn-kelompok">
<Tombol ketik = "tombol" class = "btn btn-default dropdown -toggle" Data-ubah = "dropdown"> Default <span class = "sisipan"> </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li>
<A href = "#"> fungsi </ a>
</ Li>
<Li>
<A href = "#"> Fitur lain </ a>
</ Li>
<Li>
<A href = "#"> Lain </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "btn-kelompok">
<Tombol ketik = "tombol" class = "btn btn-primer dropdown -toggle" Data-ubah = "dropdown"> asli <span class = "sisipan"> </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li>
<A href = "#"> fungsi </ a>
</ Li>
<Li>
<A href = "#"> Fitur lain </ a>
</ Li>
<Li>
<A href = "#"> Lain </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
</ Ul>
</ Div>
Coba » Hasilnya adalah sebagai berikut:
tombol perpecahan menu drop-down
tombol split dan menu tarik-turun menggunakan tombol drop-down kira-kira gaya yang sama, tapi menu drop-down untuk menambah fungsi asli. tombol perpecahan yang tersisa dari fitur asli, kanan adalah menu drop-down untuk beralih layar.
contoh
<Div class = "btn-kelompok">
<Tombol ketik = "tombol" class = "btn btn-default" > standar </ button>
<Tombol ketik = "tombol" class = "btn btn-default dropdown -toggle"
Data-ubah = "dropdown">
<Span class = "sisipan"> </ span>
<Span class = "sr-satunya"> saklar menu drop-down </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li> <a href = "#"> fungsi </ a> </ li>
<Li> <a href = "#"> Fitur lain </ a> </ li>
<Li> <a href = "#"> Lain </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> Link terisolasi </ a> </ li>
</ Ul>
</ Div>
<Div class = "btn-kelompok">
<Tombol ketik = "tombol" class = "btn btn-utama" > asli </ button>
<Tombol ketik = "tombol" class = "btn btn-primer dropdown -toggle" Data-ubah = "dropdown">
<Span class = "sisipan"> </ span>
<Span class = "sr-satunya"> saklar menu drop-down </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li> <a href = "#"> fungsi </ a> </ li>
<Li> <a href = "#"> Fitur lain </ a> </ li>
<Li> <a href = "#"> Lain </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> Link terisolasi </ a> </ li>
</ Ul>
</ Div>
Coba » Hasilnya adalah sebagai berikut:
Ukuran tombol menu pull-down
Anda dapat menggunakan menu drop-down dengan berbagaiukuran tombol: .btn-besar, .btn-sm atau .btn-xs.
contoh
<Div class = "btn-kelompok">
<Tombol ketik = "tombol" class = "btn btn-default dropdown -toggle btn-lg" Data-ubah = "dropdown"> Default <span class = "sisipan"> </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li>
<A href = "#"> fungsi </ a>
</ Li>
<Li>
<A href = "#"> Fitur lain </ a>
</ Li>
<Li>
<A href = "#"> Lain </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "btn-kelompok">
<Tombol ketik = "tombol" class = "btn btn-primer dropdown -toggle btn-sm" Data-ubah = "dropdown"> asli <span class = "sisipan"> </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li>
<A href = "#"> fungsi </ a>
</ Li>
<Li>
<A href = "#"> Fitur lain </ a>
</ Li>
<Li>
<A href = "#"> Lain </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "btn-kelompok">
<Tombol ketik = "tombol" class = "btn btn-keberhasilan dropdown -toggle btn-xs" Data-ubah = "dropdown"> sukses <span class = "sisipan"> </ span> </ button>
<Ul class = "dropdown-menu" Peran = "menu">
<Li>
<A href = "#"> fungsi </ a>
</ Li>
<Li>
<A href = "#"> Fitur lain </ a>
</ Li>
<Li>
<A href = "#"> Lain </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
</ Ul>
</ Div>
Coba » Hasilnya adalah sebagai berikut:
tombol menu bawah
Menu juga bisa dibuat, hanya menambahkan.dropup .btn-kelompokuntuk wadah induk.
contoh
<Div class = "row" style = "margin-left: 50px ; margin-top: 200px">
<Div class = "btn-kelompok dropup" >
<Tombol ketik = "tombol" class = "btn btn-default dropdown -toggle" Data-ubah = "dropdown"> Default <span class = "sisipan"> </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li>
<A href = "#"> fungsi </ a>
</ Li>
<Li>
<A href = "#"> Fitur lain </ a>
</ Li>
<Li>
<A href = "#"> Lain </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
</ Ul>
</ Div>
<Div class = "btn-kelompok dropup" >
<Tombol ketik = "tombol" class = "btn btn-primer dropdown -toggle" Data-ubah = "dropdown"> asli <span class = "sisipan"> </ span>
</ Tombol>
<Ul class = "dropdown-menu" Peran = "menu">
<Li>
<A href = "#"> fungsi </ a>
</ Li>
<Li>
<A href = "#"> Fitur lain </ a>
</ Li>
<Li>
<A href = "#"> Lain </ a>
</ Li>
<Li class = "pembagi"> </ li>
<Li>
<A href = "#"> Link terisolasi </ a>
</ Li>
</ Ul>
</ Div>
</ Div>
Coba » Hasilnya adalah sebagai berikut: