丝带组件
优质
小牛编辑
126浏览
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>