مثال پایه #
با استفاده از کلاسهای CSS، آواتارهایی با اندازهها و اشکال مختلف ایجاد و گروهبندی کنید. با استفاده از رویکرد نامگذاری بوتاسترپ، میتوانید اندازه آواتار را که شامل آواتار استاندارد است کنترل کنید و آن را به اندازههای مختلف مقیاس کنید.
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
<img src="/images/users/avatar-2.jpg" alt="تصویر" class="img-fluid avatar-xs rounded">
<img src="/images/users/avatar-3.jpg" alt="تصویر" class="img-fluid avatar-sm rounded mt-2">
<img src="/images/users/avatar-4.jpg" alt="تصویر" class="img-fluid avatar-md rounded" />
<img src="/images/users/avatar-5.jpg" alt="تصویر" class="img-fluid avatar-lg rounded" />
<img src="/images/users/avatar-6.jpg" alt="تصویر" class="img-fluid avatar-xl rounded" />
دایره گرد#
با استفاده از کلاس اضافی .rounded-circle در عنصر <img>، آواتار گرد ایجاد میشود.
.avatar-md .rounded-circle
.avatar-lg .rounded-circle
.avatar-xl .rounded-circle
<img src="/images/users/avatar-7.jpg" alt="تصویر" class="img-fluid avatar-md rounded-circle" />
<img src="/images/users/avatar-8.jpg" alt="تصویر" class="img-fluid avatar-lg rounded-circle" />
<img src="/images/users/avatar-9.jpg" alt="تصویر" class="img-fluid avatar-xl rounded-circle" />
اشکال تصاویر#
آواتارهایی با اندازهها و اشکال مختلف.
.rounded
.rounded
.rounded-circle
.img-thumbnail
.rounded-circle .img-thumbnail
<img src="/images/small/img-2.jpg" alt="تصویر" class="img-fluid rounded" width="200" />
<img src="/images/users/avatar-5.jpg" alt="تصویر" class="img-fluid rounded" width="120" />
<img src="/images/users/avatar-7.jpg" alt="تصویر" class="img-fluid rounded-circle" width="120" />
<img src="/images/small/img-3.jpg" alt="تصویر" class="img-fluid img-thumbnail" width="200" />
<img src="/images/users/avatar-8.jpg" alt="تصویر" class="img-fluid rounded-circle img-thumbnail" width="120" />