Tutorial Bootstrap Part 10 : Membuat Button Groups di Bootstrap

Assalamu'alaikum Wr. Wb.

A). Pendahuluan 

     Bertemu lagi dengan saya di Blog TONI | BLC Telkom, pada kesempatan kali ini saya akan melanjutkan Tutorial Bootstrap Part 10 yaitu membuat Button Groups di Bootstra. Langsung saja kita ke pembahasannya.

B). Latar Belakang

     Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.

C). Maksud dan Tujuan

• Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.
• Agar lebih mudah membuat sebuah Button Groups.  

D). Pembahasan
       Button Groups ialah sebuah button yang di dalam satu barisan yang sama mempunyai banyak button ( seperti Navigasi ).

Macam-macam button group:

     1. Default Button Groups

    Default Button Groups merupakan Button Groups yang cara menggunakannya kita tinggal memanggil Classnya yaitu .btn .btn group seperti gambar di bawah ini :

       Hasil Script :

      2. Vertical Button Groups

         Vertikal Button Groups merupakan Button Groups yang memiliki posisi Vertikal yaitu dari atas ke bawah dan cara memanggilnya yaitu .btn-group-vertical, seperti gambar di bawah ini :

         Hasil Script :

       3. Nesting Button Groups & Dropdown Menus

         Nesting Button Groups & Dropdown Menus merupakan sebuah Class Button Groups di Bootstrap untuk membuat sebuah Dropdown Menu menggunakan Button Groups, conton penerapannya :

         Hasil Script :

      4. Split Button Dropdowns

       Split Button Dropdowns merupakan sebuah Class di Bootstrap dimana Tombol Button di pisahkan dengan Tombol Dropdownsnya, contoh penerapannya :

         Hasil Script:

E). Kesimpulan
       Button Groups lebih memudahkan kita dalam pembuatan Group Button, dan untuk membuat Dropdown. Kita tidak memerlukan tenaga extra untuk mengedit cssnya mulai dari awal, kita hanya perlu memanggil Class" yang telah di sediakan oleh Bootstrap.

F). Referensi

       http://www.w3schools.com/bootstrap4/bootstrap_button_groups.html

Cukup sekian informasi yang dapat saya berikan pada hari ini, jika ada kesalahan mohon maaf semuanya. Terimakasih telah mengunjungi blog saya dan jangan lupa untuk mengikuti dan membaca selalu postingan di blog saya yang saat ini masih biasa-biasa saja.

  ~ Wassalamu'alaikum Wr. Wb. ~