Bootstrap/figures

تعلّم كيفية استخدام الأصناف ‎.figure-‎*‎ في إطار العمل Bootstrap لعرض نصوص وصوّر مترابطة.

ضع في الحسبان استخدام العنصُر <figure> في كلّ مرة تودّ فيها عرض محتوى مع لافتة Caption اختيّاريّة، مثل الصوّر.

استخدم الأصناف ‎.figure، و ‎.figure-img و ‎.figure-caption لتوفير بعض التنسيقات الأساسيّة لعناصر <figure> و <figcaption> في HTML. لا توجد قياسات مُعيَّنة للعنصُريْن <img> و <figure>؛ لذا تأكّد من إضافة الصّنف ‎.img-fluid إلى العنصُر لجعل الصوّر متجاوبة.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="ماسك مكان عامّ لصور ذات حوافّ مدوَّرة">
  <figcaption class="figure-caption">لافتة للصورة أعلاه.</figcaption>
</figure>

من السّهل محاذاة لافتة الشّكل باستخدام أدوات النّصوص.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="ماسك مكان عامّ لصور ذات حوافّ مدوَّرة">
  <figcaption class="figure-caption text-right">لافتة للصورة أعلاه.</figcaption>
</figure>

مصادر

• صفحة Figures في توثيق Bootstrap.