Testun
Dogfennaeth ac enghreifftiau ar gyfer cyfleustodau testun cyffredin i reoli aliniad, lapio, pwysau, a mwy.
Aliniad testun
Ailalinio testun yn hawdd i gydrannau gyda dosbarthiadau alinio testun. Ar gyfer cychwyn, diwedd, ac aliniad canolfan, mae dosbarthiadau ymatebol ar gael sy'n defnyddio'r un torbwyntiau lled golygfa â'r system grid.
Cychwyn testun wedi'i alinio ar bob maint porth gwylio.
Testun wedi'i alinio yn y canol ar bob maint porth gwylio.
Testun wedi'i alinio i'r diwedd ar bob maint porth gwylio.
Cychwyn testun wedi'i alinio ar SM maint pyrth gwylio (bach) neu ehangach.
Dechreuwch destun wedi'i alinio ar borthladdoedd maint MD (canolig) neu'n ehangach.
Cychwyn testun wedi'i alinio ar olygfannau maint LG (mawr) neu ehangach.
Dechreuwch destun wedi'i alinio ar borthladdoedd maint XL (eithr-fawr) neu ehangach.
<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>Lapio testun a gorlif
Lapiwch destun gyda .text-wrapdosbarth.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Atal testun rhag lapio gyda .text-nowrapdosbarth.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Toriad geiriau
Atal llinynnau hir o destun rhag torri cynllun eich cydrannau trwy ddefnyddio .text-breaki set word-wrap: break-worda word-break: break-word. Rydym yn defnyddio word-wrapyn lle'r mwyaf cyffredin overflow-wrapar gyfer cefnogaeth porwr ehangach, ac yn ychwanegu'r anghymeradwy word-break: break-worder mwyn osgoi problemau gyda chynwysyddion fflecs.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakmae'n cael ei dynnu o'n CSS a luniwyd gan RTL.
Trawsnewid testun
Trawsnewid testun yn gydrannau gyda dosbarthiadau cyfalafu testun.
Testun mewn llythrennau bach.
Testun priflythrennau.
Testun CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Sylwch fel .text-capitalizedim ond newid llythyren gyntaf pob gair, gan adael achos unrhyw lythrennau eraill heb ei effeithio.
Maint y ffont
Newidiwch y font-sizetestun yn gyflym. Er bod ein dosbarthiadau pennawd (ee, .h1- .h6) yn berthnasol font-size, font-weight, a line-height, mae'r cyfleustodau hyn yn berthnasol font-size. Mae maint ar gyfer y cyfleustodau hyn yn cyfateb i elfennau pennawd HTML, felly wrth i'r nifer gynyddu, mae eu maint yn lleihau.
.fs-1 testyn
.fs-2 testun
.fs-3 testun
.fs-4 testun
.fs-5 testun
.fs-6 testun
<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>Addaswch eich font-sizes sydd ar gael trwy addasu'r $font-sizesmap Sass.
Pwysau ffont ac italig
Newidiwch y testun font-weightyn gyflym font-stylegyda'r cyfleustodau hyn. font-stylemae cyfleustodau'n cael eu talfyrru .fst-*a'r font-weightcyfleustodau'n cael eu talfyrru fel .fw-*.
Testun trwm.
Testun pwysau mwy beiddgar (o'i gymharu â'r rhiant elfen).
Testun pwysau arferol.
Testun pwysau ysgafn.
Testun pwysau ysgafnach (o'i gymharu â'r rhiant elfen).
Testun italig.
Testun gydag arddull ffont arferol
<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>Uchder y llinell
Newidiwch uchder y llinell gyda .lh-*chyfleustodau.
Mae hwn yn baragraff hir a ysgrifennwyd i ddangos sut mae uchder llinell elfen yn cael ei effeithio gan ein cyfleustodau. Cymhwysir dosbarthiadau i'r elfen ei hun neu weithiau'r elfen rhiant. Gellir addasu'r dosbarthiadau hyn yn ôl yr angen gyda'n API cyfleustodau.
Mae hwn yn baragraff hir a ysgrifennwyd i ddangos sut mae uchder llinell elfen yn cael ei effeithio gan ein cyfleustodau. Cymhwysir dosbarthiadau i'r elfen ei hun neu weithiau'r elfen rhiant. Gellir addasu'r dosbarthiadau hyn yn ôl yr angen gyda'n API cyfleustodau.
Mae hwn yn baragraff hir a ysgrifennwyd i ddangos sut mae uchder llinell elfen yn cael ei effeithio gan ein cyfleustodau. Cymhwysir dosbarthiadau i'r elfen ei hun neu weithiau'r elfen rhiant. Gellir addasu'r dosbarthiadau hyn yn ôl yr angen gyda'n API cyfleustodau.
Mae hwn yn baragraff hir a ysgrifennwyd i ddangos sut mae uchder llinell elfen yn cael ei effeithio gan ein cyfleustodau. Cymhwysir dosbarthiadau i'r elfen ei hun neu weithiau'r elfen rhiant. Gellir addasu'r dosbarthiadau hyn yn ôl yr angen gyda'n API cyfleustodau.
<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>Monofod
Newidiwch ddetholiad i'n pentwr ffontiau monospace gyda .font-monospace.
Mae hyn mewn monospace
<p class="font-monospace">This is in monospace</p>Ailosod lliw
Ailosod lliw testun neu ddolen gyda .text-reset, fel ei fod yn etifeddu'r lliw gan ei riant.
Testun wedi'i dewi gyda dolen ailosod .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Addurno testun
Addurnwch destun mewn cydrannau gyda dosbarthiadau addurno testun.
Mae gan y testun hwn linell oddi tano.
Mae gan y testun hwn linell yn mynd trwyddo.
Mae addurniad testun y ddolen hon wedi'i dileu<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
Newidynnau
// 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;
Mapiau
Mae cyfleustodau maint ffont yn cael eu cynhyrchu o'r map hwn, ar y cyd â'n API cyfleustodau.
$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
Mae cyfleustodau ffont a thestun yn cael eu datgan yn ein API cyfleustodau yn scss/_utilities.scss. Dysgwch sut i ddefnyddio'r API cyfleustodau.
"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
),