Source

دەق

بەڵگەنامە و نموونە بۆ سوودمەندییە باوەکانی دەقی بۆ کۆنترۆڵکردنی ڕێکخستن، پێچان، کێش و زۆر شتی تر.

ڕێکخستنی دەق

بە ئاسانی دەقەکە ڕێکبخەرەوە بۆ پێکهاتەکان بە پۆلەکانی ڕێکخستنی دەق.

ئامبیسیۆنی دیسێس سکریپسیس ئیودیکاتێر. کراس ماتیس ئیودیسیۆم پوروس دانیشتنی ئەمێت فێرمەنتۆم. دۆنێک سێد ئۆدیۆ ئۆپێرا، eu vulputate felis rhoncus. پرێتێریا ئیتەر ئێست کواسدام ڕیس کواس ئێکس کۆمۆنی. لە nos hinc posthac، sitientis piros ئەفرۆس. Petierunt uti sibi concilium تۆتیۆس گالیا لە دایم سێرتام ئیندێسێرێ. کراس ماتیس ئیودیسیۆم پوروس دانیشتنی ئەمێت فێرمەنتۆم.

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

بۆ ڕێکخستنی چەپ، ڕاست و ناوەڕاست، پۆلە وەڵامدەرەوەکان بەردەستن کە هەمان خاڵەکانی شکاندنی پانایی دەرچەی بینین بەکاردەهێنن وەک سیستەمی تۆڕ.

دەقی چەپ ڕێکخراو لەسەر هەموو قەبارەکانی 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-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تەنها پیتی یەکەمی هەر وشەیەک دەگۆڕێت، کەیسی هەر پیتێکی تر بێ کاریگەری دەهێڵێتەوە.

کێشی فۆنت و ئیتاڵیک

بە خێرایی کێشی (boldness)ی دەقەکە بگۆڕە یان دەقەکە بە ئیتاڵیک بنووسە.

نووسراوی تۆخ.

دەقی کێشی ئاسایی.

دەقی کێشی سووک.

دەقی ئیتاڵی.

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