متن
مستندات و نمونه هایی برای ابزارهای متنی رایج برای کنترل تراز، بسته بندی، وزن و موارد دیگر.
تراز متن
به راحتی متن را با کامپوننت ها با کلاس های تراز متن تراز مجدد کنید.
برخی از متن جایگیر برای نشان دادن تراز متن توجیه شده. آیا شما همین کار را برای من انجام خواهید داد؟ زمان مواجهه با موسیقی من دیگر موز تو نیستم فرا رسیده است. شنیدم زیباست، قاضی باش و دخترانم رای خواهند داد. می توانم ققنوس را در درونم احساس کنم. بهشت به عشق ما غبطه می خورد، فرشتگان از بالا می گریند. آره، تو منو به آرمان شهر میبری
<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
برای جلوگیری از مشکلات مربوط به ظروف انعطافپذیر، موارد منسوخ را اضافه میکنیم.
ممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممم
<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>