Dropdown Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 di www.malasngoding.com. Show Masih membahas tentang komponen-komponen dan plugin yang disediakan di bootstrap 4. komponen yang akan dibahas pada tutorial bootstrap 4 bagian ke 19 ini adalah komponen atau plugin Dropdown pada bootstrap. Dropdown Bootstrap 4Bootstrap telah menyediakan komponen dropdown. dan cara membuatnya pun cukup mudah. seperti komponen-komponen bootstrap 4 lainnya yang sudah kita bahas pada tutorial-tutorial bootstrap 4 sebelumnya. Kita tinggal menggunakan class-class yang sudah tersedia. Dropdown yang akan dibahas di sini seperti menu dropdown, namun bukan berbentuk menu navigasi, melainkan dibuat menggunakan tombol. jadi tombol yang akan kita buat memiliki navigasi dropdown. Pada saat tombol tersebut diklik, maka akan menampilkan konten atau list link seperti menu dalam bentuk dropdown. Dropdown pada bootstrap dibuat menggunakan library pihak ketiga, yaitu Popper.js. Itulah sebabnya selain menghubungkan css dan js bootstrap, kita perlu meng-include atau menghubungkan juga popper.min.js ke halaman kerja kita. Seperti yang sudah kita bahas pada Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4. Langsung saja kita masuk ke contohnya. PersiapanPastikan teman-teman sudah mengerti cara menghubungkan halaman dengan file css dan file js bootstrap 4. Jika belum silahkan teman-teman baca tutorial sebelumnya dulu tentang cara menggunakan bootstrao 4. Contoh kerangka kerja setelah dihubungkan dengan bootstrap, jquery dan popper.js.
Membuat Dropdown Dengan Bootstrap 4Untuk membuat dropdown menggunakan tombol bootstrap, perhatikan contoh berikut.
Seperti contoh dropdown di atas, isi dari konten yang ingin teman-teman tampilkan pada bagian dropdown nya bisa teman-teman letakkan di dalam class .dropdown-menu seperti di atas, pada contoh ini isi konten dropdownnya kita isi dengan tiga buah link, yaitu HTML, Bootstrap 4 dan CodeIgniter. Pemicu dropdownnya adalah tombol yang kita buat dengan elemen <button> .. </button>. Teman-teman juga bisa menggunakan elemen <a> .. </a> jika mau. Oke sekarang kita lihat hasilnya dulu. silahkan jalankan pada browser.  dropdown bootstrap 4 Contoh tombol di atas kita buat dengan class .btn-primary, sehingga warna tombolnya berwarna biru. Silahkan teman-teman sesuaikan jika ingin diubah. untuk membuat tombol juga sudah kita pelajari pada tutorial sebelumnya, Silahkan baca lagi Tutorial Bootstrap 4 #14 : Tombol Bootstrap 4. Berikut full source code nya.
Split Button DropdownContoh tombol dropdown di atas adalah single button. Bootstrap juga menyediakan split button. jadi tombol akan terbagi 2 atau ada 2 tombol. Tombol biasa dan tombol yang berbentuk panah, konten dropdownnya akan tampil jika yang diklik pada tombol panah. Perhatikan contoh berikut.
Dan hasilnya seperti berikut saat dijalankan. split button dropdown bootstrap 4 Arah KontenContoh di atas akan menanpilkan konten ke arah bawah pada saat tombol di klik, kita juga bisa menentukan arah kontennya pada saat tampil ke kanan (dropright), kiri (dropleft), atas (dropup) atau bawah (dropdown). DroprightUntuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropright pada bagian class .btn-group. Contoh
Hasilnya dropright DropleftUntuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropleft pada bagian class .btn-group. Contoh
Hasilnya dropleft DropupUntuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropup pada bagian class .btn-group. Contoh
Hasilnya seperti berikut dropup DropdownContoh
Hasilnya seperti berikut dropdown PenutupSelangkapnya jika teman-teman ingin membaca lebih luas lagi tentang dropdown bootstrap 4, teman-teman bisa membacanya di sini https://getbootstrap.com/docs/4.3/components/dropdowns/. Silahkan lihat demo dan download source codenya pada link berikut. Download Source Code Demo Incoming search terms:
Berikut ini manakah class yang digunakan untuk membuat gambar thumbnail dengan bootstrap?untuk membuat gambar thumbnail dengan bootstrap, kita bisa menggunakan class img-thumbnail.
HTML apa yang benar untuk membuat daftar drop down?Perhatikan pada file menu.html di atas, untuk membuat menu dropdown, element HTML yang kita gunakan adalah element <ul> <li> .
|
Cara menggunakan dropdown menu bootstrap
Pos Terkait
Copyright © 2024 idkuu.com Inc.
