آواتار | CORK الگوی مدیریتی تمام ریسپانسیو

پایه ای نشانگرها اشکال ابتکارات گروه تحریک کردن راهنمای ابزار

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

<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 استفاده کنید

<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 استفاده کنید تا نمادها به ترتیب گرد و گرد شوند.

<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 برای ایجاد برچسب های نام کاربر استفاده کنید.

<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 را درون آن قرار دهید.

<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>

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

<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>

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

<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- عنوان استفاده کنید

<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>

Avatar

شاخص ها

اشکال

ابتکارات

گروه

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

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

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

محسن رضایی

هومن شکیبا

زهرا جوان