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. Show
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 4Untuk contoh pembuatan button group, silahkan perhatikan skrip dibawah ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Button Groups Bootstrap 4</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary">Tombol 2</button> <button type="button" class="btn btn-primary">Tombol 3</button> <button type="button" class="btn btn-primary">Tombol 4</button> <button type="button" class="btn btn-primary">Tombol 5</button> </div> </div> </body> </html> Semisal kita simpan dengan nama button_groups.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :  Keterangan :
Mengatur ukuran Button GroupsDibagian 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Ukuran Besar :</h3> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary">Tombol 2</button> <button type="button" class="btn btn-primary">Tombol 3</button> <button type="button" class="btn btn-primary">Tombol 4</button> <button type="button" class="btn btn-primary">Tombol 5</button> </div> <h3>Ukuran Standart :</h3> <div class="btn-group"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary">Tombol 2</button> <button type="button" class="btn btn-primary">Tombol 3</button> <button type="button" class="btn btn-primary">Tombol 4</button> <button type="button" class="btn btn-primary">Tombol 5</button> </div> <h3>Ukuran Standart : </h3> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary">Tombol 2</button> <button type="button" class="btn btn-primary">Tombol 3</button> <button type="button" class="btn btn-primary">Tombol 4</button> <button type="button" class="btn btn-primary">Tombol 5</button> </div> </div> </body> </html> Semisal kita simpan dengan nama ukuran_button_group.html, lalu kita buka di browser : Keterangan :
Vertical Button GroupJika 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Vertical Group Button</h3> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary">Tombol 2</button> <button type="button" class="btn btn-primary">Tombol 3</button> <button type="button" class="btn btn-primary">Tombol 4</button> <button type="button" class="btn btn-primary">Tombol 5</button> </div> </div> </body> </html> Semisal kita simpan dengan nama vertical_button_group.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut ini : Keterangan :
Membuat Dropdown menu pada button groupsPada bagian ini kita akan membahas mengenai dropdown menu pada button group, untuk contohnya adalah sebagai berikut ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dropdown Menu Button Group</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary">Tombol 2</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Tombol 3 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Sub Menu 1 - Tombol 3</a> <a class="dropdown-item" href="#">Sub Menu 2 - Tombol 3</a> </div> </div> </div> </div> </body> </html> Semisal kita simpan dengan nama dropdown_menu_button_group.html, lalu buka di browser maka hasilnya adalah sebagai berikut ini : Keterangan :
Membuat Split Dropdown MenuJika 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Split Button Dropdowns</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Sub Menu 1 - Tombol 1</a> <a class="dropdown-item" href="#">Sub Menu 2 - Tombol 1</a> </div> </div> </div> <br/> <br/> <br/> <br/> </body> </html> Semisal kita simpan dengan nama split_button_dropdown.html, maka hasilnya adalah sebagai berikut ini : Keterangan :
Vertical Dropdown MenuDalam bagian ini kita akan mengkolaborasikan antara group button dengan mode vertical, serta kita berikan sub menu, untuk contoh skripnya adalah seperti berikut ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Vertical Drop Down Menu</h2> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary">Tombol 2</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Tombol 3 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Sub Menu 1</a> <a class="dropdown-item" href="#">Sub Menu 2</a> </div> </div> </div> </div> <br/> <br/> <br/> <br/> </body> </html> Semisal kita simpan dengan nama vertical_dropdown_menu.html, maka ketika diakses di browser hasilnya adalah seperti berikut : Keterangan :
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. Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?untuk mengubah ukuran tombol, bootstrap telah menyediakan class khusus. Untuk membuat tombol yang berukuran kecil, gunakan class .btn-sm. Untuk membuat tombol yang berukuran besar dengan bootstrap, gunakan class .btn-lg.
Manakah class bawaan bootstrap 4 untuk menghasilkan tombol button yang lebih besar dari ukuran default?btn-lg merupakan class bootstrap untuk membuat tombol dengan ukuran besar.
Class apa yang digunakan untuk membuat gambar menjadi lingkaran?class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.
|
Cara menggunakan mengatur posisi button bootstrap
Pos Terkait
Copyright © 2024 ketajaman Inc.
