in English
תמונות
תיעוד ודוגמאות לבחירה בתמונות להתנהגות מגיבה (כדי שהן לעולם לא יהפכו רחבות יותר מההורה שלהן) והוסיפו להן סגנונות קלים - הכל באמצעות שיעורים.
בעמוד זה
תמונות רספונסיביות
תמונות ב-Bootstrap נעשות רספונסיביות עם .img-fluid
. זה חל max-width: 100%;
ועל height: auto;
התמונה כך שהיא תתאים ברוחב האב.
<img src="..." class="img-fluid" alt="...">
תמונות ממוזערות
בנוסף לכלי השירות שלנו ברדיוס הגבול , אתה יכול להשתמש .img-thumbnail
כדי לתת לתמונה מראה גבול מעוגל של 1 פיקסלים.
<img src="..." class="img-thumbnail" alt="...">
יישור תמונות
יישר תמונות עם מחלקות ה- helper float או מחלקות יישור טקסט . block
ניתן לרכז תמונות ברמה באמצעות מחלקת .mx-auto
השירות של margin .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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;