Bootstrap 3 Button - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Button

Button adalah bagian pelengkap untuk situs web dan aplikasi. Button digunakan untuk berbagai tujuan seperti, mengirim sebuah data atau mengatur ulang bentuk HTML, melakukan tindakan interaktif yang dilakukan oleh user seperti menampilkan atau menyembunyikan sesuatu bagian di halaman web ketika tombol tersebut di klik atau ditekan.

Bootstrap 3 sudah menyediakan cara cepat, praktis dan mudah digunakan guna keperluan pembuatan sebuah tombol atau button

Tampilan Bootstrap 3 Button

Tampilan Button bisa diaplikasikan ke elemen HTML lainnya. Tapi, untuk penerapan secara normal dan terbaik adalah element <a>, <input> (untuk type button, submit dan reset), dan <button>.

Untuk mengatur tampilan button menggunakan Bootstrap 3 dapat menggunakan nama class sebagai berikut :

1. .btn
   • Nama class .btn adalah nama class dasar yang harus ditulis sebelum nama class lainnya.
   • Contoh Penulisan : <button type="button" class="btn">Button</button>
2. .btn-default
   • Contoh Penulisan : <button type="button" class="btn btn-default">Default</button>
3. .btn-primary
   • Contoh Penulisan : <button type="button" class="btn btn-primary">Primary</button>
4. .btn-info
   • Contoh Penulisan : <button type="button" class="btn btn-info">Info</button>
5. .btn-success
   • Contoh Penulisan : <button type="button" class="btn btn-success">Success</button>
6. .btn-warning
   • Contoh Penulisan : <button type="button" class="btn btn-warning">Warning</button>
7. .btn-danger
   • Contoh Penulisan : <button type="button" class="btn btn-danger">Danger</button>
8. .btn-link
   • Contoh Penulisan : <button type="button" class="btn btn-link">link</button>

Contoh :

<button type="button" class="btn">Dasar</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">link</button>

Contoh menggunakan element <a> dan <input>

<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-success" href="#">Success</a>
  <hr/>
<input type="button" class="btn btn-default" value="Button"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-danger" value="Reset"/>

Ukuran Button

Untuk mengatur ukuran button dapat menambahkan class .btn-xs, .btn-sm, .btn-md, dan .btn-lg

Keterangan :

• .btn-xs : sangat kecil
• .btn-sm : kecil
• .btn-md : sedang
• .btn-lg : besar

Contoh :

<button type="button" class="btn btn-info btn-xs">Button .xs</button>
<button type="button" class="btn btn-info btn-sm">Button .sm</button>
<button type="button" class="btn btn-info btn-md">Button .md</button>
<button type="button" class="btn btn-info btn-lg">Button .lg</button>

Bootstrap 3 Button Block

Digunakan untuk membuat tampilan button menjadi membentang dari kanan kekiri meyesuaikan lebar dari element induknya.

Untuk menerapkan button block tambahkan class .btn-block

Contoh :

<button type="button" class="btn btn-danger btn-block">Button Block</button>

Bootstrap 3 Button Active dan Disabled

Button active artinya mempunyai tampilan seperti ditekan, sedangkan button disabled artinya mempunyai tampilan seperti ditak aktif

Untuk menerapkannya gunakan class .active untuk aktif dan .disabled untuk nonaktif

Catatan : class .disabled pada button hanya mempengaruhi tampilan saja, tidak pada fungsi interaksi oleh user atau pengunjung. Misal jika .disabled mempunyai fungsi javascript maka, saat user menekan tombol tersebut javascript tersebut akan aktif.

Tips : untuk menonaktifkan fungsi pada button sertakan attribute disabled pada button

Contoh :

<button class="btn btn-danger">Button</button>
<button class="btn btn-danger active">Button Active</button>
<button class="btn btn-danger disabled">Button Disabled</button>