Belajar Bootstrap Bagian 3: Membuat Tombol Dengan Bootstrap

Membuat Tombol Dengan Bootstrap

Pada bagian sebelumnya kita sudah mempelajari bagaimana implementasi bootstrap ke dalam tampilan web yang akan kita buat. Namun pada bagian sebelumnya kita belum melihat hasil dari implementasi tersebut, nah maka dari itu kelanjutan dari bahasan sebelumnya akan dibahas pada bagian 3 ini.

Pada bagian ini kita akan mempelajari salah satu contoh sederhana tapi tetap penting untuk dipelajari dari bootstrap yaitu membuat tombol. Tombol merupakan salah satu elemen penting dalam suatu website yang sangat berguna untuk membantu mengakomodir keinginan user. Tentu kita akan bosan melihat tampilan tombol bawaan html yang terlihat kaku. Maka dari itu kita akan belajar bagaimana membuat tombol terlihat menarik dengan bootstrap. Saya berasumsi bahwa anda sudah mendownload bootstrap pada tahap ini.

Pada bootstrap, tombol dapat dikelompokkan dalam ukuran dan warna.

Membuat tombol dengan berbagai ukuran

btn-lg : ukuran tombol ini yaitu large (ukuran tombol yang paling besar di bootstrap)
btn-md : ukuran sedang
btn-sm : ukuran kecil
btn-xs : ukurannya ekstra kecil (yang paling kecil di bootstrap)

Kita langsung saja ke contoh code-nya:


<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
 </head>
 <body>
  <h3>Belajar Membuat Tombol Dengan Bootstrap</h3>
  <hr>
  <h4>Tombol Berdasarkan Ukuran</h4>
  <button class="btn btn-lg">Tombol btn-lg</button>
  <button class="btn btn-md">Tombol btn-md</button>
  <button class="btn btn-sm">Tombol btn-sm</button>
  <button class="btn btn-xs">Tombol btn-xs</button>
  <br><br>
 </body>
</html>

Nah, kalau sudah selesai maka tampilan tombolnya akan terlihat seperti gambar berikut:

Membuat tombol berwarna

btn-default : tombol ini biasanya akan terlihat berwarna putih/warna dasar website yang kita buat.
btn-primary : tombol primary akan berwarna bitu gelap.
btn-success : tombol success akan berwarna hijau.
btn-info : tombol info akan menjadikan tombol berwarna biru muda.
btn-warning : tombol warning akan berwarna kuning.
btn-danger : tombol akan berwarna merah.

Kita langsung saja ke contohnya:


<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
 </head>
 <body>
  <h4>Tombol Berdasarkan Warna</h4>
  <button class="btn">Tombol btn</button>
  <button class="btn btn-default">Tombol btn-default</button>
  <button class="btn btn-primary">Tombol btn-primary</button>
  <button class="btn btn-info">Tombol btn-info</button>
  <button class="btn btn-success">Tombol btn-success</button>
  <button class="btn btn-warning">Tombol btn-warning</button>
  <button class="btn btn-danger">Tombol btn-danger</button>
 </body>
</html>

Kalau sudah, maka hasilnya kurang lebih akan seperti ini:

Kita perjelas sedikit, jadi untuk mendapatkan hasil seperti diatas kita sudah menyisipkan beberapa class dari bootstrap untuk membuat tombol. Misalnya kalau kita ingin membuat tombol berwarna kuning maka class yang kita panggil adalah btn-warning seperti berikut:

Atau misalkan kita ingin membuat suatu tombol dengan ukuran dan warna sesuai keinginan kita, misalnya saya contohkan disini adalah tombol berwarna hijau dengan ukuran ekstra kecil, maka class yang kita panggil akan menjadi seperti berikut:


<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
 </head>
 <body>
  <h4>Membuat tombol dengan ukuran dan warna tertentu</h4>
  <button class="btn btn-sm btn-success">Tombol xs success</button>
 </body>
</html>

Dan hasilnya kurang lebih akan seperti ini:

Catatan: kalau tombol masih dalam keadaan tampilan tombol bawaan html, coba periksa pemanggilan class-nya sudah benar atau tidak. Atau coba periksa lagi lokasi file dari bootstrap anda apakah sudah benar dengan pemanggilan lokasi di source-nya seperti pada Bagian 2: Belajar Menggunakan Bootstrap.