نص

وثائق وأمثلة لأدوات مساعدة نصية شائعة للتحكم في المحاذاة والالتفاف والوزن وغير ذلك.

محاذاة النص

إعادة محاذاة النص بسهولة للمكونات باستخدام فئات محاذاة النص.

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-wrapالفصل.

يجب أن يلتف هذا النص.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

منع النص من الالتفاف مع .text-nowrapالفصل.

يجب أن يتجاوز هذا النص الأصل.

<div class="text-nowrap bd-highlight" 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>

استراحة كلمة

منع السلاسل الطويلة من النص من كسر تخطيط المكونات باستخدام .text-breakالتعيين word-wrap: break-wordو word-break: break-word. نحن نستخدم word-wrapبدلاً من الأكثر شيوعًا overflow-wrapلدعم المتصفح الأوسع ، ونضيف المهمل word-break: break-wordلتجنب مشاكل الحاويات المرنة.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

تحويل النص

تحويل النص في المكونات بفئات الكتابة بالأحرف الكبيرة للنص.

نص صغير.

نص مكتوب بحروف كبيرة.

نص 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-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

مونوسبيس

قم بتغيير التحديد إلى مجموعة خطوط monospace الخاصة بنا باستخدام .text-monospace.

هذا في monospace

<p class="text-monospace">This is in monospace</p>

إعادة تعيين اللون

قم بإعادة تعيين لون النص أو الارتباط باستخدام .text-reset، بحيث يرث اللون من الأصل.

نص مكتوم مع رابط إعادة التعيين .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

زخرفة النص

إزالة زخرفة النص مع .text-decoration-noneفئة.

رابط غير مسطر

<a href="#" class="text-decoration-none">Non-underlined link</a>