Source

דמויות

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

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

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

400x300
כיתוב לתמונה למעלה. 
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

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

400x300
כיתוב לתמונה למעלה. 
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>