Avatar

از کلاس .badge-collapsed-img در برچسب Ul استفاده کنید.

avatar
avatar
avatar
avatar
<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

شاخص ها

از عنصر .avatar-index در عنصر div.avatar استفاده کنید

avatar
avatar
avatar
avatar
<div class="avatar avatar-xl avatar-indicators avatar-offline">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg avatar-indicators avatar-online">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-indicators avatar-offline">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm avatar-indicators avatar-online">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

اشکال

از کلاس .rounded و .rounded-round استفاده کنید تا نمادها به ترتیب گرد و گرد شوند.

avatar
avatar
avatar
avatar
<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" />
</div>
<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

ابتکارات

از کلاس span با کلاس .avatar-title برای ایجاد برچسب های نام کاربر استفاده کنید.

AG
AG
AG
AG
<div class="avatar avatar-xl">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-lg">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-sm">
    <span class="avatar-title rounded-circle">AG</span>
</div>

گروه

از کلاس div با .avatar - group استفاده کرده و div.avatar را درون آن قرار دهید.

avatar
avatar
avatar
AG
avatar
avatar
avatar
AG
<div class="avatar--group">
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

محور Y را تحریک کنید

از کلاس .translateY-ax استفاده کنید تا نمای محوری در محور Y ایجاد شود.

avatar
avatar
avatar
AG
<div class="avatar--group">
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

محور X را تحریک کنید

از کلاس .translateX-ax استفاده کنید تا نمای محوری در محور X ایجاد شود.

avatar
avatar
avatar
AG
<div class="avatar--group">
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

راهنمای ابزار

از برچسب ابزار راه انداز در تگ img و برچسب <کد> span.avatar- عنوان استفاده کنید

avatar
avatar
avatar
AG
<div class="avatar--group">
    <div class="avatar">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="رضوانه پارسی" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="رضوانه پارسی" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="رضوانه پارسی" />
    </div>
    <div class="avatar">
        <span class="avatar-title rounded-circle  bs-tooltip" data-original-title="محمد رضا رضایی">AG</span>
    </div>
</div>