ارقام

مستندات و نمونه هایی برای نمایش تصاویر و متن های مرتبط با کامپوننت شکل در بوت استرپ.

در این صفحه

هر زمان که نیاز به نمایش بخشی از محتوا داشتید - مانند یک تصویر با شرح اختیاری، استفاده از یک متن را در نظر بگیرید <figure>.

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

شرح تصویر بالا

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

تراز کردن عنوان شکل با ابزارهای متنی ما آسان است .

شرح تصویر بالا

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

ساس

متغیرها

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;