Test
Dokumentazzjoni u eżempji għal utilitajiet tat-test komuni biex jikkontrollaw l-allinjament, it-tgeżwir, il-piż, u aktar.
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'.
<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>It-tgeżwir tat-test u l-overflow
Kebbeb it-test bi .text-wrapklassi.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Tipprevjeni t-test milli jitgeżwer ma ' .text-nowrapklassi.
<div class="text-nowrap bd-highlight" 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
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.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.
<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
<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ż normali.
Test ta 'piż ħafif.
Test tal-piż eħfef (relattiv għall-element prinċipali).
Test korsiv.
Test bi stil tat-tipa normali
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</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.
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.
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.
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.
<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
<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 .
<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<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", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif);
$font-family-code: var(--#{$variable-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-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(--#{$variable-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,
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
),