في هذا الدرس 7تصفّح المواضيع
يمنحك بوتستراب 5 تنسيقاً متوازناً لجميع وسوم العناوين القياسية من <h1> حتى <h6>، لكن التحدي العملي يظهر حين يفرض التصميم البصري عرض سطر فرعي داخل بطاقة بحجم عنوان كبير بينما يقتضي التسلسل الدلالي لمحركات البحث وقارئات الشاشة بقاءه فقرة <p> أو عنصر <span>.
لمعالجة هذا الفصل الهندسي بين المعنى والشكل، يوفر الإطار كلاسات .h1 إلى .h6 التي تمنح أي عنصر نصي نفس حجم الخط ووزنه وارتفاع سطره تماماً دون تغيير نوع الوسم في شجرة المستند، كما يمكنك تضمين وسم <small> داخل العنوان لإضافة وصف ثانوي متناسق النسبة.
<h1>Course Catalog <small>2026 Edition</small></h1>
<p class="h2">Visual H2 Styled Paragraph</p>
<p class="h4">Compact Card Section Title</p>
<span class="h6">Inline Metadata Heading</span>عندما تصمم واجهة ترحيبية رئيسية أو تعرض رقماً إحصائياً بارزاً في لوحة تحكم، قد تبدو العناوين التقليدية ثقيلة الوزن أو أصغر من المساحة المتاحة. هنا تبرز عائلة العناوين الكبرى من .display-1 حتى .display-6 المصممة بحجم أكبر ووزن خط رشيق font-weight: 300 يمنح الواجهة فخامة بصرية عالية.
ترتبط هذه الكلاسات أيضاً بمحرك التحجيم المتجاوب تلقائياً؛ حيث يبلغ .display-1 حجم 5rem على الشاشات الكبيرة بينما يتدرج .display-6 إلى 2.5rem ليلائم العناوين الفرعية البارزة دون تزاحم على الهاتف.
<h1 class="display-1">Display 1</h1>
<h2 class="display-3">Display 3 Hero</h2>
<p class="display-5">99.9% Uptime</p>
<p class="display-6">Display 6 Subtitle</p>لتنسيق الاختصارات التقنية والاقتباسات الموثقة، يدعم بوتستراب وسم <abbr> المزود بسمة title فيضع تحته خطاً منقطاً مع مؤشر استفهام يوضح المعنى الكامل عند التمرير، كما يوفر كلاس .initialism لتصغير حجم الاختصارات الإنجليزية قليلاً وتحويلها لأحرف كبيرة متناسقة.
وعند عرض مقولة أو مرجع علمي، تقتضي البنية القياسية في بوتستراب 5 تغليف وسم <blockquote class="blockquote"> مع وسم التسمية <figcaption class="blockquote-footer"> داخل حاوية <figure> واحدة، ووضع اسم الكتاب أو المصدر داخل وسم <cite>.
<p><abbr title="Responsive Font" class="initialism">
RFS</abbr> scales text.</p>
<figure>
<blockquote class="blockquote">
<p>Clean typography aids reading on all screens.</p>
</blockquote>
<figcaption class="blockquote-footer">
Web Guide in <cite title="Docs">CloseTag Docs</cite>
</figcaption>
</figure>في أشرطة التذييل والبطاقات الجانبية غالباً ما نحتاج إلى بنية قائمة دلالية دون النقاط السوداء أو الحشو الجانبي الافتراضي؛ وهنا يزيل كلاس .list-unstyled علامات الترقيم والهامش الداخلي عن العناصر الأبناء المباشرين فقط، مما يحافظ على تمييز أي قائمة فرعية متداخلة ما لم تضف إليها الكلاس ذاته.
ولصف عناصر القائمة أفقياً في سطر واحد كروابط السياسات السفلية، اجمع كلاس .list-inline على القائمة الأب مع .list-inline-item على كل عنصر <li>، كما يمكنك تنظيم قوائم المصطلحات <dl> في عمودين متقابلين مباشرة عبر كلاسات الشبكة .row و.col-sm-*.
<ul class="list-inline">
<li class="list-inline-item">Docs</li>
<li class="list-inline-item">Guides</li>
<li class="list-inline-item">Changelog</li>
</ul>
<dl class="row">
<dt class="col-sm-3">Engine</dt>
<dd class="col-sm-9">Bootstrap 5.3 Reboot and RFS</dd>
</dl>عند كتابة التوثيقات البرمجية أو شروح الاستخدام، يعتني بوتستراب 5 بتنسيق الوسوم التقنية الأربعة: وسم <code> للشيفرات السطرية بلون مميز وخط أحادي العرض، ووسم <pre> للكتل البرمجية متعددة الأسطر، ووسم <kbd> لإظهار اختصارات لوحة المفاتيح داخل خلفية داكنة أنيقة، ووسم <samp> لمخرجات البرامج والطرفية.
تذكر دائماً ترميز محارف الزوايا الحادة داخل الشيفرات المعروضة بصيغة < و> حتى يعرضها المتصفح كنص مقروء بدلاً من محاولة تفسيرها كوسوم HTML فعلية.
يلخص الجدول المرجعي التالي أهم كلاسات الطباعة والوسوم النصية المعتمدة في بوتستراب 5.3 والغرض الدقيق لكل منها لاختيار الأداة الأنسب في واجهتك:
| الكلاس أو الوسم | التأثير البصري القياسي | حالة الاستخدام المثالية |
|---|---|---|
.h1 – .h6 | أحجام وسمك عناوين قياسية مرنة | منح فقرة مظهر العنوان دون تغيير تسلسل SEO |
.display-1 – .display-6 | أحجام كبرى حتى 5rem بوزن 300 | عناوين الواجهات الترحيبية والأرقام الإحصائية |
.lead | حجم 1.25rem ووزن خط خفيف | تمييز الفقرة الافتتاحية في المقالات والصفحات |
.blockquote + .blockquote-footer | خط مقتبس واضح مع تذييل مصدر بشرطة تلقائية | عرض المقولات والمراجع الموثقة داخل <figure> |
.list-unstyled / .list-inline | حذف النقاط أو صف عناصر القائمة أفقياً | قوائم التذييل والروابط السريعة بدون نقاط |
<code> / <kbd> / <samp> | خط أحادي العرض وأزرار مفاتيح داكنة | التوثيقات التقنية واختصارات لوحة المفاتيح |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: تعرفت في هذا الدرس على منظومة تنسيق النصوص في بوتستراب 5.3، وكيفية الفصل الذكي بين وسوم العناوين الدلالية وكلاسات المظهر البصري، واستخدام العناوين الكبرى والفقرات الاستهلالية والاقتباسات الموثقة والقوائم المجردة وعناصر عرض الأكواد.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «الصور والأشكال التوضيحية في بوتستراب 5» لإتقان تحجيم الصور المتجاوبة وتوسيطها وربطها بتسميات دلالية متكاملة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Display Headings العناوين البارزة الكبرى
- ستة كلاسات طباعية مرنة في بوتستراب توفر أحجاماً أكبر ووزن خط أخف لإبراز عناوين الواجهات الترحيبية.
- للمراجعة
- 02 Lead Paragraph الفقرة الاستهلالية
- فقرة افتتاحية تُنسق بكلاس .lead لتتميز بحجم خط 1.25rem ووزن رشيق يمهد لبقية المحتوى.
- للمراجعة
- 03 Blockquote Footer تذييل مصدر الاقتباس
- كلاس يُطبق على وسم التسمية داخل عنصر figure لتوثيق قائل المقولة ومصدرها مسبوقاً بشرطة تلقائية.
- للمراجعة
- 04 Unstyled List القائمة المجردة
- قائمة تحمل كلاس .list-unstyled لإزالة النقاط التلقائية والحشو الجانبي عن عناصرها الأبناء المباشرين فقط.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RFS RFS
- Responsive Font Sizes
- محرك التحجيم التلقائي المدمج في بوتستراب لتقليص وتكبير أحجام العناوين بسلاسة حسب عرض الشاشة.
- للمراجعة
- 02 SEO SEO
- Search Engine Optimization
- تنظيم شجرة العناوين الدلالية بدقة لمحركات البحث مع الاعتماد على كلاسات .h1-.h6 عند الحاجة لمظهر بصري مختلف.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- الشجرة البرمجية الحية لعناصر الصفحة في المتصفح والتي تتطلب ترميز أقواس الوسوم داخل عناصر عرض الأكواد.
- للمراجعة
- 04 CLI CLI
- Command Line Interface
- بيئة الأوامر النصية التي تُوثق اختصاراتها ومخرجاتها دلالياً في بوتستراب عبر وسوم kbd وsamp.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ حاوية .container تضم عنواناً رئيسياً بوسم h1 مع كلاس display-3، تليه فقرة افتتاحية بكلاس lead تتضمن كلمة مظللة بوسم mark.
-
اكتب عنصر figure يجمع اقتباساً بكلاس blockquote وتذييلاً بكلاس blockquote-footer مع وسم cite، ثم أتبعه بقائمة أفقية من ثلاثة عناصر باستخدام list-inline وlist-inline-item.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
متى يُفضّل تطبيق كلاس .h3 على عنصر فقرة <p> بدلاً من استخدام وسم العنوان <h3>؟
تمنح كلاسات .h1-.h6 العنصر حجم العنوان بصرياً دون كسر التسلسل المنطقي لشجرة العناوين في محركات البحث وقارئات الشاشة.
أي كلاس من كلاسات العناوين الكبرى يعطي أكبر حجم خط في بوتستراب 5؟
يسير التدرج من الأكبر للأصغر مثل العناوين القياسية؛ لذا يمثل .display-1 الحجم الأكبر (5rem) و.display-6 الأصغر.
هل يزيل كلاس .list-unstyled نقاط الترقيم عن جميع القوائم الفرعية المتداخلة تلقائياً؟
عبارة خاطئة؛ يؤثر كلاس .list-unstyled على العناصر الأبناء المباشرين فقط، وتحتفظ أي قائمة متداخلة بنقاطها ما لم يُضف إليها الكلاس نفسه.
ما البنية القياسية المعتمدة في بوتستراب 5 لتغليف الاقتباس مع تذييل اسم صاحبه؟
يغلف بوتستراب 5 عنصر الاقتباس .blockquote مع عنصر التسمية .blockquote-footer داخل وسم figure دلالي موحد.
أي وسم ينسقه بوتستراب 5 على هيئة زر داكن لتمثيل اختصارات لوحة المفاتيح؟
يُستخدم وسم <kbd> لتمثيل مدخلات لوحة المفاتيح مثل Ctrl + S ويمنحه بوتستراب خلفية داكنة أنيقة.
ما زوج الكلاسات الواجب دمجه معاً لعرض قائمة أفقية على سطر واحد في بوتستراب 5؟
يلزم وضع .list-inline على القائمة الأب مع إضافة .list-inline-item على كل عنصر li بداخلها.
هل يجب استبدال أقواس الوسوم (< و>) بالكيانات < و> عند عرضها داخل وسم <code>؟
صحيح؛ يفسر المتصفح الأقواس الحادة غير المرمزة كوسوم HTML حقيقية حتى داخل عنصر code.
ما وظيفة إضافة كلاس .initialism إلى وسم الاختصار <abbr>؟
يصغر حجم خط الاختصار قليلاً بنسبة 0.875em ويحول أحرفه الإنجليزية إلى حالة الأحرف الكبيرة بتناسق.