Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Membuat Badges (Lencana) dan Label).
Badges (Lencana)
Badges (Lencana) adalah indikator numerik dari berapa banyak item yang terkait dengan link. Gunakan Class .badge dalam elemen <span> untuk membuat lencana.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">Badges (Lencana)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badges (Lencana)</h2>
<a href="#">Berita <span class="badge">5</span></a><br>
<a href="#">Komentar <span class="badge">10</span></a><br>
<a href="#">Terbaru <span class="badge">2</span></a>
</div>
</body>
</html>
Badges (Lencana) juga dapat digunakan di dalam unsur-unsur lain, seperti tombol.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badges (Lencana) pada Tombol</h2>
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
<button type="button" class="btn btn-success">Success <span class="badge">3</span></button>
<button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>
</div>
</body>
</html>
Label
Label digunakan untuk memberikan informasi tambahan tentang sesuatu. Gunakan class .label, diikuti salah satu dari enam class kontekstual .label-default, .label-primary, .label-success, .label-info atau .label-danger dalam elemen <span> untuk membuat label.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Label</h2>
<h1>Contoh <span class="label label-default">Baru</span></h1>
<h2>Contoh <span class="label label-default">Baru</span></h2>
<h3>Contoh <span class="label label-default">Baru</span></h3>
<h4>Contoh <span class="label label-default">Baru</span></h4>
<h5>Contoh <span class="label label-default">Baru</span></h5>
<h6>Contoh <span class="label label-default">Baru</span></h6>
</div>
</body>
</html>
Contoh berikut menunjukkan class label kontekstual:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Class Label Kontekstual</h2>
<p>Class kontekstual dapat digunakan untuk mewarnai label.</p>
<span class="label label-default">Default Label</span>
<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>
</div>
</body>
</html>
Sekian Cara Membuat Badges (Lencana) dan Label).
Semoga Bermanfaat...!!!
Referensi:www.w3schools.com
Wassalamu'alaikum wr.wb
EmoticonEmoticon