套出來的畫面：
使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badges on Buttons</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>
example 2:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-sm btn-default like-btn active" type="button" id="10">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="text">Liked</span>
<span class="badge like-badge">1</span>
</button>
<script>
$(document).on("click", ".like-btn", function(e) {
e.preventDefault();
var $label = $(this).find('.text'),
$badge = $(this).find('.badge'),
count = Number($badge.text()),
active = $(this).hasClass('active');
$label.text(active ? 'Like' : 'Liked');
$badge.text(active ? count - 1 : count + 1);
$(this).toggleClass('active');
});
</script>
</body>
</html>
資料來源：
http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
沒有留言:
張貼留言