Pada tutorial selanjutnya kita akan belajar bagaimana cara membuat button dengan Bootstrap, pada Bootstrap telah menyediakan berbagai style button/tombol, berikut class class yang digunakan untuk membuat button.
Class Style Button
Berikut ini adalah class untuk style button
- btn
- btn-default
- btn-primary
- btn-success
- btn-info
- btn-warning
- btn-danger
- btn-link
Class tersebut dapat digunakan pada tag <input>,<a> atau <button>, untuk menggunakannya, dapat dilihat pada syntax dibawah ini.
<button type="button" class="btn">Klik Saya</button>
<button type="button" class="btn btn-default">Klik Saya</button>
<button type="button" class="btn btn-primary">Klik Saya</button>
<button type="button" class="btn btn-info">Klik Saya</button>
<button type="button" class="btn btn-success">Klik Saya</button>
<button type="button" class="btn btn-warning">Klik Saya</button>
<button type="button" class="btn btn-danger">Klik Saya</button>
<button type="button" class="btn btn-link">Klik Saya</button>
Hasilnya dapat dilihat pada gambar dibawah ini.
Class Button Size
Berikut ini adalah class untuk membuat ukuran / size button
- btn-lg
- btn-md
- btn-sm
- btn-xs
Untuk menggunakannya, dapat dilihat pada syntax berikut.
<button class="btn btn-primary btn-lg">Besar</button>
<button class="btn btn-success btn-md">Sedang</button>
<button class="btn btn-warning btn-sm">Kecil</button>
<button class="btn btn-danger btn-xs">Ekstra Kecil</button>
Hasilnya dapat dilihat pada gambar dibawah ini.
Class Active dan Disabled
Berikut ini adalah class untuk mengaktifkan tombol (Active Button) dan menonaktifkan tombol (Disabled Button).
- active
- disabled
Untuk menggunakannya, dapat dilihat pada syntax dibawah ini.
<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-danger disabled">Disabled Button</button>
Hasilnya dapat dilihat pada gambar berikut.
Class Block Button
Brikut ini adalah class untuk membuat tombol menjadi melebar.
- btn-block
Untuk menggunakannya, dapat dilihat pada syntax dibawah ini.
<button class="btn btn-primary btn-block">Primary</button>
<button class="btn btn-danger btn-block">Danger</button>
Hasilnya dapat dilihat pada gambar dibawah ini.
Implementasi
Pada tutorial sebelumnya kita pernah membahas cara membuat table dengan bootstrap, sekarang kita akan coba membuat table, yang berisikan data data statis dan memiliki tombol aksi pada tablenya, silahkan tuliskan syntax seperti dibawah ini.
Baca Juga Cara Membuat Table Dengan Bootstrap
<table class="table table-bordered table-responsive">
<thead>
<th>No</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Aksi</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sukiman</td>
<td>@sukiman</td>
<td>sukiman@example.com</td>
<td>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Hapus</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Januar</td>
<td>@januar</td>
<td>januar@example.com</td>
<td>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Hapus</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Wira</td>
<td>@wira</td>
<td>wira@example.com</td>
<td>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Hapus</a>
</td>
</tr>
<tr>
<td>4</td>
<td>Aslihatin Nisa</td>
<td>@aslihatinnisa</td>
<td>aslihatinnisa@example.com</td>
<td>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Hapus</a>
</td>
</tr>
</tbody>
</table>
Hasilnya dapat dilihat pada gambar dibawah ini.
Sekian dulu tutorialnya, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tuliskan komentar anda dibawah ya.
Semoga bermanfaat.
0 komentar:
Post a Comment