تصاویر

  1. رابط کاربری پایه
  2. تصاویر

تصویر گرد و دایره

استفاده کنید rounded کلاس و rounded-circle کلاس برای نشان دادن تصویر به ترتیب با حاشیه گرد و شکل گرد.

200x200
200x200 
 <!-- Rounded Image -->
<img class="rounded" alt="200x200" width="200" src="assets/images/small/img-4.jpg"> 

 <!-- Rounded-circle Image -->
<img class="rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-4.jpg">

ریز عکسها

استفاده کنید img-thumbnail کلاس برای ایجاد یک تصویر گرد شده با حاشیه 1 پیکسل.

200x200
200x200 
 <!-- Thumbnails Images -->
<img class="img-thumbnail" alt="200x200" width="200" src="assets/images/small/img-3.jpg"> 

 <img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="assets/images/users/avatar-3.jpg">

اندازه های تصویر

استفاده کنید avatar-xxs ، avatar-xs ، avatar-sm ، avatar-md ، avatar-lg ، avatar-xl کلاس برای اندازه های مختلف تصویر

avatar-xxs

avatar-xs

avatar-sm

avatar-md

avatar-lg

avatar-xl

avatar-xxs

avatar-xs

avatar-sm

avatar-md

avatar-lg

avatar-xl 

 <!-- Image Sizes -->
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded avatar-xxs"> 

 <img src="assets/images/users/avatar-10.jpg" alt="" class="rounded avatar-xs"> 

 <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm"> 

 <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded avatar-md"> 

 <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg"> 

 <img src="assets/images/users/avatar-8.jpg" alt="" class="rounded avatar-xl"> 

 <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs"> 

 <img src="assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs"> 

 <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm"> 

 <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md"> 

 <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg"> 

 <img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xl">

آواتار با محتوا

استفاده کنید avatar-xxs, avatar-xs,avatar-sm,avatar-md,avatar-lg,avatar-xl کلاس برای تنظیم محتوای آواتار مختلف.

XXS
XS
اس ام
MD
ال جی
XL
 <!-- Avatar With Content -->
<div class="avatar-xxs">
    <div class="avatar-title rounded bg-primary-subtle text-primary">
        XXS
    </div>
</div> 

 <div class="avatar-xs">
    <div class="avatar-title rounded bg-secondary-subtle text-secondary">
        XS
    </div>
</div> 

 <div class="avatar-sm">
    <div class="avatar-title rounded bg-success-subtle text-success">
        Sm
    </div>
</div> 

 <div class="avatar-md">
    <div class="avatar-title rounded bg-info-subtle text-info">
        Md
    </div>
</div> 

 <div class="avatar-lg">
    <div class="avatar-title rounded bg-warning-subtle text-warning">
        Lg
    </div>
</div> 

 <div class="avatar-xl">
    <div class="avatar-title rounded bg-danger-subtle text-danger">
        Xl
    </div>
</div>

گروه آواتار

استفاده کنید avatar-group کلاس برای نمایش تصاویر آواتار با گروه.

الف

استفاده کنید avatar-group کلاس با data-bs-toggle="tooltip" برای نمایش تصاویر گروه آواتار با راهنمای ابزار.

سی
2+
 
 <!-- Simple Group -->
<div class="avatar-group">
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
    <div class="avatar-group-item">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle bg-light text-primary">
                A
            </div>
        </div>
    </div>
    <div class="avatar-group-item">
        <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-sm">
    </div>
</div> 

 <!-- Avatar Group with Tooltip -->
<div class="avatar-group">
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
        <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm">
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Frank Hook">
        <img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Christi">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle bg-light text-primary">
                C
            </div>
        </div>
    </a>
    <a href="javascript: void(0);" class="avatar-group-item" data-bs-toggle="tooltip" data-bs-placement="top" title="more">
        <div class="avatar-sm">
            <div class="avatar-title rounded-circle">
                2+
            </div>
        </div>
    </a>
</div>

ارقام

از گنجانده شده استفاده کنید figure ، figure-img و figure-caption کلاس هایی برای ارائه برخی از سبک های پایه برای HTML5 <figure> و <figcaption> عناصر

...
شرح تصویر بالا
...
شرح تصویر بالا
 <!-- figures Images -->
<figure class="figure">
    <img src="assets/images/small/img-4.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure> 

 <figure class="figure mb-0">
    <img src="assets/images/small/img-5.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

تصاویر واکنش گرا

تصاویر واکنش گرا با img-fluid,max-width: 100%; and height: auto; به تصویر به طوری که با عرض والد مقیاس شود.

تصویر واکنش گرا 
 <!-- Responsive Images -->
<img src="assets/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">
© Velzon.
طراحی و توسعه توسط مرداد