Tutorial Bootstrap 3 Badges (Lencana)
Badge atau Lencana adalah indikator numerik.
Dengan Bootstrap kita dapat membuat badge atau lencana dengan mudah contohnya memberikan notifikasi kepada user seperti jumlah pesan yang diterima atau belum dibaca, jumlah permintaan teman, jumlah kategory, dll.
Cara Penerapan :
Untuk penerapannya silahkan lihat contoh berikut :<span class="badge">10</span>
Contoh 1 :
<a href="#">Kotak Masuk <span class="badge">10</span></a>
<button class="btn btn-primary" type="button">
Pesan <span class="badge">40</span>
</button>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Badges</code></h2> <a href="#">Kotak Masuk <span class="badge">10</span></a> <button class="btn btn-primary" type="button"> Pesan <span class="badge">40</span> </button> </div> </body> </html>
Contoh 2 :
<a href="#" class="btn btn-default">
Kategory 1 <span class="badge">10</span>
</a>
<a href="#" class="btn btn-info">
Kategory 2 <span class="badge">30</span>
</a>
<a href="#" class="btn btn-danger">
Kategory 3 <span class="badge">16</span>
</a>
<a href="#" class="btn btn-success">
Kategory 4 <span class="badge">86</span>
</a>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Badges</code></h2> <a href="#" class="btn btn-default"> Kategory 1 <span class="badge">10</span> </a> <a href="#" class="btn btn-info"> Kategory 2 <span class="badge">30</span> </a> <a href="#" class="btn btn-danger"> Kategory 3 <span class="badge">16</span> </a> <a href="#" class="btn btn-success"> Kategory 4 <span class="badge">86</span> </a> </div> </body> </html>
Contoh 3 :
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="active"><a href="#">Pesan <span class="badge">70</span></a></li>
<li><a href="#">Pemberitahuan <span class="badge">25</span></a></li>
</ul>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Badges</code></h2> <ul class="nav nav-pills"> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li class="active"><a href="#">Pesan <span class="badge">70</span></a></li> <li><a href="#">Pemberitahuan <span class="badge">25</span></a></li> </ul> </div> </body> </html>
Posting Komentar