تصاویر
تصویر گرد و دایره
استفاده کنید rounded کلاس و rounded-circle کلاس برای نشان دادن تصویر به ترتیب با حاشیه گرد و شکل گرد.
<!-- Rounded Image --> <img class="rounded material-shadow" alt="200x200" width="200" src="assets/images/small/img-4.jpg"><!-- Rounded-circle Image --> <img class="rounded-circle avatar-xl material-shadow" alt="200x200" src="assets/images/users/avatar-4.jpg">
ریز عکسها
استفاده کنید img-thumbnail کلاس برای ایجاد یک تصویر گرد شده با حاشیه 1 پیکسل.
<!-- 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 material-shadow"><img src="assets/images/users/avatar-10.jpg" alt="" class="rounded avatar-xs material-shadow"><img src="assets/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm material-shadow"><img src="assets/images/users/avatar-4.jpg" alt="" class="rounded avatar-md material-shadow"><img src="assets/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg material-shadow"><img src="assets/images/users/avatar-8.jpg" alt="" class="rounded avatar-xl material-shadow"><img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xxs material-shadow"><img src="assets/images/users/avatar-10.jpg" alt="" class="rounded-circle avatar-xs material-shadow"><img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm material-shadow"><img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md material-shadow"><img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg material-shadow"><img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle avatar-xl material-shadow">
آواتار با محتوا
استفاده کنید 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 material-shadow"> XXS </div> </div><div class="avatar-xs"> <div class="avatar-title rounded bg-secondary-subtle text-secondary material-shadow"> XS </div> </div><div class="avatar-sm"> <div class="avatar-title rounded bg-success-subtle text-success material-shadow"> Sm </div> </div><div class="avatar-md"> <div class="avatar-title rounded bg-info-subtle text-info material-shadow"> Md </div> </div><div class="avatar-lg"> <div class="avatar-title rounded bg-warning-subtle text-warning material-shadow"> Lg </div> </div><div class="avatar-xl"> <div class="avatar-title rounded bg-danger-subtle text-danger material-shadow"> Xl </div> </div>
گروه آواتار
<!-- Simple Group --> <div class="avatar-group"> <div class="avatar-group-item material-shadow"> <img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-sm"> </div> <div class="avatar-group-item material-shadow"> <img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-sm"> </div> <div class="avatar-group-item material-shadow"> <div class="avatar-sm"> <div class="avatar-title rounded-circle bg-light text-primary"> A </div> </div> </div> <div class="avatar-group-item material-shadow"> <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 material-shadow" 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 material-shadow" 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 material-shadow" 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 material-shadow" 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">