Tutorial Belajar Bootstrap: Membuat Tombol (Button) Dengan Bootstrap
Button / tombol merupakan elemen yang penting pada sebuah website, maka dari itu dengan penempatan dan membuat tombol yang baik maka membuat website kita menarik, kali ini kita akan membahas bagaimana cara membuat tombol pada bootstrap.
Bagi yang baru bergabung, bisa membaca kembali tulisan sebelumnya tentang pengantar dan cara instal dan menjalankan Bootstrap
Button merupakan salah satu komponen pada bootstrap dan cara membuat tombol adalah dengan menulis atribut class CSS dalam tag HTML, dengan penambahan class ini kita bisa dengan mudah megubah bentuk, warna, ukuran hinggga memberi efek tertentu.
Baiklah teman-teman kita langsung praktek saja bagaimana cara membuat tombol di bootstrap, buat file dengan ekstensi php atau html.
latihan1.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.css">
<title>Latihan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Belajar Bootstrap</h1>
<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>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Untuk membuat tombol pada tag html button maka kita membutuhkan class btn, selanjutnya tinggal memilih warna, maka tambahkan class btn-primary dengan warna biru, kemudian tambahan class btn-secondary untuk warna abu-abu, dan class btn-success untuk warna hijau dan seterusnya, tinggal di sesuaikan dengan kebutuhan.
Hasil dari kode tampilan diatas adalah sebagai berikut.
Selanjutkan untuk membuat tombol ukuran kecil tambahkan class btn-sm , dan tombol ukuran besar btn-lg
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
Membuat blok button maka tambahkan class btn-block
<button type="button" class="btn btn-info btn-sm btn-block">Primary</button>
Membuat tombol aktif tambahkan class active
<button type="button" class="btn btn-primary btn-sm active" >Primary</button>
Membuat tombol disable / tidak aktif tambahkan class disabled
<button type="button" class="btn btn-primary btn-sm" disabled>Primary</button>
Selenjutnya bagaimana membuat tombol dropdowns, berikut kodenya :
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Untuk dokumentasi lebih lengkapnya teman-teman bisa membacanya di components bootstrap button dropdowns
Terima kasih teman-teman sudah berkunjung dan membaca tulisan ini sampai akhir, pada tulisan selanjutkan kita akan membuat Carousel atau slide tampilan gambar yang bergantian dengan bootstrap, jangan sampai ketinggalan ya, semoga bermanfaat.
