iT邦幫忙

0

10.Bootstrap(中文教程)元件:標籤元件

  • 分享至 

  • xImage
  •  

ㄧ.標籤字體大小

<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


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言