Home / Bootstrap / Tutorial Bootstrap Bagian 5: Membuat Tombol/ button dengan Bootstrap

Tutorial Bootstrap Bagian 5: Membuat Tombol/ button dengan Bootstrap

Lanjutan tutorial boostrap kali ini, kita akan membahas cara membuat button dengan bootstrap. Button/tombol digunakan untuk submit(mengirimkan) dan reset(mengosongkan) isi data yang sudah di inputkan dalam sebuah form. Button juga dapat digunakan sebagai link atau tautan. Agar tampilan sebuah website lebih menarik dan interaktif, di dalam css bootstrap juga sudah tersedia pilihan button yang beragam, mulai dari segi ukuran maupun warna.

Cara membuat button dengan bootstrap tidak jauh berbeda dengan tutorial sebelumnya mengenai merancang form dengan bootstrap dan juga membuat tabel dengan bootstrap. Kita tinggal memanggil class yang sudah di sediakan untuk menyesuaikan ukuran button dan juga warnanya, inilah salah satu keunggulan bootstrap yang membuat disukai banyak web developer.

Sebelum menerapkan kedalam contoh membuat button dengan bootstrap, ada baiknya terlebih dahulu kita ketahui ukuran button yang disediakan bootstrap. Berdasarkan ukuran, class button bootstrap terdiri dari empat jenis yaitu:

  • btn-lg
    Untuk membuat button ukuran besar
  • btn-md
    Untuk membuat button ukuran sedang
  • btn-sm
    Untuk membuat button ukuran kecil
  • btn-xs
    Untuk membuat button ukuran sangat kecil/mini

Berdasarkan warna, bootstrap juga menyediakan beberapa jenis class, yaitu:

  • btn-default
    Untuk membuat button berwarna default/putih
  • btn-primary
    Untuk membuat tombol berwarna biru
  • btn-success
    Untuk membuat button berwarna hijau
  • btn-info
    Untuk membuat button berwarna biru muda
  • btn-warning
    Untuk membuat button berwarna orange
  • btn-danger
    Untuk membuat button berwana merah
  • btn-link
    Untuk membuat button tidak memiliki warna atau hanya dalam bentuk link/tulisan biasa

Untuk menggunakan class-class button diatas, terlebih dahulu harus menyertakan class btn sebelum class untuk menentukan ukuran button dan warna button. Semua class Button tersebut dapat kita gunakan dalam tag <button>, <a> dan tag <input>, contoh pertama cara membuat button dengan bootstrap seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Button dalam Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Pada kode diatas, baris 5 kita menyertakan file css bootstrap, kemudian pada baris 12 dan 13 memanggil JQuery dan javascript bootstrap. File css, Jquery dan Css Bootstrap wajib kita lakukan setiap menggunakan bootstrap.
  • Pada baris  8 sampai 11, kita menggunakan class button dengan cara class=”btn btn-default” jadi terlebih kita dahulu harus memanggil class btn sebelum class untuk menentukan warna dan ukuran. Hasilnya ketika dijalankan menggunakan browser sebagai berikut

Hasil contoh membuat button dengan bootstrap

Contoh kedua cara membuat button dengan bootstrap untuk menentukan ukuran button, dapat di lihat pada contoh dibawah:

<!DOCTYPE html>
<html>
  <head>
    <title>Button dalam Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <input class="btn btn-default btn-lg" type="submit" value="Button Ukuran Besar">
    <input class="btn btn-default btn-md" type="submit" value="Button Ukuran Sedang">
    <input class="btn btn-default btn-sm" type="submit" value="Button Ukuran Kecil">
    <input class="btn btn-default btn-xs" type="submit" value="Button Ukuran Mini">
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada kode diatas, kita menambahkan class btn-lg untuk membuat button ukuran besar, btn-md untuk membuat button ukuran sedang, btn-sm untuk membuat button ukuran kecil dan class btn-xs untuk membuat button ukuran mini. Hasilnya seperti gambar berikut:

Hasil contoh ukuran button dengan bootstrap

Selanjutnya, seperti yang saya sebutkan sebelumnya, kita juga dapat merubah warna button dengan menambahkan class. Penggunaanya seperti kode berikut

<!DOCTYPE html>
<html>
  <head>
    <title>Button dalam Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <input class="btn btn-default btn-lg" type="submit" value="Button Besar Warna Putih">
    <input class="btn btn-primary btn-lg" type="submit" value="Button Besar Warna Biru">
    <input class="btn btn-success btn-lg" type="submit" value="Button Besar Warna Hijau">
    <input class="btn btn-info btn-lg" type="submit" value="Button Besar Biru Muda">
    <input class="btn btn-warning btn-lg" type="submit" value="Button Besar Orange">
    <input class="btn btn-danger btn-lg" type="submit" value="Button Besar Merah">
    <input class="btn btn-link btn-lg" type="submit" value="Button Besar dalam Bentuk Link/Tulisan">
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada kode diatas, kita menambahkan class btn-primary,btn-info, btn-success dan lain-lain untuk membuat warna button dengan bootstrap. Hasilnya sebagai berikut:

Hasil contoh warna button dengan bootstrap

Sebagai tambahan, selain class untuk ukuran button, kita juga dapat menambahkan class btn-block untuk membuat button yang lebarnya mengikuti kolom yang di sediakan. Selamat mencoba, jika ada pertanyaan silakan isikan pada kotak komentar.

Demikian tutorial bootstrap bagian5: Membuat tombol/ button dengan Bootstrap, yang membahas tentang class-class bootstrap yang dapat kita gunakan untuk membuat button. Semoga bermanfaat

Pada tutorial selanjutnya, kita akan membahas tentang cara Mengatur Tampilan Gambar dengan Bootstrap.

Comments

comments

About admin

admin
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

Your email address will not be published. Required fields are marked *

Inline
Inline