דלג לתוכן הראשי דלג לניווט במסמכים
in English

תמונות

תיעוד ודוגמאות לבחירה בתמונות להתנהגות מגיבה (כדי שהן לעולם לא יהפכו רחבות יותר מההורה שלהן) והוסיפו להן סגנונות קלים - הכל באמצעות שיעורים.

תמונות רספונסיביות

תמונות ב-Bootstrap נעשות רספונסיביות עם .img-fluid. זה חל max-width: 100%;ועל height: auto;התמונה כך שהיא תתאים ברוחב האב.

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

תמונות ממוזערות

בנוסף לכלי השירות שלנו ברדיוס הגבול , אתה יכול להשתמש .img-thumbnailכדי לתת לתמונה מראה גבול מעוגל של 1 פיקסלים.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

יישור תמונות

יישר תמונות עם מחלקות ה- helper float או מחלקות יישור טקסט . blockניתן לרכז תמונות ברמה באמצעות מחלקת .mx-autoהשירות של margin .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

תְמוּנָה

אם אתה משתמש <picture>באלמנט כדי לציין <source>אלמנטים מרובים עבור ספציפי <img>, הקפד להוסיף את .img-*המחלקות לתג <img>ולא <picture>לתג.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

סאס

משתנים

משתנים זמינים עבור תמונות ממוזערות.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;