الفرق بين المراجعتين لصفحة: «Bootstrap/figures»
إضافة عنوان |
إنشاء صفحة في توثيق Bootstrap |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:استخدام الرسوم التوضيحية Figures في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:استخدام الرسوم التوضيحية Figures في إطار العمل Bootstrap}}</noinclude> | ||
تعلّم كيفية استخدام الأصناف <code>.figure-*</code> في إطار العمل Bootstrap لعرض نصوص وصوّر مترابطة. | |||
ضع في الحسبان استخدام العنصُر <code><figure></code> في كلّ مرة تودّ فيها عرض محتوى مع لافتة Caption اختيّاريّة، مثل الصوّر. | |||
استخدم الأصناف <code>.figure</code>، و <code>.figure-img</code> و <code>.figure-caption</code> لتوفير بعض التنسيقات الأساسيّة لعناصر <code><figure></code>و<code><figcaption></code> في HTML5. لا توجد قياسات مُعيَّنة للعنصُريْن <code><img></code>و<code><figure></code>؛ لذا تأكّد من إضافة الصّنف <code>.img-fluid</code> إلى العنصُر لجعل الصوّر متجاوبة.<syntaxhighlight lang="html"> | |||
<figure class="figure"> | |||
<img src="..." class="figure-img img-fluid rounded" alt="ماسك مكان عامّ لصور ذات حوافّ مدوَّرة"> | |||
<figcaption class="figure-caption">لافتة للصورة أعلاه.</figcaption> | |||
</figure> | |||
</syntaxhighlight>من السّهل محاذاة لافتة الشّكل باستخدام [[Bootstrap/text|أدوات النّصوص]].<syntaxhighlight lang="html"> | |||
<figure class="figure"> | |||
<img src="..." class="figure-img img-fluid rounded" alt="ماسك مكان عامّ لصور ذات حوافّ مدوَّرة"> | |||
<figcaption class="figure-caption text-right">لافتة للصورة أعلاه.</figcaption> | |||
</figure> | |||
</syntaxhighlight> | |||
== مصادر == | |||
* [https://getbootstrap.com/docs/4.0/content/figures/ صفحة Figures في توثيق Bootstrap]. | |||
[[تصنيف:Bootstrap]] | |||
مراجعة 14:53، 21 مارس 2018
تعلّم كيفية استخدام الأصناف .figure-* في إطار العمل Bootstrap لعرض نصوص وصوّر مترابطة.
ضع في الحسبان استخدام العنصُر <figure> في كلّ مرة تودّ فيها عرض محتوى مع لافتة Caption اختيّاريّة، مثل الصوّر.
استخدم الأصناف .figure، و .figure-img و .figure-caption لتوفير بعض التنسيقات الأساسيّة لعناصر <figure>و<figcaption> في HTML5. لا توجد قياسات مُعيَّنة للعنصُريْن <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>