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>