الفرق بين المراجعتين ل"Bootstrap/code"
اذهب إلى التنقل
اذهب إلى البحث
(إنشاء صفحة توثيق في Bootstrap) |
|||
| (5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
| + | <noinclude>{{DISPLAYTITLE:كتابة الشفرات البرمجيّة في إطار العمل Bootstrap}}</noinclude> | ||
تعلّم كيفية عرض كتل تعليمات برمجيّة وحيدة السّطر أو متعدّدة الأسطر في إطار العمل Bootstrap. | تعلّم كيفية عرض كتل تعليمات برمجيّة وحيدة السّطر أو متعدّدة الأسطر في إطار العمل Bootstrap. | ||
== شفرة برمجيّة ذات سطر واحد == | == شفرة برمجيّة ذات سطر واحد == | ||
| − | غلِّف فقرات الشفرة البرمجيّة المكوَّنة من سطر واحد بالوسم <code><nowiki><code></nowiki></code>. تأكّد من | + | غلِّف فقرات الشفرة البرمجيّة المكوَّنة من سطر واحد بالوسم <code>[[HTML/code|<nowiki><code></nowiki>]]</code>. تأكّد من تهريب (escape) الأقواس الزاويّة (<code>></code> و<code><</code>) في وسوم HTML.<syntaxhighlight lang="html"> |
يجب أن يُكتَب العنصُر <code><section></code> على نفس السطر. | يجب أن يُكتَب العنصُر <code><section></code> على نفس السطر. | ||
| سطر 9: | سطر 10: | ||
== الشفرات متعدّدة الأسطر == | == الشفرات متعدّدة الأسطر == | ||
| − | استخدم الوسم <code><nowiki><pre></nowiki></code> | + | استخدم الوسم <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> لتغليف شفرة مكوَّنة من أسطر عدّة. تأكّد كذلك من من تخليص الأقواس الزاويّة في الشفرة للحصول على عرض صحيح. يمكن إضافة الصّنف <code>.pre-scrollable</code> الذي يحدّد ارتفاعًا أقصى قدره 350px ويوفّر شريط تمرير عمودي.<syntaxhighlight lang="html"> |
<pre><code><p>مثال على نصّ...</p> | <pre><code><p>مثال على نصّ...</p> | ||
<p>سطر ثان من المثال...</p> | <p>سطر ثان من المثال...</p> | ||
| سطر 18: | سطر 19: | ||
== المتغيّرات == | == المتغيّرات == | ||
| − | استخدم الوسم <code><nowiki><var></nowiki></code> للإشارة إلى المتغيّرات.<syntaxhighlight lang="html"> | + | استخدم الوسم <code>[[HTML/var|<nowiki><var></nowiki>]]</code> للإشارة إلى المتغيّرات.<syntaxhighlight lang="html"> |
<var>y</var> = <var>m</var><var>x</var> + <var>b</var> | <var>y</var> = <var>m</var><var>x</var> + <var>b</var> | ||
| سطر 24: | سطر 25: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | == | + | == مدخلات المستخدم == |
| − | استخدم الوسم<code><nowiki><kbd></nowiki></code> للإشارة إلى أنّ المُدخَل يأتي عادةً عن طريق لوحة مفاتيح:<syntaxhighlight lang="html"> | + | استخدم الوسم <code>[[HTML/kbd|<nowiki><kbd></nowiki>]]</code> للإشارة إلى أنّ المُدخَل يأتي عادةً عن طريق لوحة مفاتيح:<syntaxhighlight lang="html"> |
نفّذ الأمر<kbd>cd</kbd> متبوعًا باسم المُجلَّد للانتقال إلى المجلّد المذكور.<br> | نفّذ الأمر<kbd>cd</kbd> متبوعًا باسم المُجلَّد للانتقال إلى المجلّد المذكور.<br> | ||
انقر على الزرّيْن<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> لتعديل الإعدادات | انقر على الزرّيْن<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> لتعديل الإعدادات | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | == نموذج | + | == نموذج مخرجات == |
| − | استخدم الوسم <code><nowiki><samp></nowiki></code> للإشارة إلى أنّ المقصود نموذَج لمُخرجات برنامج.<syntaxhighlight lang="html"> | + | استخدم الوسم <code>[[HTML/samp|<nowiki><samp></nowiki>]]</code> للإشارة إلى أنّ المقصود نموذَج لمُخرجات برنامج.<syntaxhighlight lang="html"> |
<samp>هذا نصّ مُعدّ للتعامل معه على أساس أنّه نتيجة تنفيذ برنامج حاسوبيّ</samp> | <samp>هذا نصّ مُعدّ للتعامل معه على أساس أنّه نتيجة تنفيذ برنامج حاسوبيّ</samp> | ||
| سطر 38: | سطر 39: | ||
== مصادر == | == مصادر == | ||
| − | * [https://getbootstrap.com/docs/4. | + | * [https://getbootstrap.com/docs/4.5/content/code/ صفحة Code من توثيق Bootstrap]. |
| − | [[تصنيف:Bootstrap]] | + | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] |
| + | [[تصنيف:Bootstrap content|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 06:56، 14 يوليو 2020
تعلّم كيفية عرض كتل تعليمات برمجيّة وحيدة السّطر أو متعدّدة الأسطر في إطار العمل Bootstrap.
شفرة برمجيّة ذات سطر واحد
غلِّف فقرات الشفرة البرمجيّة المكوَّنة من سطر واحد بالوسم <code>. تأكّد من تهريب (escape) الأقواس الزاويّة (> و<) في وسوم HTML.
يجب أن يُكتَب العنصُر <code><section></code> على نفس السطر.
الشفرات متعدّدة الأسطر
استخدم الوسم <pre> لتغليف شفرة مكوَّنة من أسطر عدّة. تأكّد كذلك من من تخليص الأقواس الزاويّة في الشفرة للحصول على عرض صحيح. يمكن إضافة الصّنف .pre-scrollable الذي يحدّد ارتفاعًا أقصى قدره 350px ويوفّر شريط تمرير عمودي.
<pre><code><p>مثال على نصّ...</p>
<p>سطر ثان من المثال...</p>
</code></pre>
المتغيّرات
استخدم الوسم <var> للإشارة إلى المتغيّرات.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
مدخلات المستخدم
استخدم الوسم <kbd> للإشارة إلى أنّ المُدخَل يأتي عادةً عن طريق لوحة مفاتيح:
نفّذ الأمر<kbd>cd</kbd> متبوعًا باسم المُجلَّد للانتقال إلى المجلّد المذكور.<br>
انقر على الزرّيْن<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> لتعديل الإعدادات
نموذج مخرجات
استخدم الوسم <samp> للإشارة إلى أنّ المقصود نموذَج لمُخرجات برنامج.
<samp>هذا نصّ مُعدّ للتعامل معه على أساس أنّه نتيجة تنفيذ برنامج حاسوبيّ</samp>