Hai teman – teman, kembali lagi di dosenit.com. Setelah kemarin kita membahas mengenai Tabel dan form bootstrap, maka kali ini kita akan membahas salah satu elemen yang penting pada suatu website terutama website yang membutuhkan kontak langsung dengan user yaitu BUTTON.
sebelum membahas lebih dalam mengenai Button pada bootstrap, alangkah baiknya kita membahas mengenai dasar button dalam pemrograman html. Pada html, button dibuat dengan menambahkan tag
<button> tulisan</button>
Didalam tag <button> kita dapat menambahkan banyak tag lain didalamnya seperti <img>, <i>, <strong>, dll. Perhatikan contoh dibawah:
<html>
<head>
<title> belajar button</title>
</head>
<body>
<button>ini button biasa</button><br><br>
<button><i>button tulisan miring</i></button><br><br>
<button><img src="https://www.seekpng.com/png/detail/52-521784_small-png-close-button-icon.png" /></button>
</body>
</html>Didalam button juga dapat kita masukkan java script seperti tag onClick
<html>
<body>
<button type="button" onclick="alert('Hello world!')">Klik</button>
</body>
</html>
Setelah teman-teman mengetahui mengenai dasar tag html dari button, sekarang kita akan memasukkan style bootstrap dan jangan lupa menginputkan link bootstrap di dalam tag head. Disini saya menggunakan bootstrap 4.
Section Artikel
Button bootstrap
Button pada bootstrap terdapat beberapa macam diantaranya
| Tipe Button | Cara memanggil / class yang diperlukan |
|---|---|
| Primary Button | btn btn-primary |
| Secondary Button | btn btn-secondary |
| Success Button | btn btn-success |
| Danger Button | btn btn-danger |
| Warning Button | btn btn-warning |
| Info Button | btn btn-info |
| Light Button | btn btn-light |
| Dark Button | btn btn-dark |
| Link Button | btn btn-link |
| Default button | btn btn-default |
agar lebih jelas lihat script dibawah:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-default">Default</button>
</body>
</html>Selain dengan menggunakan tag <button> dalam bootstrap kita dapat membuat button dengan menggunakan tag <a> dan <input>. contohnya:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
</body>
</html>Dalam contoh – contoh button bootstrap diatas warna latar atau gambar button memenuhi tampilan button secara keseluruhan. Nah bagaimana kalau hanya menampilkan button dengan outlinenya saja tanpa warna latar ataupun gambar ?, untuk itu kita hanya perlu menambahlan class btn-outline- . lihat contoh dibawah
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</body>
</html>Ukuran Button
Dalam bootstrap kita bisa mengatur ukuran button dengan memasukkan tag btn-lg , btn-sm, atau btn-block didalam class button sebelumnya contoh :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
</body>
</html>Aktif / Nonaktif Button
Selain mengatur ukuran dalam bootstrap juga tersedia pilihan tag untuk mengatur kapan kita akan me-aktifkan button atau bahkan men-nonaktifkan atau disable button yang kita buat. contohnya
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg active">button aktif</button>
<button type="button" class="btn btn-primary btn-lg" disabled>button nonaktif</button>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
</body>
</html>Khusus untuk tag <a> dalam menonaktifkan button yang dibuat ada sedikit perbedaan yaitu
- menambahkan class .diabled dalam tag <a>, karena tag <a> tidak mendukung penggunaan attribut disable seperti tag button
- pada tag <a> jika tombol dinonaktifkan harus menyertakan attribut aria-disable=”true” untuk menunjukan status elemennya
- pada tag <a> saat tombol dinonaktifkan tidak akan terlihat kursor menjadi tanda nonaktif (silang), ini berlaku pada beberapa browser yang mendukung “pointer-event”
Button pada bootstrap juga dapat kita atur perataannya atau align nya yaitu dengan menambahkan class .float-right untuk button rata kanan, .float-left untuk button rata kiri. Khusus button rata tengah tidak bisa memakai .float-center karena bootstrap tidak mendukung hal tersebut maka sebagai gantinya biasanya saya memakai
<div class=”col text-center”> <button class=”btn btn-primary”>button center</button></div>
untuk perataan button pada bootstrap 3 berbeda dari botstrap 4 yaitu menggunakan .pull-right atau .pull-left. sedangkan rata tengah sama dengan bootstrap 4.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-outline-primary float-right">kanan</button><br><br>
<button type="button" class="btn btn-outline-secondary float-left">kiri</button><br><br>
<div class="col text-center">
<button class="btn btn-outline-primary">button center dengan div</button>
</div>
</body>
</html>Itulah tutorial sedikit tentang penggunaan button pada Bootstrap khususnya pada bootstrap 4, selain hal – hal diatas teman -teman juga dapat men-modifikasi sendiri style dari button teman-teman.
Caranya yaitu dengan mengatur tag button dengan CSS. Sehingga tampilan nya dapat kita gabungkan antara desain button kita dengan desain dari bootstrap agar terlihat lebih bagus.
