דמויות

תיעוד ודוגמאות להצגת תמונות וטקסט קשורים עם רכיב הדמות ב-Bootstrap.

בעמוד זה

בכל פעם שאתה צריך להציג פיסת תוכן - כמו תמונה עם כיתוב אופציונלי, שקול להשתמש ב- <figure>.

השתמש במחלקות הכלולים .figureובמחלקות .figure-imgכדי .figure-captionלספק כמה סגנונות בסיס עבור HTML5 <figure>ואלמנטים <figcaption>. לתמונות באיורים אין גודל מפורש, אז הקפד להוסיף את .img-fluidהכיתה שלך <img>כדי להפוך אותה לרספונסיבית.

כיתוב לתמונה למעלה.

html

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

יישור הכיתוב של הדמות קל עם כלי העזר שלנו לטקסט .

כיתוב לתמונה למעלה.

html

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