Sengwalwa

Ditokomane le mehlala ya didirišwa tša sengwalwa tše di tlwaelegilego go laola go logaganya, go phuthela, boima, le tše dingwe.

Letlakaleng le

Go logaganya sengwalwa

Beakanya sengwalwa gape gabonolo go dikarolo ka diklase ta go logaganya sengwalwa. Bakeng sa go thoma, mafelelo, le go logaganya bogareng, diklase tša go arabela di a hwetšagala tšeo di šomišago dintlha tša go kgaotša tša bophara bja lefelo la go lebelela tše di swanago le tshepedišo ya keriti.

Thoma sengwalwa se se logaganywago go bogolo ka moka bja lefelo la go lebelela.

Sengwalwa se se logaganywago bogareng godimo ga bogolo ka moka bja lefelo la go lebelela.

Fediša sengwalwa se se logaganywago go bogolo ka moka bja lefelo la go lebelela.

Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja SM (tše nnyane) goba go feta.

Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja MD (gare) goba go feta.

Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja LG (tše kgolo) goba go feta.

Thoma sengwalwa se se logaganywago go dipono tša go lebelela tša bogolo bja XL (tše kgolo kudu) goba go feta.

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>

Hlokomela gore ga re neelane ka diklase tša mohola bakeng sa sengwalwa se se lokafaditšwego. Le ge, ka bothakga, mongwalo wo o lokafaditšwego o ka bonagala o kgahliša kudu, o dira gore go arolwa ga mantšu ka tsela e sa rulaganyetšwago kudu gomme ka baka leo go be thata go o bala.

Go phuthela sengwalwa le go tlala

Phuthelela sengwalwa ka .text-wrapklase.

Sengwalwa se se swanetše go phuthela.

html

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

Thibela sengwalwa go phuthela ka .text-nowrapklase.

Sengwalwa se se swanetše go tlala motswadi.

html

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

Kgaotšo ya mantšu

Thibela dithapo tše telele tša sengwalwa go thuba peakanyo ya dikarolo tša gago ka go šomiša .text-breakgo beakanya word-wrap: break-wordle word-break: break-word. Re diriša word-wrapgo e na le yeo e tlwaelegilego kudu overflow-wrapbakeng sa thekgo e phatlaletšego ya sephephediši, gomme re tlaleletša ka tšeo di sa dirišwego word-break: break-wordgo efoga ditaba ka ditshelo tša go flex.

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMm

html

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

Hlokomela gore go roba mantšu ga go kgonege ka Searabia , e lego leleme la RTL leo le dirišwago kudu. Ka hona .text-breake tlosoa ho tloha rona RTL bokella CSS.

Phetošo ya sengwalwa

Fetoša sengwalwa ka dikarolo ka diklase tša go ngwala ka ditlhaka tše kgolo tša sengwalwa.

Sengwalwa se senyenyane.

Sengwalwa sa ditlhaka tše kgolo.

Sengwalwa se se CapiTaliZed.

html

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

Hlokomela kamoo .text-capitalizee fetošago feela tlhaka ya mathomo ya lentšu le lengwe le le lengwe, e tlogela taba ya ditlhaka le ge e le dife tše dingwe e sa kgongwe.

Bogolo bja fonte

Ka pela fetola font-sizeya sengwalwa. Le ge diklase tša rena tša dihlogo (mohlala, .h1– .h6) di šoma font-size, font-weight, le line-height, didirišwa tše di šoma felafont-size . Go beakanya bogolo bja didirišwa tše go swana le dielemente tša hlogo ya HTML, ka fao ge palo e oketšega, bogolo bja tšona bo a fokotšega.

.fs-1 sengwalwa

.fs-2 sengwalwa

.fs-3 sengwalwa

.fs-4 sengwalwa

.fs-5 sengwalwa

.fs-6 sengwalwa

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>

Tlwaetša font-sizes ya gago ye e lego gona ka go fetoša $font-sizesmmapa wa Sass.

Boima ba fonte le mongwalo o sekamego

Ka pela fetola font-weightgoba font-styleya sengwalwa ka didirišwa tše. font-styledidirišwa di khutsofaditšwe bjalo ka .fst-*gomme font-weightdidirišwa di khutsofaditšwe bjalo ka .fw-*.

Mongwalo o motenya.

Sengwalwa sa boima bjo bo tiilego (se lebane le elemente ya motswadi).

Sengwalwa sa boima bja semibold.

Sengwalwa sa boima bja tlwaelo.

Sengwalwa sa boima bjo bonyenyane.

Sengwalwa sa boima bjo bo bofefo (go bapetšwa le elemente ya motswadi).

Sengwalwa sa go sekamego.

Sengwalwa ka setaele sa fonte se se tlwaelegilego

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>

Bophahamo ba mola

Fetola bophahamo ba mola ka .lh-*utilities.

Ye ke temana ye telele yeo e ngwadilwego go bontšha ka fao bophagamo bja mola bja elemente bo amegago ka gona ke didirišwa tša rena. Diklase di dirišwa go elemente ka boyona goba ka dinako tše dingwe go elemente ya motswadi. Diklase tše di ka rulaganywa ge go nyakega ka API ya rena ya utility.

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>

Sebaka se tee

Fetoša kgetho go mokgobo wa rena wa fonte ya monospace ka .font-monospace.

Se ke ka monospace

html

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

Seta mmala gape

Beakanya mmala wa sengwalwa goba kgokagano gape ka .text-reset, gore e hwetše mmala go tšwa go motswadi wa yona.

Sengwalwa se se kgaoditšwego ka kgokagano ya go seta gape .

html

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

Mokgabišo wa sengwalwa

Kgabiša sengwalwa ka dikarolo ka diklase tša go kgabiša sengwalwa.

Sengwalwa se se na le mola ka fase ga sona.

Sengwalwa se se na le mola wo o fetago go sona.

Kgokagano ye e na le mokgabišo wa yona wa sengwalwa wo o tlošitšwego

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

Diphetogo

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

Dimmapa

Didirišwa tša bogolo bja fonte di tšweletšwa go tšwa mmapeng wo, ka kopanyo le API ya rena ya didirišwa.

$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 ya Didirišwa

Didirišwa tša fonte le sengwalwa di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.

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