دەق

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

لەم پەیجەدا

ڕێکخستنی دەق

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

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

دەقی ناوەندی ڕێکخراو لەسەر هەموو قەبارەکانی دەرچەی بینین.

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

دەستپێکردنی دەقی ڕێکخراو لەسەر دەروازەکانی بینین بە قەبارەی SM (بچووک) یان فراوانتر.

دەستپێکردنی دەقی ڕێکخراو لەسەر دەروازەکانی بینین بە قەبارەی MD (مامناوەند) یان فراوانتر.

دەستپێکردنی دەقی ڕێکخراو لەسەر دەرگاکانی بینین بە قەبارەی LG (گەورە) یان فراوانتر.

دەستپێکردنی دەقی ڕێکخراو لەسەر دەروازەکانی بینین بە قەبارەی XL (گەورەتر) یان فراوانتر.

html

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

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

پێچانی دەق و ڕژانی دەق

دەق بە پۆلێک بپێچە .text-wrap.

ئەم دەقە دەبێ بپێچێتەوە.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

ڕێگری لە پێچانی دەق بکە بە .text-nowrapپۆلێک.

ئەم دەقە دەبێت بەسەر دایک و باوکدا بڕژێت.

html

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

شکاندنی وشە

ڕێگری بکە لە ڕستە درێژەکانی دەق لە شکاندنی شێوازی پێکهاتەکانت بە بەکارهێنانی .text-breakto set word-wrap: break-wordو word-break: break-word. ئێمە word-wrapلەبری باوتر overflow-wrapبۆ پشتگیری فراوانتری وێبگەڕ بەکاریدەهێنین، و بەکارنەهاتووەکان زیاد word-break: break-wordدەکەین بۆ ئەوەی کێشە لە کۆنتێنەرەکانی فلیکسدا دروست نەبێت.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

سەرنج بدە کە شکاندنی وشەکان لە زمانی عەرەبیدا ناتوانرێت , کە زۆرترین زمانی RTL بەکاردێت. بۆیە .text-breakلە CSS ی کۆکراوەی RTL ی ئێمە لادەبرێت.

گۆڕینی دەق

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

دەقی بە پیتی بچووک.

دەقی بە پیتی گەورە.

دەقی سەرمایەدار.

html

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

سەرنج بدەن چۆن .text-capitalizeتەنها پیتی یەکەمی هەر وشەیەک دەگۆڕێت، کەیسی هەر پیتێکی تر بێ کاریگەری دەهێڵێتەوە.

سایزی نوسین

بە خێرایی font-sizeدەقەکە بگۆڕە. لە کاتێکدا پۆلەکانی سەردێڕەکانمان (بۆ نموونە، .h1– .h6) font-size, font-weight, و line-height, ئەم سوودمەندانە تەنها کارپێدەکەن font-size. قەبارەدانان بۆ ئەم سوودمەندیانە لەگەڵ توخمەکانی سەردێڕی HTML دەگونجێت، بۆیە لەگەڵ زیادبوونی ژمارەکە قەبارەیان کەم دەبێتەوە.

.fs-1 دەق

.fs-2 دەق

.fs-3 دەق

.fs-4 دەق

.fs-5 دەق

.fs-6 دەق

html

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

s بەردەستەکانت font-sizeبە دەستکاریکردنی $font-sizesنەخشەی Sass خۆکارانە بکە.

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

بە خێرایی font-weightیان font-styleی دەق بەم سوودمەندیانە بگۆڕە. font-styleخزمەتگوزارییەکان بەم شێوەیە کورت دەکرێنەوە .fst-*و font-weightخزمەتگوزارییەکان بەم شێوەیە کورت دەکرێنەوە .fw-*.

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

دەقی کێشی قەڵەمتر (بە بەراورد بە توخمە باوکەکە).

دەقی کێشی نیمچە قەڵەم.

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

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

دەقی کێشی سووکتر (بە بەراورد بە توخمە باوکەکە).

دەقی ئیتاڵی.

دەق بە شێوازی فۆنتێکی ئاسایی

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

بەرزی هێڵ

بەرزی هێڵەکە بە .lh-*خزمەتگوزارییەکان بگۆڕە.

ئەمە بڕگەیەکی درێژە کە نووسراوە بۆ ئەوەی نیشان بدات کە چۆن بەرزی هێڵی توخمێک کاریگەری لەسەرە لەلایەن سوودمەندییەکانمانەوە. پۆلەکان بۆ خودی توخمەکە یان هەندێک جار توخمە باوکەکە بەکاردەهێنرێن. دەتوانرێت ئەم پۆلانە بەپێی پێویست بە APIی سوودمەندیمان خۆکارانە دابنرێت.

html

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

مۆنۆسپەیس

هەڵبژاردنێک بگۆڕە بۆ ستاکی فۆنتەکانی مۆنۆسپەیسمان بە .font-monospace.

ئەمەش لە مۆنۆفەزایەدا

html

<p class="font-monospace">This is in monospace</p>

ڕەنگەکە ڕێست بکەرەوە

ڕەنگی دەقێک یان بەستەرێک بە .text-reset.

دەقی بێدەنگ کراو بە بەستەری ڕێست .

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

ڕازاندنەوەی دەق

ڕازاندنەوەی دەق بە پێکهاتەکان بە پۆلەکانی ڕازاندنەوەی دەق.

ئەم دەقە لە ژێرەوە دێڕێکی هەیە.

ئەم دەقە دێڕێکی بەناودا تێدەپەڕێت.

ئەم بەستەرە ڕازاندنەوەی دەقەکەی لابراوە

html

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

ساس

گۆڕاوەکان

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

نەخشەکان

سوودمەندییەکانی قەبارەی فۆنت لەم نەخشەیە دروست دەکرێن، بە تێکەڵکردن لەگەڵ APIی سوودمەندییەکانمان.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

API ی سوودمەندیەکان

سوودمەندی فۆنت و دەق لە API سوودمەندیەکانمان لە scss/_utilities.scss. فێربە چۆن API ی سوودمەندیەکان بەکاربهێنیت.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        semibold: $font-weight-semibold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),