في هذا الدرس 6تصفّح المواضيع
اعتمد الإصدار الرابع قديماً على الاتجاهات الفيزيائية الجامدة لحرفي اليسار واليمين، وهو ما كان يجبر المطور على عكس محاذاة النصوص يدوياً عند ترجمة الواجهة إلى العربية. في Bootstrap 5.3 انتقل النظام بالكامل إلى المحاذاة المنطقية عبر الكلاسات الثلاثة .text-start لبداية السطر، و.text-center للتوسيط، و.text-end لنهاية السطر.
بفضل هذا التصميم المنطقي، يحاذي الكلاس .text-start الفقرة إلى اليمين تلقائياً داخل مستندات dir="rtl" وإلى اليسار داخل مستندات dir="ltr" دون تعديل حرف واحد في HTML، كما يتيح التخصيص المتجاوب مثل .text-center .text-md-start لتوسيط العناوين على شاشة الهاتف وموازاتها للبداية على الحاسوب.
<p class="text-start border p-2">Start aligned text</p>
<p class="text-center border p-2">Centered headline</p>
<p class="text-end border p-2">End aligned summary</p>
<p class="text-center text-md-start bg-light p-2">
Centered on mobile, start-aligned from md up
</p>عند عرض عناوين مقالات ديناميكية أو روابط معرّفات طويلة داخل أعمدة ضيقة، قد يفيض النص خارج إطار البطاقة ويشوّه التخطيط الأفقي للصفحة. يعالج بوتستراب هذه المشكلة بأربع أدوات دقيقة: .text-wrap للسماح بالالتفاف الطبيعي، و.text-nowrap لمنع انكسار السطر داخل الشارات القصيرة، و.text-break لكسر السلاسل المتصلة الطويلة مثل عناوين الروابط عبر خاصيتي word-wrap: break-word وword-break: break-word.
أما لاختصار العناوين الطويلة في سطر واحد منتهٍ بثلاث نقاط أنيقة ... فنستخدم الكلاس .text-truncate، مع تذكّر أنه يشترط عنصراً كتلياً display: block أو .d-inline-block مقيداً بعرض صريح مثل .col-7.
<div class="row">
<div class="col-6 text-truncate border p-2 mb-2">
This long dashboard report title truncates cleanly
</div>
</div>
<p class="text-break border p-2 bg-body-tertiary">
https://example.com/very-long-unbroken-verification-token
</p>تتيح لك كلاسات الحجم .fs-1 الأضخم حتى .fs-6 الأصغر التحكم في مقاس النص بصرياً بمعزل تام عن الرتبة الدلالية لوسوم العناوين؛ فلا تضطر لكسر تسلسل محركات البحث بكتابة وسم <h2> لمجرد تكبير رقم إحصائي في لوحة التحكم، بل تبقيه داخل <p class="fs-2 fw-bold">.
ويتكامل سلم الحجم مع كلاسات السماكة مثل .fw-bold و.fw-semibold و.fw-medium و.fw-light، وكلاسات الميلان .fst-italic و.fst-normal، وأربع درجات لضبط ارتفاع السطر هي .lh-1 للعناوين المدمجة و.lh-sm و.lh-base و.lh-lg للمقالات الطويلة المريحة للقراءة.
<p class="fs-2 fw-bold mb-1">24,850 Active Learners</p>
<p class="fs-5 fw-semibold text-primary">Weekly Report</p>
<p class="lh-lg border p-3 bg-body-tertiary mb-0">
Generous line height improves reading comfort across
multi-line educational articles on all viewports.
</p>عند تنسيق رموز العملات أو المعرّفات البرمجية باللغة الإنجليزية، توفر كلاسات التحويل .text-uppercase لتكبير جميع الأحرف، و.text-lowercase لتصغيرها، و.text-capitalize لتكبير الحرف الأول من كل كلمة، مع الكلاس .font-monospace لعرض المعرّفات والأكواد بخط أحادي العرض تتساوى فيه مساحة كل محرف.
كما تتحكم ثلاث أدوات مباشرة في التسطير النصي وهي .text-decoration-underline لإضافة خط سفلي، و.text-decoration-line-through لشطب الأسعار السابقة قبل الخصم، و.text-decoration-none لإزالة خط الرابط داخل القوائم الملاحية، إلى جانب .text-reset لجعل الرابط يرث لون النص الأب المحيط به.
أضاف الإصدار Bootstrap 5.3 عائلة متكاملة لتجميل الروابط النصية تتفوق على تلوين النص العادي؛ إذ يضبط الكلاس .link-primary وأخواته حتى .link-body-emphasis لون الرابط ولون التفاعل عند مرور المؤشر والتركيز تلقائياً دون الحاجة لكتابة محددات :hover مخصصة.
والأجمل هو إمكانية التحكم في المسافة الفاصلة بين الكلمات والخط السفلي عبر .link-offset-1 و.link-offset-2 و.link-offset-3 حتى لا يقطع الخط السفلي نقاط الحروف العربية كالياء والجيم، مع تلوين الخط السفلي وشفافيته بشكل مستقل عبر .link-underline-primary و.link-underline-opacity-25 و.link-underline-opacity-100-hover.
<div class="vstack gap-2">
<a href="#docs" class="link-primary link-offset-2">
Clear offset underline for readable typography
</a>
<a href="#api" class="link-success link-offset-3
link-underline-opacity-25
link-underline-opacity-100-hover">
Subtle underline that brightens on hover
</a>
</div>تُختتم أدوات النصوص بثلاث مجموعات تفاعلية دقيقة كثيراً ما توفر كتابة أكواد جافاسكريبت إضافية: أولها مجموعة تحديد النص .user-select-all التي تظلل كامل المعرّف أو أمر التثبيت بمجرد نقرة واحدة لتسهيل نسخه، و.user-select-none لمنع تحديد عناصر الواجهة التزيينية بالخطأ أثناء السحب.
وثانيها مجموعة أحداث المؤشر .pe-none لتعطيل استقبال النقرات بالماوس و.pe-auto لاستعادتها، مع ضرورة الانتباه إلى أن pointer-events: none لا يمنع الوصول بزر Tab في لوحة المفاتيح بمفرده! أما المجموعة الثالثة فهي المحاذاة الرأسية السطرية .align-baseline و.align-top و.align-middle و.align-bottom لموازنة الأيقونات والعناصر السطرية بدقة.
| فئة الأداة | أبرز الكلاسات القياسية | الوظيفة الهندسية في Bootstrap 5.3 |
|---|---|---|
| المحاذاة المنطقية | .text-start / .text-center / .text-end | محاذاة متجاوبة تنعكس تلقائياً بين العربية والإنجليزية |
| الالتفاف والقص | .text-wrap / .text-break / .text-truncate | منع فيضان الروابط الطويلة أو قص السطر بثلاث نقاط |
| سلم الخطوط والوزن | .fs-1..6 / .fw-bold / .lh-lg | تحكم بصري مرن في الحجم والسماكة وارتفاع السطر |
| تزيين الروابط | .link-* / .link-offset-1..3 / .link-underline-* | تلوين الروابط وضبط مسافة وشفافية الخط السفلي |
| التحديد والمؤشر | .user-select-all / .pe-none / .align-middle | تظليل النص بنقرة والتحكم في استقبال نقرات الفأرة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس منظومة أدوات النصوص والروابط في بوتستراب 5.3، بدءاً من المحاذاة المنطقية المتكيفة مع العربية، ومنع فيضان النصوص أو قصها بالنقاط، وضبط سلم الخطوط وأوزانها، وصولاً إلى تلوين الروابط وبُعد خطها السفلي وأدوات التحديد والمؤشر. الخطوة التالية: انتقل الآن إلى الدرس الحادي والعشرين لاستكشاف المساعدات البصرية وأدوات الإتاحة مثل نسب أبعاد الفيديو والرابط الممتد وبناء أقسام الواجهة الترحيبية الحديثة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Logical Text Alignment المحاذاة النصية المنطقية
- محاذاة السطور نسبةً إلى بداية ونهاية اتجاه القراءة بدلاً من اليمين واليسار الفيزيائيين الثابتين.
- للمراجعة
- 02 Text Truncation قص النص بالنقاط
- اقتطاع النص الطويل في سطر واحد عند حدود الحاوية وختمه بثلاث نقاط متتالية للدلالة على الاختصار.
- للمراجعة
- 03 Link Underline Offset بُعد الخط السفلي للرابط
- ضبط المسافة العمودية الفاصلة بين حروف الكلمة والخط السفلي للرابط لحماية النقاط العربية من التداخل.
- للمراجعة
- 04 Pointer Events Utility أداة تفاعل المؤشر
- كلاس خدمي يحدد ما إذا كان العنصر يستجيب لنقرات الفأرة واللمس أو يمررها للعنصر خلفه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RFS RFS
- Responsive Font Sizes
- المحرك المدمج في بوتستراب لتقليص وتكبير أحجام العناوين وكلاسات الخطوط تلقائياً مع عرض الشاشة.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه تخطيط المستندات العربية حيث يشير كلاس البداية تلقائياً إلى الحافة اليمنى.
- للمراجعة
- 03 LTR LTR
- Left-to-Right
- اتجاه تخطيط المستندات الإنجليزية حيث يشير كلاس البداية تلقائياً إلى الحافة اليسرى.
- للمراجعة
- 04 URL URL
- Uniform Resource Locator
- عناوين الروابط الطويلة المتصلة التي تحتاج غالباً إلى كلاس كسر الكلمات لمنع فيضان العمود.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ صندوقاً يضم رقماً بارزاً بكلاسي fs-2 وfw-bold، ووصفاً مقصوصاً بكلاس text-truncate داخل عمود محدد، ورابطاً منسقاً بكلاس link-offset-3.
-
نسّق رمزاً مرجعياً طويلاً بدمج كلاسات font-monospace وuser-select-all وtext-break داخل إطار.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أي كلاس في Bootstrap 5.3 يحل محل الكلاس الملغى .text-left ليحاذي النص لبداية السطر في العربية والإنجليزية؟
استبدل بوتستراب 5 الكلاسات الفيزيائية left/right بالكلاسات المنطقية text-start وtext-end.
ما الشرط الهندسي اللازم لكي يعمل الكلاس .text-truncate ويقص النص الزائد بثلاث نقاط؟
يتطلب القص بالنقاط عنصراً ذا display: block أو inline-block داخل عرض محدد ليُحسم مكان القطع.
يعتبر الكلاس .fs-1 أكبر حجماً بصرياً من الكلاس .fs-6 في سلم خطوط Bootstrap 5.
يتبع مقياس .fs-1 إلى .fs-6 نفس تسلسل العناوين من h1 الأكبر إلى h6 الأصغر.
أي كلاس يمنع سلسلة رابط إلكتروني طويلة متصلة بلا مسافات من كسر عرض العمود؟
يفعل الكلاس .text-break خاصية كسر الكلمات الطويلة المتصلة عند حافة الحاوية.
ما وظيفة الكلاس .link-offset-3 المضاف في Bootstrap 5.3؟
يتحكم .link-offset-1..3 في خاصية text-underline-offset لإبعاد الخط السفلي عن الحروف والنقاط.
يكفي وضع الكلاس .pe-none وحده على عنصر الرابط <a> لمنع الوصول إليه عبر مفتاح Tab في لوحة المفاتيح.
يعطل .pe-none أحداث الفأرة فقط، ولإيقاف تركيز لوحة المفاتيح يلزم إضافة tabindex="-1" وaria-disabled="true".
أي كلاس يجعل تظليل كامل نص المعرّف البرمجي يتم فور نقر المستخدم عليه نقرة واحدة؟
يضبط .user-select-all خاصية CSS user-select: all لتسهيل نسخ الرموز والأوامر بنقرة واحدة.
أي كلاس في Bootstrap 5 يحل محل الكلاس القديم الملغى .font-weight-bold؟
اختصر بوتستراب 5 تسميات أوزان الخط إلى البادئة القياسية الرشيقة fw-* مثل .fw-bold و.fw-semibold.