Hujan turun sebentar kemudian terikan matahari sudah mulai terlihat, tadinya dingin sekarang sudah mulai kembali hangat dengan sengatan terik nya matahari. Pada kesempatan kali ini saya akan berbagi ilmu tentang Mengenal Class Button Style di Bootstrap.
Di Boostrap seperti biasa kita tidak perlu memakai banyak property-property dari CSS, hanya memakai class-class yang sudah disiapkan oleh framework CSS kita yang satu ini yaitu Bootstrap. Oke langsung saja untuk topik bahasan kali ini Mengenal Class Button Style di Bootstrap.
Button Styles terdiri dari 7 style dan warna nya, yaitu:
– .btn-default (membuat warna menjadi putih atau keabu-abuan)
– .btn-primary (membuat warna menjadi biru tua)
– .btn-success (membuat warna menjadi hijau)
– .btn-info (membuat warna menjadi biru muda atau seperti warna biru langit)
– .btn-warning (membuat warna menjadi orange tua)
– .btn-danger (membuat warna menjadi merah)
– .btn-link (membuat warna seperti .btn-info tapi tidak membentuk seperti button melainkan teks biasa tapi bisa di klik, seperti memakai tag <a href=””></a>.
Silahkan teman-teman download framework bootstrap nya pada link ini.
Lalu ekstrak file, dan buka file index.html nya.
kemudian contoh untuk membuat Button di Bootstrap silahkan ketikkan tag-tag di bawah ini di dalam tag <body></body>,
<button type=”button” class=”btn btn-default”>Default</button>
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-success”>Success</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>
Maka output nya akan seperti gambar di bawah,
Class button ini dapat digunakan pada tag <a>, <button>, dan <input>. Contoh ketikkan kode di bawah,
<a href=”#” class=”btn btn-warning” role=”button”>Link Button</a>
<button type=”button” class=”btn btn-info”>Button</button>
<input type=”button” class=”btn btn-success” value=”Input Button”>
<input type=”submit” class=”btn btn-primary” value=”Submit Button”>
Maka outputnya seperti gambar di bawah,
Sekian untuk bahasan kali ini tentang Mengenal Class Button Style di Bootstrap.
Dan masih banyak lagi style-style dari class button tersebut, kita lanjut di part 2 nya ya teman-teman. Sampai jumpa