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="...">
محاذاة الصور
محاذاة الصور مع الفئات العائمة المساعدة أو فئات محاذاة النص . block
يمكن توسيط الصور ذات المستوى باستخدام فئة .mx-auto
أداة الهامش .
<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;