AdminLTELogo

丝带组件

丝带组件是一种在任何内容上方显示信息的简便方法。.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">
    丝带
  </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">
      丝带
    </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>
不同字号的丝带
丝带
大号丝带
的大文本
.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">
    丝带
  </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>