Test

Dokumentazzjoni u eżempji għal utilitajiet tat-test komuni biex jikkontrollaw l-allinjament, it-tgeżwir, il-piż, u aktar.

Fuq din il-paġna

Allinjament tat-test

Allinja mill-ġdid it-test faċilment għal komponenti bi klassijiet ta 'allinjament tat-test. Għall-allinjament tal-bidu, tat-tmiem u taċ-ċentru, klassijiet li jirrispondu huma disponibbli li jużaw l-istess punti ta' waqfien tal-wisa' tal-vista bħas-sistema tal-grilja.

Ibda test allinjat fuq id-daqsijiet kollha tal-viewport.

Iċ-ċentru tat-test allinjat fuq id-daqsijiet kollha tal-viewport.

Tmiem it-test allinjat fuq id-daqsijiet kollha tal-viewport.

Ibda test allinjat fuq viewports ta' daqs SM (żgħir) jew usa'.

Ibda test allinjat fuq viewports ta' daqs MD (medju) jew usa'.

Ibda test allinjat fuq viewports daqs LG (kbar) jew usa.

Ibda test allinjat fuq viewports ta' daqs XL (kbar ħafna) jew usa'.

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>

Innota li aħna ma nipprovdux klassijiet ta' utilità għal test ġustifikat. Filwaqt li, estetikament, it-test iġġustifikat jista' jidher aktar attraenti, jagħmel l-ispazjar tal-kliem aktar każwali u għalhekk aktar diffiċli biex jinqara.

It-tgeżwir tat-test u l-overflow

Kebbeb it-test bi .text-wrapklassi.

Dan it-test għandu jgħaqqad.

html

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

Tipprevjeni t-test milli jitgeżwer ma ' .text-nowrapklassi.

Dan it-test għandu jfur lill-ġenitur.

html

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

Pawża tal-kelma

Tipprevjeni kordi twal ta 'test milli jiksru t-tqassim tal-komponenti tiegħek billi tuża .text-breakbiex issettja word-wrap: break-wordu word-break: break-word. Aħna nużaw word-wrapminflok l-aktar komuni overflow-wrapgħal appoġġ usa' tal-browser, u nżidu l-deprecated word-break: break-wordbiex nevitaw kwistjonijiet b'kontenituri flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Innota li l- qsim tal-kliem mhuwiex possibbli bl-Għarbi , li hija l-lingwa RTL l-aktar użata. Għalhekk .text-breakjitneħħa mill-RTL tagħna CSS ikkumpilat.

Trasforma tat-test

Ittrasforma t-test f'komponenti bi klassijiet ta' kapitalizzazzjoni tat-test.

Test imnaqqas.

Test b'majju.

Test bil-kapital.

html

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

Innota kif .text-capitalizetibdel biss l-ewwel ittra ta 'kull kelma, u tħalli l-każ ta' kwalunkwe ittri oħra mhux affettwat.

Daqs tat-tipa

Ibdel malajr it- font-sizetest. Filwaqt li l-klassijiet tal-intestatura tagħna (eż., .h1– .h6) japplikaw font-size, font-weight, u line-height, dawn l-utilitajiet japplikaw bissfont-size . Id-daqs għal dawn l-utilitajiet jaqbel mal-elementi tal-intestatura tal-HTML, sabiex hekk kif in-numru jiżdied, id-daqs tagħhom jonqos.

.fs-1 test

.fs-2 test

.fs-3 test

.fs-4 test

.fs-5 test

.fs-6 test

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>

Ippersonalizza l-i disponibbli tiegħek font-sizebilli timmodifika l- $font-sizesmappa Sass.

Piż tat-tipa u korsiv

Ibdel malajr il- font-weightjew font-styletat-test b'dawn l-utilitajiet. font-stylel-utilitajiet huma mqassra bħala .fst-*u l- font-weightutilitajiet huma mqassra bħala .fw-*.

Test b'tipa grassa.

Test tal-piż aktar kuraġġuż (relattiv għall-element prinċipali).

Test tal-piż semibold.

Test tal-piż normali.

Test ta 'piż ħafif.

Test tal-piż eħfef (relattiv għall-element prinċipali).

Test korsiv.

Test bi stil tat-tipa normali

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>

Għoli tal-linja

Ibdel l-għoli tal-linja bl- .lh-*utilitajiet.

Dan huwa paragrafu twil miktub biex juri kif l-għoli tal-linja ta 'element huwa affettwat mill-utilitajiet tagħna. Il-klassijiet huma applikati għall-element innifsu jew xi kultant l-element ġenitur. Dawn il-klassijiet jistgħu jiġu personalizzati kif meħtieġ bl-API ta 'utilità tagħna.

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>

Monospazju

Ibdel għażla għall-munzell ta' font monospace tagħna b' .font-monospace.

Dan huwa monospace

html

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

Irrisettja l-kulur

Irrisettja l-kulur ta' test jew link b' .text-reset, sabiex jiret il-kulur mill-ġenitur tiegħu.

Test siekt b'rabta ta' reset .

html

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

Dekorazzjoni tat-test

Dekorazzjoni test fil-komponenti bi klassijiet dekorazzjoni test.

Dan it-test għandu linja taħtu.

Dan it-test għandu linja għaddejja minnu.

Din il-link tneħħiet id-dekorazzjoni tat-test tagħha

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

Varjabbli

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

Mapep

L-utilitajiet tad-daqs tat-tipa huma ġġenerati minn din il-mappa, flimkien mal-API tal-utilitajiet tagħna.

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

Utilitajiet API

L-utilitajiet tat-tipa u t-test huma ddikjarati fl-API tal-utilitajiet tagħna f' scss/_utilities.scss. Tgħallem kif tuża l-API tal-utilitajiet.

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