Bootstrap5自适应头像CSS ui组件

演示  website 下载

插件介绍

Bootstrap5的CSS UI组件，可以在Web应用程序上创建不同大小的自适应图像。

使用方法

1.导入Avatar Component样式表。

@import "./bootstrap-avatar/scss/style.scss";

2.或将已编译的样式表插入到页面中。

<link href="./dist/avatar.css" rel="stylesheet">

3.在页面上创建头像，并使用以下CSS类确定头像大小：

<span class="avatar avatar-16 bg-primary text-white rounded-circle">a</span>
<span class="avatar avatar-24 bg-primary text-white rounded-circle">a</span>
<span class="avatar avatar-32 bg-primary text-white rounded-circle">a</span>
<span class="avatar avatar-48 bg-primary text-white rounded-circle">a</span>
<span class="avatar avatar-64 bg-primary text-white rounded-circle">a</span>
<span class="avatar avatar-96 bg-primary text-white rounded-circle">a</span>
<span class="avatar avatar-128 bg-primary text-white rounded-circle">a</span>
//或自定义图片
<img class="avatar avatar-16 bg-light rounded-circle text-white p-1" src="person.svg">

4.使用以下avatar-{breakpoint}-{size}类会根据屏幕宽度自动调整头像的大小：

<span class="avatar avatar-16 avatar-md-24 avatar-lg-32 avatar-xl-64 avatar-xxl-128 bg-primary text-white rounded-circle">a</span>