متن
مستندات و نمونه هایی برای ابزارهای متنی رایج برای کنترل تراز، بسته بندی، وزن و موارد دیگر.
به راحتی متن را با کامپوننت ها با کلاس های تراز متن تراز مجدد کنید.
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-nowrap
کلاس جلوگیری کنید.
<div class="text-nowrap" 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>
تبدیل متن در اجزاء با کلاس های حروف بزرگ متن.
متن با حروف کوچک.
متن بزرگ.
متن با حروف بزرگ
<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-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>