Source

متن

مستندات و نمونه هایی برای ابزارهای متنی رایج برای کنترل تراز، بسته بندی، وزن و موارد دیگر.

تراز متن

به راحتی متن را با کامپوننت ها با کلاس های تراز متن تراز مجدد کنید.

Ambitioni dedisse scripsisse iudicaretur. کراس ماتیس iudicium purus sit amet fermentum. Donec sed odio operae، eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. در اولین پست، سایت پیروس افروس. Petierunt uti sibi concilium totius Galliae in diem certam indicere. کراس ماتیس iudicium purus sit 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.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
<!-- 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با استفاده از تنظیمات overflow-wrap: break-wordword-break: break-wordبرای سازگاری با اینترنت اکسپلورر و Edge) از شکستن طرح اجزای خود از رشته های طولانی متن جلوگیری کنید .

ممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممم

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

تبدیل متن

تبدیل متن در اجزاء با کلاس های حروف بزرگ متن.

متن با حروف کوچک.

متن بزرگ.

متن با حروف بزرگ

<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>