تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
in English

الأرقام

وثائق وأمثلة لعرض الصور والنصوص ذات الصلة مع مكون الشكل في Bootstrap.

على هذه الصفحة

في أي وقت تريد عرض جزء من المحتوى — مثل صورة ذات تسمية توضيحية اختيارية ، ففكر في استخدام ملف <figure>.

استخدم الفئات المضمنة لتوفير بعض الأنماط الأساسية .figureلـ HTML5 .figure-imgوالعناصر . الصور في الأشكال ليس لها حجم واضح ، لذا تأكد من إضافة الفصل إلى صفحتك لتجعلها تستجيب..figure-caption<figure><figcaption>.img-fluid<img>

Placeholder 400x300
شرح للصورة أعلاه.
لغة البرمجة
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

من السهل محاذاة التسمية التوضيحية للشكل باستخدام أدوات النص المساعدة الخاصة بنا .

Placeholder 400x300
شرح للصورة أعلاه.
لغة البرمجة
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

ساس

المتغيرات

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;