in English

متن

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

تراز متن

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

برخی از متن جایگیر برای نشان دادن تراز متن توجیه شده. آیا شما همین کار را برای من انجام خواهید داد؟ زمان مواجهه با موسیقی من دیگر موز تو نیستم فرا رسیده است. شنیدم زیباست، قاضی باش و دخترانم رای خواهند داد. می توانم ققنوس را در درونم احساس کنم. بهشت به عشق ما غبطه می خورد، فرشتگان از بالا می گریند. آره، تو منو به آرمان شهر میبری

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

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با استفاده از تنظیم word-wrap: break-wordو از شکستن طرح اجزای خود از رشته های طولانی متن جلوگیری کنید word-break: break-word. ما word-wrapبه‌جای موارد رایج‌تر overflow-wrapبرای پشتیبانی گسترده‌تر مرورگر استفاده می‌کنیم و word-break: break-wordبرای جلوگیری از مشکلات مربوط به ظروف انعطاف‌پذیر، موارد منسوخ را اضافه می‌کنیم.

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

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