Nivîstok

Belgekirin û mînakên ji bo karûbarên nivîsê yên hevpar ji bo kontrolkirina lihevhatin, pêçan, giranî, û hêj bêtir.

Li ser vê rûpelê

Lihevkirina nivîsê

Bi dersên hevrêzkirina nivîsê re bi hêsanî nivîsê li pêkhateyan rast bikin. Ji bo destpêk, dawî, û rêzkirina navendê, dersên bersivdar hene ku heman xalên veqetandinê yên firehiya dîtinê wekî pergala torê bikar tînin.

Nivîsara rêzkirî li ser hemî mezinahiyên dîmenderê dest pê bikin.

Li ser hemî mezinahiyên porta dîtinê nivîsa rêzkirî ya navendî.

Li ser hemî mezinahiyên porta dîtinê nivîsa rêzkirî biqedînin.

Metna rêzkirî li ser dîmenderên bi mezinahiya SM (biçûk) an berfirehtir dest pê bikin.

Metna rêzkirî li ser dîmenderên bi mezinahiya MD (navîn) an berfirehtir dest pê bikin.

Li ser dîmenderên bi mezinahiya LG (mezin) an firehtir nivîsa rêzkirî dest pê bikin.

Metna rêzkirî li ser dîmenderên mezinahiya XL (zêde-mezin) an berfirehtir dest pê bikin.

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>

Bala xwe bidinê ku em dersên karûbar ji bo nivîsa rastdar peyda nakin. Digel ku, ji hêla estetîkî ve, metnek rastdar dibe ku balkêştir xuya bike, ew dûrbûna peyvan rasthatîtir dike û ji ber vê yekê xwendinê dijwartir dike.

Pêçkirina nivîsê û zêdebûn

Nivîsê bi .text-wrappolê ve bipêçin.

Divê ev nivîs biqede.

html

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

Pêşîlêgirtina nivîsê bi .text-nowrapçînekê re bigire.

Divê ev nivîs ji dêûbav re derbas bibe.

html

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

Peyv şikandin

Bi karanîna .text-breaksazkirinê word-wrap: break-wordû word-break: break-word. Em word-wrapli şûna ya gelemperî overflow-wrapji bo piştgirîya gerokê ya berfireh bikar tînin, û yên ku hatine hilweşandin lê zêde dikin word-break: break-wordda ku ji pirsgirêkên bi konteynerên nerm dûr nekevin.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Bala xwe bidinê ku şikandina peyvan di erebî de, ku zimanê RTL yê herî zêde tê bikaranîn, ne mimkûn e. Ji ber vê yekê .text-breakji CSS-ya meya berhevkirî ya RTL tê rakirin.

Veguherîna nivîsê

Bi çînên sermayekirina nivîsê di pêkhateyan de nivîsê veguherînin.

Nivîsa bi tîpên piçûk.

Nivîsa bi tîpên mezin.

Nivîsara CapiTaliZed.

html

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

Bala xwe bidinê ka meriv çawa .text-capitalizetenê tîpa yekem a her peyvê diguhezîne, rewşa tîpên din bêbandor dihêle.

Mezinahiya tîpan

Zûtirîn font-sizenivîsê biguherînin. Dema ku dersên sernavê me (mînak, .h1- .h6) têne sepandin font-size, font-weight, û line-height, ev karûbar tenê têne sepandin font-size. Mezinahiya van amûran bi hêmanên sernavê yên HTML-ê re li hev dike, ji ber vê yekê her ku hejmar zêde dibe, mezinahiya wan kêm dibe.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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>

Bi guheztina nexşeya Sass font-size-ên xweyên berdest xweş bikin.$font-sizes

Giraniya tîpan û îtalîk

Bi van karûbaran zû font-weightan jî font-stylenivîsê biguherînin. font-styleutilities bi kurtî wek .fst-*û font-weightutilities bi kurtî wek .fw-*.

Nivîsa qelew.

Nivîsa giraniya qelewtir (bi hêmana dêûbav re têkildar).

Nivîsa giraniya nîvbold.

Nivîsara giraniya normal.

Nivîsara giraniya sivik.

Nivîsara bi giraniya siviktir (bi hêmana dêûbav re têkildar).

Nivîsa îtalîk.

Nivîsar bi şêwaza tîpên normal

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>

Bilindahiya rêzê

Bi karûbaran bilindahiya rêzê biguherînin .lh-*.

Ev paragrafek dirêj e ku hatî nivîsandin da ku destnîşan bike ka xêz-bilindiya hêmanek çawa ji hêla karûbarên me ve tê bandor kirin. Ders li ser hêmanê bixwe an carinan jî hêmana dêûbav têne sepandin. Van ders dikarin wekî ku hewce be bi API-ya meya karûbar re bêne xweş kirin.

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>

Monospace

Hilbijartinek li staka tîpên meya monospace bi .font-monospace.

Ev di monospace de ye

html

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

Rengê vegerîne

Rengê nivîsek an girêdanek bi , ji nû .text-resetve bike, da ku ew reng ji dêûbavê xwe mîras bistîne.

Nivîsa bê deng a bi girêdana vesazkirinê .

html

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

Decoration text

Bi dersên xemilandina nivîsê di pêkhateyan de nivîsê xemilînin.

Di binê vê nivîsê de rêzek heye.

Xetek vê nivîsê heye ku tê de derbas dibe.

Ev lînka xemla wê ya nivîsê hatiye rakirin

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>

Sass

Variables

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

Nexşe

Karûbarên mezinahiya tîpan ji vê nexşeyê, digel karûbarên me API-yê têne çêkirin.

$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
);

Utilities API

Karûbarên font û nivîsê di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.

    "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
    ),