الصور
وثائق وأمثلة لاختيار الصور في سلوك متجاوب (بحيث لا تصبح أبدًا أكبر من عناصرها الأصلية) وإضافة أنماط خفيفة إليها - كل ذلك عبر الفصول الدراسية.
صور مستجيبة
يتم جعل الصور في Bootstrap تستجيب مع .img-fluid
. max-width: 100%;
ويتم height: auto;
تطبيقها على الصورة بحيث تتناسب مع العنصر الأصلي.
<img src="..." class="img-fluid" alt="...">
صور SVG و Internet Explorer
في Internet Explorer 10 و 11 ، تكون صور SVG ذات .img-fluid
الحجم غير متناسب. لإصلاح هذا ، أضف width: 100%;
أو .w-100
عند الضرورة. يؤدي هذا الإصلاح إلى تغيير أحجام تنسيقات الصور الأخرى بشكل غير صحيح ، لذلك لا يقوم Bootstrap بتطبيقه تلقائيًا.
الصور المصغرة
بالإضافة إلى الأدوات المساعدة الخاصة بنصف قطر الحدود ، يمكنك استخدامها .img-thumbnail
لإعطاء صورة مظهر حدود دائري بمقدار 1 بكسل.
<img src="..." class="img-thumbnail" alt="...">
محاذاة الصور
محاذاة الصور مع الفئات العائمة المساعدة أو فئات محاذاة النص . block
يمكن توسيط الصور ذات المستوى باستخدام فئة .mx-auto
أداة الهامش .
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>