[CSS學習筆記] Bootstrap4 Badge(標籤)元件

2018/01/13 CSS

前言

Badge 是一個標籤元件,像是一個訊息未讀右上角會有一個未讀的數量的樣式。

span 標籤與 badge

一個標籤組件我們使用 span 標籤,因為他是一個行的元素,當你使用標題標籤他會隨著字元大小放大,在裡面的 ㄏlass 我們放入 badge badge-xxx xxx 總共有五種樣式已修改。

  • primary
  • secondary
  • success
  • info
  • warning
  • danger
<h1>Example heading <span class="badge badge-primary">New</span></h1>
<h2>Example heading <span class="badge badge-success">New</span></h2>
<h3>Example heading <span class="badge badge-info">New</span></h3>

badge 圓角化

在 class 加入 badge-pill 就能將 badge 圓角化 pill 的中文意思是膠囊藥丸,就像膠囊一樣的感覺。

<span class="badge badge-primary badge-pill">new</span>
<span class="badge badge-secondary badge-pill">new</span>

參考:https://v4-alpha.getbootstrap.com/components/badge/

Search

    Table of Contents