Tutorial Belajar Bootstrap 4 Part 5 – Membuat Tombol dengan Bootstrap
Selamat datang di tutorial warung belajar, dalam tutorial kali ini kita masih membahas mengenai tutorial bootstrap 4, jika dalam tutorial sebelumnya kita telah membahas mengenai cara menampilkan gambar dengan bootstrap, dalam tutorial ini kita akan membahas mengenai cara membuat tombol dengan bootstrap.
Bootstrap memiliki beberapa class yang bisa digunakan untuk mengatur tampilan tombol, sehingga tampilan tombol yang anda buat akan lebih menarik, baik kita akan langsung saja memulai pembahasan cara membuat tombol dengan bootstrap.
Style Button dengan Bootstrap 4
kita akan membahas beberapa class yang bisa digunakan untuk style button dengan bootstrap 4, 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 22 23 24 |
<!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>Style Tombol Bootstrap 4</h2> <button type="button" class="btn">Tombol Basic</button> <button type="button" class="btn btn-primary">Tombol Primary</button> <button type="button" class="btn btn-secondary">Tombol Secondary</button> <button type="button" class="btn btn-success">Tombol Success</button> <button type="button" class="btn btn-info">Tombol Info</button> <button type="button" class="btn btn-warning">Tombol Warning</button> <button type="button" class="btn btn-danger">Tombol Danger</button> <button type="button" class="btn btn-dark">Tombol Dark</button> <button type="button" class="btn btn-light">Tombol Light</button> <button type="button" class="btn btn-link">Tombol Link</button> </div> </body> </html> |
Semisal kita simpan dengan nama tombol.html, lalu kita buka dibrowser maka hasilnya adalah seperti berikut ini :
Keterangan :
- Tombol basic ditampilkan dengan warna abu – abu karena tombol menggunakan class btn
- Tombol Primary ditampilkan dengan warna biru karena tombol menggunakan class btn-primary
- Tombol Secondary ditampilkan dengan warna abu – abu sedikit lebih gelap karena tombol menggunakan class btn-secondary
- Tombol Success ditampilkan dengan warna hijau karena tombol menggunakan class btn-success
- Tombol Info ditampilkan dengan warna biru agak kehijauan karena tombol menggunakan class btn-info
- Tombol Warning ditampilkan dengan warna orange karena tombol menggunakan class btn-warning
- Tombol Danger ditampilkan dengan warna Merah karena tombol menggunakan class btn-danger
- Tombol Dark ditampilkan dengan warna Hitam karena tombol menggunakan class btn-dark
- Tombol Light ditampilkan dengan Putih dan text hitam karena tombol menggunakan class btn-light
- Tombol Link ditampilkan dengan warna putih kebiruan dan text biru karena tombol menggunakan class btn-link
Tombol Outline dengan Bootstrap 4
Pada bootstrap 4 anda juga dapat membuat tombol dengan tampilan outline, 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 22 |
<!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>Tombol Outline</h2> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> </div> </body> </html> |
Semisal kita simpan dengan nama tombol_outline.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :
Keterangan :
- Tombol Outline ini memiliki konsep yang sama dengan style button yang telah dijelaskan dibagian sebelumnya, yang menjadi perbedaan tombol outline memiliki effect hover ketika terdapat kursor mouse diatas tombol, warna tombol akan berubah sesuai class yang digunakan.
Mengatur ukuran tombol pada bootstrap
pada bootstrap 4 juga terdapat class yang bisa digunakan untuk mengatur ukuran dari tombol, anda bisa menyesuaikan dengan kebutuhan tombol yang digunakan.
Perhatikan skrip dibawah ini untuk contoh dari penggunaan skrip :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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>Ukuran Tombol</h2> <button type="button" class="btn btn-primary btn-lg">Tombol Ukuran Besar</button> <button type="button" class="btn btn-primary btn-md">Tombol Ukuran Default</button> <button type="button" class="btn btn-primary btn-sm">Tombol Ukuran Kecil</button> </div> </body> </html> |
Semisal kita simpan dengan nama ukuran_tombol_bootstrap.html, lalu kita buka di browser maka hasilnya :
Keterangan :
- Tombol pertama ditampilkan dengan ukuran besar, karena menggunakan class btn-lg
- Tombol kedua ditampilkan dengan ukuran standart, karena menggunakan class btn-md
- Tombol ketiga ditampilkan dengan ukuran kecil, karena menggunakan class btn-sm
Block Level Buttons
Berikutnya kita akan membahas mengenai bagaimana membuat tampilan tombol yang memiliki lebar penuh sesuai parent dari tombol tersebut, nah bingung kan hehehe, ukey
langsung saja kita lihat contoh skripnya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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-fluid"> <h2>Block Level Buttons (Ukuran Standart)</h2> <button type="button" class="btn btn-success btn-block">Button 1</button> <button type="button" class="btn btn-default btn-block">Button 2</button> <h2>Large Block Level Buttons (Ukuran Besar)</h2> <button type="button" class="btn btn-success btn-lg btn-block">Button 1</button> <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button> <h2>Small Block Level Buttons (Ukuran Kecil)</h2> <button type="button" class="btn btn-success btn-sm btn-block">Button 1</button> <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button> </div> </body> </html> |
Semisal kita simpan dengan nama tombol_block.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- Tombol ditampilkan dengan ukuran lebar penuh, karena kita menggunakan class btn-block, serta tombolnya kita letakkan didalam tag <div> dengan class contrainer-fluid sehingga membuat parentnya akan memiliki lebar 100% dari device yang mengakses.
Tombol active dan disabled
Dalam bootstrap 4 terdapat class active dan disabled yang digunakan untuk mengatur tampilan dari tombol.
- Class .active digunakan untuk memberikan tanda pada tombol, ketika tombol telah di klik.
- Class .disabled digunakan untuk mendisabled tombol agar tidak bisa di klik, jika menggunakan tag <button> anda bisa langsung menggunakan attribute disabled bawaan HTML untuk disabled tombol, untuk class .disabled ini khusus digunakan untuk tag <a>
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 |
<!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>Tombol active dan disable</h2> <button type="button" class="btn btn-primary">Tombol 1</button> <button type="button" class="btn btn-primary active">Tombol 2</button> <button type="button" class="btn btn-primary" disabled>Tombol 3</button> <a href="#" class="btn btn-primary disabled">Tombol 4</a> </div> </body> </html> |
Semisal kita simpan dengan tombol_active_disabled, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- Tombol 1 ditampilkan seperti tombol biasa
- Tombol 2 ditampilkan dengan effect seperti tombol yang telah di klik sebelumnya karena menggunakan class .active
- Tombol 3 ditampilkan dengan mode disabled karena kita menggunakan attribute disabled, attribute disabled digunakan jika menggunakan tag <button>
- Tombol 4 ditampilkan dengan mode disabled menggunakan class .disabled karena kita menggunakan tag <a>
Bagaimana teman – teman cukup banyak ya pembahasannya hehehe, baik sekian dulu pembahasan mengenai cara membuat tombol dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial bootstrap selanjutnya.
Informasi ini sangat membantu.