استخدام الرسوم التوضيحية Figures في إطار العمل Bootstrap
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
تعلّم كيفية استخدام الأصناف .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>