Tutorial Bootstrap 4

Tutorial Belajar Bootstrap 4 Part 6 – Membuat Button Group dengan Bootstrap

Dalam tutorial kali ini kita masih belajar fitur bootstrap yang berhubungan dengan tombol, jika sebelumnya kita telah membahas mengenai cara membuat tombol dengan bootstrap, dalam tutorial kali ini kita akan belajar mengenai cara membuat button group dengan bootstrap, istilah button group ini adalah membuat kelompok tombol, semisal untuk keperluan menu baik itu menu vertical ataupun horizontal.

Terdapat beberapa class yang bisa anda gunakan untuk membuat group tombol dengan bootstrap 4, baik kita langsung bahas satu persatu dalam tutorial kali ini..

 

Membuat Button Groups dengan bootstrap 4

Untuk contoh pembuatan button group, silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama button_groups.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

  • Dalam contoh skrip diatas kita membuat sebanyak 5 tombol, dan tombol tersebut kita letakkan diantara tag <div> yang menggunakan class “btn-group” sehingga akan mengelompokkan tombol tersebut, dan ditampilkan dengan tampilan horizontal.

 

 

 

Mengatur ukuran Button Groups

Dibagian sebelumnya kita sudah membahas mengenai button groups, dalam bagian ini kita akan membahas mengenai bagaimana cara mengatur ukuran dari button groups, untuk contohnya silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama ukuran_button_group.html, lalu kita buka di browser :

Keterangan :

  • Penulisannya skripnya sama dengan cara sebelumnya, yang membedakan hanyalah adanya class tambahan pada tag <div> yang mengapit tombol.
  • class .btn-group-lg    : digunakan untuk membuat button group dengan ukuran besar
  • class .btn-group        : digunakan untuk membuat button group dengan ukuran standart
  • class .btn-group-sm : digunakan untuk membuat button group dengan ukuran kecil

 

 

 

Vertical Button Group

Jika dalam contoh – contoh sebelumnya kita sudah belajar mengenai button group dengan posisi horizontal, dalam bagian ini kita akan belajar untuk membuat button group tetapi dengan mode vertical, perhatikan contoh skrip dibawah ini :

Semisal kita simpan dengan nama vertical_button_group.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut ini :

Keterangan :

  • Tombol ditampilkan dengan mode vertical, karena kita menambahkan class btn-group-vertical, pada tag <div> yang digunakan untuk mengapit tombol.

 

 

 

Membuat Dropdown menu pada button groups

Pada bagian ini kita akan membahas mengenai dropdown menu pada button group, untuk contohnya adalah sebagai berikut ini :

Semisal kita simpan dengan nama dropdown_menu_button_group.html, lalu buka di browser maka hasilnya adalah sebagai berikut ini :

Keterangan :

  • pada button tombol 3, kita berikan class dropdown-toggle, lalu ada attribute data-toggle dengan value dropdown
  • Berikutnya kita buat tag <div> dengan class “dropdown-menu” dimana didalamnya terdapat tombol yang akan dijadikan sub menu dari tombol 3
  • untuk bisa menggunakan dropdown menu, anda harus menambahkan file popper.min.js, sehigga perlu menuliskan <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js”></script>

 

 

 

 

Membuat Split Dropdown Menu

Jika dalam bagian sebelumnya kita telah belajar untuk membuat dropdown menu, tapi parent menunya tidak bisa di klik, nah dibagian ini kita akan belajar untuk membuat dropdown menu yang parent menunya juga bisa di klik, untuk contoh perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama split_button_dropdown.html, maka hasilnya adalah sebagai berikut ini :

Keterangan :

  • Tombol 1 bisa diklik dan memiliki dropdown menu, caranya anda harus menambahkan button lagi setelah tombol 1 dengan class dropdown-toggle dan  dropdown-toggle-split, serta attribute data-toggle dengan value dropdown, untuk isi dari tombolnya adalah tag <span> dengan class caret.
  • Setelah itu baru anda buat tag <div> dengan class dropdown-menu yang berisi tombol untuk bagian sub menu.

 

 

Vertical Dropdown Menu

Dalam bagian ini kita akan mengkolaborasikan antara group button dengan mode vertical, serta kita berikan sub menu, untuk contoh skripnya adalah seperti berikut ini  :

Semisal kita simpan dengan nama vertical_dropdown_menu.html, maka ketika diakses di browser hasilnya adalah seperti berikut :

Keterangan :

  • Untuk mengkolaborasikan button group dengan mode vertical dan dropdown menu, tombol yang digunakan untuk parent dalam hal ini adalah tombol 3 kita tambahkan class dropdown-toogle, serta menambahkan attribute data-toogle dengan value dropdown
  • Sub menu ditampilkan dengan tag <div> class dropdown-menu dan didalamnya kita buat tombol untuk submenu

 

Sekian dulu teman – teman tutorial mengenai cara membuat button groups dengan bootstrap yang digunakan untuk mengelompokkan tombol, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial bootstrap selanjutnya.

2 thoughts on “Tutorial Belajar Bootstrap 4 Part 6 – Membuat Button Group dengan Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *