Ribbons Component

緞帶元件是一種在任何內容上方顯示資訊的簡單方式。 .ribbon-warpper 需要在具有position:relative; 的元素內。在本文件頁面中，我們為了示範目的，總是將緞帶放置在 <div class="position-relative p-3 bg-gray" style="height: 180px"></div> 內，但它可以放置在卡片、表格列等更多地方。

緞帶有三種尺寸，可以顯示更多文字或使用較大的字體大小，預設值（只有 .ribbon-wrapper）、大型（.ribbon-wrapper 搭配 .ribbon-lg）、超大型（.ribbon-wrapper 搭配 .ribbon-xl）。

範例標記

緞帶

預設緞帶
.ribbon-wrapper.ribbon-lg .ribbon

<div class="ribbon-wrapper">
  <div class="ribbon bg-primary">
    Ribbon
  </div>
</div>

緞帶尺寸變化

緞帶

預設緞帶
.ribbon-wrapper.ribbon-lg .ribbon

大型緞帶

大型緞帶
.ribbon-wrapper.ribbon-lg .ribbon

超大型緞帶

超大型緞帶
.ribbon-wrapper.ribbon-xl .ribbon

  <div class="ribbon-wrapper">
    <div class="ribbon bg-primary">
      Ribbon
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-info">
      Ribbon Large
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-xl">
    <div class="ribbon bg-secondary">
      Ribbon Extra Large
    </div>
  </div>

文字大小變化

緞帶

大型緞帶
搭配大型文字
.ribbon-wrapper.ribbon-lg .ribbon.text-lg

緞帶

超大型緞帶
搭配大型文字
.ribbon-wrapper.ribbon-xl .ribbon.text-lg

緞帶

超大型緞帶
搭配超大型文字
.ribbon-wrapper.ribbon-xl .ribbon.text-xl

<div class="ribbon-wrapper ribbon-lg">
  <div class="ribbon bg-success text-lg">
    Ribbon
  </div>
</div>

<div class="ribbon-wrapper ribbon-xl">
  <div class="ribbon bg-warning text-lg">
    Ribbon
  </div>
</div>

<div class="ribbon-wrapper ribbon-xl">
  <div class="ribbon bg-danger text-xl">
    Ribbon
  </div>
</div>

圖片範例程式碼

<div class="position-relative">
  <img src="../../dist/img/photo1.png" alt="Photo 1" class="img-fluid">
  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-success text-lg">
      Ribbon
    </div>
  </div>
</div>