نص

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

محاذاة النص

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

بعض نص العنصر النائب لإظهار محاذاة النص المضبوط. سوف تفعل الشيء نفسه بالنسبة لي؟ حان الوقت لمواجهة الموسيقى لم أعد ملهمك. سمعت أنها جميلة ، كوني القاضي وستصوت فتياتي. أستطيع أن أشعر بطائر الفينيق بداخلي. الجنة تغار من حبنا والملائكة تبكي من فوق. أجل ، تأخذني إلى المدينة الفاضلة.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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>