10.Bootstrap(中文教程)元件：标籤元件

ㄧ.标籤字体大小

<div class="component" id="demo">  <h1><span class="badge badge-secondary">new</span></h1>  <h2><span class="badge badge-secondary">new</span></h2>  <h3><span class="badge badge-secondary">new</span></h3></div>.component.demo{ padding: 50px;}

重点：
1.套用h1不同字体大小的标题，badge也会随着父元素一样字体大

二.胶囊标籤

<div class="component" id="demo">   <span class="badge badge-primary badge-pill">new</span></div>.component.demo{ padding: 50px;}

重点：
1.badge-pill帮标籤加圆角形成胶囊标籤

三.按钮计数器

<div class="component" id="demo">   <button class="btn btn-primary">  Hello~   <span class="badge badge-light">1</span> </button></div>.component.demo{ padding: 50px;}

重点：
1.按钮计数器，父元素包装成btn的样式，子元素为badge

四.a连结标籤

<div class="component" id="demo">    <a href="#" class="badge badge-primary">1</a></div>.component.demo{ padding: 50px;}

重点：
1.a也可以套用badge

codepen
参考：bootstrap4