Bootstrap Badges and Labels
I.Latar Belakang.
Membuat suatu tampilan dengan Bootsrap.II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.
Agar tampilan suatu program itu responsiv.
IV.Penjelasan.
Bootstrap Badges and Labels
Badges
Lencana adalah indikator numerik dari berapa banyak item yang terkait dengan tautan:Angka (5, 10, dan 2) adalah lencana.
Gunakan kelas .badge dalam elemen <span> untuk membuat lencana:
Contoh
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
Badges juga bisa digunakan di dalam elemen lain, seperti tombol:
Contoh berikut menunjukkan bagaimana menambahkan lencana ke tombol:
Contoh
Label
Label digunakan untuk memberikan informasi tambahan tentang sesuatu:
Gunakan kelas .label, diikuti oleh salah satu dari enam kelas kontekstual. Label-default, .label-primary, .label-success, .label-info, .label-warning atau .label-danger, dalam elemen <span> Untuk membuat label:
Contoh
<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
Contoh berikut menunjukkan semua kelas label kontekstual:
Label Standar Label Label Sukses Label Info Label Warning Label Bahaya Label
Contoh
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
Contoh :
Maka outputnya :
Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.
Komentar
Posting Komentar