Belajar Bootstrap mengasyikkan juga. Kali ini mencatat kode buttons Bootstrap yang sangat mudah hanya dengan menambahkan class langsung bisa jadi bagus. Untuk urusan perintah dan jenis type buttonnya bisa disesuaikan kebutuhan pada aplikasi.
Berikut ini adalah daftar tampilan button, dan dibawah ada kode tag HTML penulisannya. karena seringkali lupa kalau tidak dicatat.
Intinya ada 6 jenis warna dan satu model link seperti tag anchor, yaitu Default
, Primary
, Success
, Info
, Warning
, Danger
, Link
. Ukurannya ada 4 jenis.
Ada variasi lain yaitu block level buttons. Tampilannya seperti berikut ini:
Nah tag HTML-nya seperti dibawah ini:
<p>
<button type="button" class="btn btn-lg btn-default">Def</button>
<button type="button" class="btn btn-lg btn-primary">Pri</button>
<button type="button" class="btn btn-lg btn-success">Suc</button>
<button type="button" class="btn btn-lg btn-info">Inf</button>
<button type="button" class="btn btn-lg btn-warning">War</button>
<button type="button" class="btn btn-lg btn-danger">Dan</button>
<button type="button" class="btn btn-lg btn-link">Lin</button>
</p>
<p>
<button type="button" class="btn btn-default">Def</button>
<button type="button" class="btn btn-primary">Pri</button>
<button type="button" class="btn btn-success">Succ</button>
<button type="button" class="btn btn-info">Info</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>
</p>
<p>
<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-link">Link</button>
</p>
Berikut tag HTML-nya untuk block level buttons:
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
Sekian dulu, sudah cukup sebagai pengingat.