免費(fèi)AI編程助手
Bootstrap4 徽章（Badges）
2018-05-29 09:35 更新
徽章（Badges）功能的用途主要是用來突顯新的或者未讀的項(xiàng)，讓該項(xiàng)更加顯眼?；照碌氖褂闷鋵?shí)很簡(jiǎn)單，只需要將 .badge 類加上帶有指定意義的顏色類 (如 .badge-secondary) 添加到 <span> 元素上即可。
注： 徽章可以根據(jù)父元素的大小的變化而變化:
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>徽章</h2>
<h1>測(cè)試標(biāo)題 <span class="badge badge-secondary">New</span></h1>
<h2>測(cè)試標(biāo)題 <span class="badge badge-secondary">New</span></h2>
<h3>測(cè)試標(biāo)題 <span class="badge badge-secondary">New</span></h3>
<h4>測(cè)試標(biāo)題 <span class="badge badge-secondary">New</span></h4>
<h5>測(cè)試標(biāo)題 <span class="badge badge-secondary">New</span></h5>
<h6>測(cè)試標(biāo)題 <span class="badge badge-secondary">New</span></h6>
</div>
</body>
</html>各種顏色類型的徽章
以下列出了所有顏色類型的徽章:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>各種顏色類型的徽章</h2>
<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危險(xiǎn)</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">淺色</span>
<span class="badge badge-dark">深色</span>
</div>
</body>
</html>藥丸形狀徽章
使用 .badge-pill 類來設(shè)置藥丸形狀徽章:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>藥丸形狀徽章</h2>
<span class="badge badge-pill badge-default">默認(rèn)</span>
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-danger">危險(xiǎn)</span>
</div>
</body>
</html>徽章插入到元素內(nèi)
以下實(shí)例將徽章嵌入到按鈕內(nèi)：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>徽章嵌入到按鈕內(nèi)</h2>
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-danger">
Notifications <span class="badge badge-light">7</span>
</button>
</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：