انتقل إلى محتوى الدرس

Logical Text Alignment المحاذاة المنطقية للنصوص

أتقن أدوات النصوص والروابط في بوتستراب 5.3 بدءاً من المحاذاة المنطقية الداعمة للعربية والقص بالنقاط وأحجام الخطوط وحتى تلوين الروابط والتحكم بالتحديد والمؤشر.
4 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

اعتمد الإصدار الرابع قديماً على الاتجاهات الفيزيائية الجامدة لحرفي اليسار واليمين، وهو ما كان يجبر المطور على عكس محاذاة النصوص يدوياً عند ترجمة الواجهة إلى العربية. في Bootstrap 5.3 انتقل النظام بالكامل إلى المحاذاة المنطقية عبر الكلاسات الثلاثة .text-start لبداية السطر، و.text-center للتوسيط، و.text-end لنهاية السطر.

بفضل هذا التصميم المنطقي، يحاذي الكلاس .text-start الفقرة إلى اليمين تلقائياً داخل مستندات dir="rtl" وإلى اليسار داخل مستندات dir="ltr" دون تعديل حرف واحد في HTML، كما يتيح التخصيص المتجاوب مثل .text-center .text-md-start لتوسيط العناوين على شاشة الهاتف وموازاتها للبداية على الحاسوب.

الصف 2 صورة توضيحية
مخطط منظومة أدوات النصوص والروابط المنطقية في بوتستراب 5.3
الصف 3 كود برمجي
HTML
<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>
الصف 4 ملاحظة هامة