دەق
بەڵگەنامە و نموونە بۆ سوودمەندییە باوەکانی دەقی بۆ کۆنترۆڵکردنی ڕێکخستن، پێچان، کێش و زۆر شتی تر.
ڕێکخستنی دەق
بە ئاسانی دەقەکە ڕێکبخەرەوە بۆ پێکهاتەکان بە پۆلەکانی ڕێکخستنی دەق.
هەندێک دەقی شوێنگرەوە بۆ نیشاندانی ڕێکخستنی دەقی ڕەوا. ئایا تۆش هەمان شت بۆ من دەکەیت؟ کاتی ئەوە هاتووە ڕووبەڕووی مۆسیقاکە ببیتەوە من چیتر مۆزی تۆ نیم. بیستوومە جوانە، دادوەر بە و کچەکانم دەنگ دەدەن. هەست بە فینیکسێک دەکەم لە ناوەوەمدا. بەهەشت ئیرەیی بە خۆشەویستیمان دەبات، فریشتەکان لە سەرەوە دەگرین. بەڵێ تۆ دەمبەیتە یۆتۆپیا.
<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>
بۆ ڕێکخستنی چەپ، ڕاست و ناوەڕاست، پۆلە وەڵامدەرەوەکان بەردەستن کە هەمان خاڵەکانی شکاندنی پانایی دەرچەی بینین بەکاردەهێنن وەک سیستەمی تۆڕ.
دەقی چەپ ڕێکخراو لەسەر هەموو قەبارەکانی viewport.
دەقی ناوەندی ڕێکخراو لەسەر هەموو قەبارەکانی دەرچەی بینین.
دەقی ڕاست ڕێکخراو لەسەر هەموو قەبارەکانی viewport.
دەقی چەپ ڕێکخراو لەسەر دەروازەکانی بینین بە قەبارەی 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
to set word-wrap: break-word
و word-break: break-word
. ئێمە word-wrap
لەبری باوتر overflow-wrap
بۆ پشتگیری فراوانتری وێبگەڕ بەکاریدەهێنین، و بەکارنەهاتووەکان زیاد word-break: break-word
دەکەین بۆ ئەوەی کێشە لە کۆنتێنەرەکانی فلیکسدا دروست نەبێت.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<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
تەنها پیتی یەکەمی هەر وشەیەک دەگۆڕێت، کەیسی هەر پیتێکی تر بێ کاریگەری دەهێڵێتەوە.
کێشی فۆنت و ئیتاڵیک
بە خێرایی کێشی (boldness)ی دەقەکە بگۆڕە یان دەقەکە بە ئیتاڵیک بنووسە.
نووسراوی تۆخ.
دەقی کێشی قەڵەمتر (بە بەراورد بە توخمە باوکەکە).
دەقی کێشی ئاسایی.
دەقی کێشی سووک.
دەقی کێشی سووکتر (بە بەراورد بە توخمە باوکەکە).
دەقی ئیتاڵی.
<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>
مۆنۆسپەیس
هەڵبژاردنێک بگۆڕە بۆ ستاکی فۆنتەکانی مۆنۆسپەیسمان بە .text-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>