الفرق بين المراجعتين ل"Bootstrap/figures"
اذهب إلى التنقل
اذهب إلى البحث
(إنشاء صفحة في توثيق Bootstrap) |
(تحديث إلى 4.5) |
||
(3 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة) | |||
سطر 2: | سطر 2: | ||
تعلّم كيفية استخدام الأصناف <code>.figure-*</code> في إطار العمل Bootstrap لعرض نصوص وصوّر مترابطة. | تعلّم كيفية استخدام الأصناف <code>.figure-*</code> في إطار العمل Bootstrap لعرض نصوص وصوّر مترابطة. | ||
− | ضع في الحسبان استخدام العنصُر <code><figure></code> في كلّ مرة تودّ فيها عرض محتوى مع لافتة Caption اختيّاريّة، مثل الصوّر. | + | ضع في الحسبان استخدام العنصُر <code>[[HTML/figure|<figure>]]</code> في كلّ مرة تودّ فيها عرض محتوى مع لافتة Caption اختيّاريّة، مثل الصوّر. |
− | استخدم الأصناف <code>.figure</code>، و <code>.figure-img</code> و <code>.figure-caption</code> لتوفير بعض التنسيقات الأساسيّة لعناصر <code><figure></code>و<code><figcaption></code> في | + | استخدم الأصناف <code>.figure</code>، و <code>.figure-img</code> و <code>.figure-caption</code> لتوفير بعض التنسيقات الأساسيّة لعناصر <code>[[HTML/figure|<figure>]]</code> و <code>[[HTML/figcaption|<figcaption>]]</code> في HTML. لا توجد قياسات مُعيَّنة للعنصُريْن <code>[[HTML/img|<img>]]</code> و <code>[[HTML/figure|<figure>]]</code>؛ لذا تأكّد من إضافة الصّنف <code>.img-fluid</code> إلى العنصُر لجعل الصوّر متجاوبة.<syntaxhighlight lang="html"> |
<figure class="figure"> | <figure class="figure"> | ||
<img src="..." class="figure-img img-fluid rounded" alt="ماسك مكان عامّ لصور ذات حوافّ مدوَّرة"> | <img src="..." class="figure-img img-fluid rounded" alt="ماسك مكان عامّ لصور ذات حوافّ مدوَّرة"> | ||
سطر 17: | سطر 17: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | + | ==مصادر== | |
− | == مصادر == | + | *[https://getbootstrap.com/docs/4.5/content/figures/ صفحة Figures في توثيق Bootstrap]. |
− | * [https://getbootstrap.com/docs/4. | + | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] |
− | [[تصنيف:Bootstrap]] | + | [[تصنيف:Bootstrap content|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 06:12، 15 يوليو 2020
تعلّم كيفية استخدام الأصناف .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>