丝带组件

丝带组件是一种显示任何内容上方信息的简单方法。 .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>