آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

تراز متن 

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

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

 

برای چپ، راست و هماهنگی مرکز، کلاس های ریسپانسیو در دسترس هستند که با استفاده از همان نقاط بازپرداخت عرض نمایش به عنوان سیستم شبکه استفاده می شود.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

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

This text should overflow the parent.

 <div class="text-nowrap" style="width: 8rem;"> This text should overflow the parent. </div>

برای محتویات دیگر، می توانید یک کلاس متنی متصل را برای کوتاه کردن متن با یک بیضوی اضافه کنید. نیاز به نمایش: inline-block یا display: block.

Praeterea iter est

Praeterea iter est quasdam res quas ex communi.

Praeterea iter est quasdam res quas ex communi. 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>

 

تبدیل متن 

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

lowercased text.

UPPERCASED TEXT.

CapiTaliZed Text.

 <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>

توجه کنید که چطور متن اصلی تنها حرف اول هر کلمه را تغییر می دهد، و حروف هر حرف دیگر را تغییر نمی دهد.

 

وزن فونت و کج

به سرعت وزن  متن را تغییر دهید.

Normal weight text.

Light weight text.

Italic text.

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