丝带组件

优质

小牛编辑

131浏览

2023-12-01

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

标记示例

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

不同大小的丝带

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

  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-info">
      大号丝带
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-xl">
    <div class="ribbon bg-secondary">
      超大号丝带
    </div>
  </div>

不同字号的丝带

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

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

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

图片示例代码

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