نص
وثائق وأمثلة لأدوات مساعدة نصية شائعة للتحكم في المحاذاة والالتفاف والوزن وغير ذلك.
إعادة محاذاة النص بسهولة للمكونات باستخدام فئات محاذاة النص.
Ambitioni dedisse scripsisse iudicaretur. Cras Mattis iudicium purus الجلوس amet fermentum. Donec sed Odio operae، eu vulputate felis rhoncus. هو أمر لا غنى عنه عن طريق المجتمعات المحلية. في nos hinc posthac، sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras Mattis iudicium purus الجلوس amet fermentum.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
بالنسبة للمحاذاة اليسرى واليمنى والوسطى ، تتوفر الفئات المستجيبة التي تستخدم نفس نقاط توقف عرض منفذ العرض مثل نظام الشبكة.
نص بمحاذاة إلى اليسار في جميع أحجام منفذ العرض.
نص بمحاذاة الوسط في جميع أحجام منفذ العرض.
نص بمحاذاة اليمين في جميع أحجام منفذ العرض.
نص بمحاذاة إلى اليسار في إطار العرض بحجم SM (صغير) أو أعرض.
نص بمحاذاة إلى اليسار في إطار العرض بحجم MD (متوسط) أو أوسع.
نص بمحاذاة إلى اليسار في إطارات العرض بحجم LG (كبير) أو أعرض.
نص بمحاذاة إلى اليسار في إطارات العرض بحجم XL (كبير جدًا) أو أعرض.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
منع النص من الالتفاف مع .text-nowrap
الفصل.
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>
للمحتوى الأطول ، يمكنك إضافة .text-truncate
فصل لاقتطاع النص بعلامة حذف. يتطلب display: inline-block
أو display: block
.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
تحويل النص في المكونات بفئات الكتابة بالأحرف الكبيرة للنص.
نص صغير.
نص مكتوب بحروف كبيرة.
نص CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
لاحظ كيف text-capitalize
يغير فقط الحرف الأول من كل كلمة ، مع ترك حالة أي أحرف أخرى دون تغيير.
قم بتغيير ثقل (وضوح) النص بسرعة أو جعل النص مائلًا.
نص عريض.
نص الوزن الطبيعي.
نص خفيف الوزن.
نص مائل.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>