الفرق بين المراجعتين ل"Bootstrap/figures"
اذهب إلى التنقل
اذهب إلى البحث
ط (إضافة تصنيفات) |
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
||
سطر 19: | سطر 19: | ||
==مصادر== | ==مصادر== | ||
*[https://getbootstrap.com/docs/4.0/content/figures/ صفحة Figures في توثيق Bootstrap]. | *[https://getbootstrap.com/docs/4.0/content/figures/ صفحة Figures في توثيق Bootstrap]. | ||
− | [[تصنيف:Bootstrap]] | + | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] |
− | [[تصنيف:Bootstrap content]] | + | [[تصنيف:Bootstrap content|{{SUBPAGENAME}}]] |
مراجعة 13:17، 7 مايو 2018
تعلّم كيفية استخدام الأصناف .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>