الصور (Images)

مستندات وأمثلة لجعل الصور متجاوبة (بحيث لا تصبح أبداً أعرض من العنصر الأب) وإضافة أنماط خفيفة لها—كل ذلك عبر الـ classes.

في هذه الصفحة

الصور المتجاوبة

يتم جعل الصور في الـ Bootstrap متوافقة مع الشاشات (Responsive) باستخدام .img-fluid. وهذا يطبق max-width: 100%; و height: auto; على الصورة بحيث تتناسب مع عرض العنصر الأب.

html

<img src="..." class="img-fluid" alt="...">

الصور المصغرة (Image thumbnails)

بالإضافة إلى أدوات تدوير الحواف (Border radius) الخاصة بنا border-radius utilities، يمكنك استخدام .img-thumbnail لمنح الصورة مظهر إطار مستدير بمقدار 1 بكسل.

html

<img src="..." class="img-thumbnail" alt="...">

محاذاة الصور

قم بمحاذاة الصور باستخدام الفئات (classes) المساعدة للطفو helper float classes أو فئات محاذاة النصوص text alignment classes. يمكن توسيط الصور ذات المستوى block باستخدام فئة أداة الهامش .mx-auto فئة أداة الهامش .mx-auto.

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

صورة (Picture)

إذا كنت تستخدم عنصر <picture> لتحديد عناصر <source> متعددة لصورة <img> معينة، فتأكد من إضافة الفئات (classes) .img-* إلى عنصر <img> وليس إلى علامة <picture>.

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

الـ (CSS)

متغيرات الـ (Sass)

المتغيرات (Variables) متاحة للصور المصغرة.

scss/_variables.scss

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      var(--#{$prefix}body-bg);
$thumbnail-border-width:            var(--#{$prefix}border-width);
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           var(--#{$prefix}border-radius);
$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm);