Ribbons Component

选项卡组件是一种简单的方法，用于在任何内容上方显示信息。它需要放在一个具有.ribbon-warpperposition:relative;样式的元素内部。在这个文档页面中，我们将选项卡始终放在中以进行演示，但实际上它可以放在卡片、表格行以及其他许多地方。<div class="position-relative p-3 bg-gray" style="height: 180px"></div>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>