Bootstrap 5: الصور

التوصيات للدورات

شكل الصورة

الزوايا الدائرية .rounded

مثال

كلاس تضيف زوايا دائرية إلى الصورة:

جرب بنفسك

<img src="flower.jpg" class="rounded" alt="Flower">

الروعة .rounded-circle

مثال

كلاس ستجعل الصورة تبدو كروعة:

جرب بنفسك

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

الشريط الصغير .img-thumbnail

مثال

كلاس ستجعل الصورة تبدو مثل شريط صورة (مزود بجدران):

جرب بنفسك

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

للتباين الصورة .float-start كلاس ستجعل الصورة تطفو إلى اليسار، أو استخدم .float-end ال浮动 إلى اليمين:

مثال

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

جرب بنفسك

صورة مركزية

لجعل الصورة في وسط الصفحة، قمنا بإضافة كلاس الاستخدامات الفعالة إلى الصورة. .mx-auto (الحد الأقصى للهوامش:نصف): و .d-block (عرض:كتلة):

مثال

<img src="tulip.jpg" class="mx-auto d-block">

جرب بنفسك

الصور التفاعلية

لدي الصور أبعاد مختلفة. الشاشة هي نفسها. ستنظم الصور التفاعلية تلقائيًا لتتناسب مع حجم الشاشة.

من خلال .img-fluid إضافة كلاس إلى <img> لإنشاء صور تفاعلية. ثم سينكمش الصورة بشكل جيد داخل عنصر الأب.

.img-fluid استخدم كلاس الصورة التفاعلية max-width: 100%; و height: auto; ：

مثال

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

جرب بنفسك