Belajar Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap

MEMBUAT TOMBOL DENGAN BOOTSTRAP
Selain mampu membuat tabel, Bootstrap juga memiliki fungsi untuk membuat tombol yang responsive dan terlihat modern. Untuk membuat tombol cukup mudah hanya memberikan class "btn" untuk mendefinisikan element. Kemudian kita tinggal mengatur warna element yang kita inginkan.

Bootstrap menyediakan beberapa class untuk membuat tombol yang responsive dan menarik. Adapun beberapa class yang digunakan untuk membuat tombol dan mengatur warna tombolnya dengan Bootstrap

.btn : Merupakan class Bootstrap yang digunakan untuk menbuat tombol
.btn-xs : Digunakan untuk membuat tombol dengan ukuran extra kecil
.btn-sm : Digunakan untuk membuat tombol dengan ukuran kecil
.btn-md : Digunakan untuk membuat tombol dengan ukurang sedang
.btn-lg : Digunakan untuk membuat tombol dengan ukuran besar
.btn-danger : Digunakan untuk membuat tombol berwarna merah
.btn-warning : Digunakan untuk membuat tombol berwarna kuning
.btn-success : Digunakan untuk membuat tombol berwarna hijau
.btn-primary : Digunakan untuk membuat tombol berwarna biru
.btn-info : Digunakan untuk membuat tombol berwarna biru muda
.btn-default : Digunakan untuk membuat tombol dengan warna standart bootstrap yaitu berwarna abu - abu

CARA MEMBUAT TOMBOL DENGAN BOOTSTRAP
Untuk membuat tombol dengan Bootstrap sobat dapat menggunakan tag <button> atau juga bisa menggunakan tag <a> alias hyperlink dan menyisipkan class Button pada Bootstrap. Berikut ini contoh penggunaan class - class Bootstrap yang telah dijelaskan diatas.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 4 : Membuat tombol dengan 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>Cara Membuat tombol dengan Bootstrap</h1>
    <a href="#" class="btn btn-success btn-lg">Tombol</a>
    <a href="#" class="btn btn-success btn-md">Tombol</a>
    <a href="#" class="btn btn-success btn-sm">Tombol</a>
    <a href="#" class="btn btn-success btn-xs">Tombol</a>
    <br/><br/>    
    <a href="#" class="btn btn-primary btn-lg">Tombol</a>
    <a href="#" class="btn btn-primary btn-md">Tombol</a>
    <a href="#" class="btn btn-primary btn-sm">Tombol</a>
    <a href="#" class="btn btn-primary btn-xs">Tombol</a>
    <br/><br/>
    <a href="#" class="btn btn-info btn-lg">Tombol</a>
    <a href="#" class="btn btn-info btn-md">Tombol</a>
    <a href="#" class="btn btn-info btn-sm">Tombol</a>
    <a href="#" class="btn btn-info btn-xs">Tombol</a>
    <br/><br/>
    <a href="#" class="btn btn-danger btn-lg">Tombol</a>
    <a href="#" class="btn btn-danger btn-md">Tombol</a>
    <a href="#" class="btn btn-danger btn-sm">Tombol</a>
    <a href="#" class="btn btn-danger btn-xs">Tombol</a>
    <br/><br/>
    <a href="#" class="btn btn-warning btn-lg">Tombol</a>
    <a href="#" class="btn btn-warning btn-md">Tombol</a>
    <a href="#" class="btn btn-warning btn-sm">Tombol</a>
    <a href="#" class="btn btn-warning btn-xs">Tombol</a>
    <br/><br/>
    <a href="#" class="btn btn-default btn-lg">Tombol</a>
    <a href="#" class="btn btn-default btn-md">Tombol</a>
    <a href="#" class="btn btn-default btn-sm">Tombol</a>
    <a href="#" class="btn btn-default btn-xs">Tombol</a>
</body>
</html>

Hasilnya seperti ini

Perhatikan pada contoh diatas saya memberikan class "btn" pada tag <a> agar tombol Bootstrap berjalan. dan dibelakangnya saya berikan "btn-success" untuk merubah warnanya menjadi hijau dan "btn-lg" untuk mengatur ukuran dari tombol tersebut.

KESIMPULAN
Jadi untuk membuat tombol dengan Bootstrap kita dapat menggunakan class "btn" dan dapat kita atur warna dan ukuranya seperti yang sudah saya jelaskan diatas. Nah saya kira sampai sini saja artikel kali ini jika ada pertanyaan silahkan berikan Komentar, Sekian Terima Kasih

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :