Latest web development tutorials

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:

Dasar Tombol menu drop-down

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:

tombol perpecahan menu drop-down

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:

Ukuran tombol menu pull-down

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:

tombol menu bawah