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-nowrapکلاس جلوگیری کنید.

این متن باید سرریز از والد باشد.
<div class="text-nowrap" 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>

تبدیل متن

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

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

متن بزرگ.

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

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