Kuputuhi
Nga tuhinga me nga tauira mo nga taputapu kuputuhi noa hei whakahaere i te tirohanga, te takai, te taumaha, me etahi atu.
Tirohanga kupu
He ngawari ki te whakatika i nga tuhinga ki nga waahanga me nga karaehe whakatika kuputuhi. Mo te tiimata, te mutunga, me te tirohanga ki waenganui, kei te waatea nga karaehe urupare e whakamahi ana i nga waahanga whawhati whanui tauranga tirohanga ki te punaha matiti.
Tīmatahia ngā kuputuhi tīaroaro ki ngā rahinga tauranga tirohanga katoa.
Ko nga kuputuhi tirohia ki waenganui i nga rahi tauranga tirohanga katoa.
Whakamutua nga kuputuhi tiaaro ki nga rahi tauranga tirohanga katoa.
Tīmatahia te kuputuhi tīaroaro ki ngā tauranga tirohanga te rahi SM (iti), whānui ake rānei.
Tīmatahia te kuputuhi tīaroaro i runga i ngā tauranga tirohanga MD (waenganui) whanui ake ranei.
Tīmatahia te kuputuhi tīaroaro i runga i ngā tauranga tirohanga LG (nui), whānui ake rānei.
Tīmatahia ngā kuputuhi tīaroaro i runga i ngā tauranga tirohanga XL (nui-nui), whanui ake ranei.
<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>Te takai kupu me te puhake
Takaia te tuhinga ki te .text-wrapakomanga.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Aukati i te kuputuhi kia takai ki tetahi .text-nowrapakomanga.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Whati kupu
Aukati i nga aho roa o te kuputuhi kia pakaru te tahora o o wahanga ma te whakamahi .text-breakki te tautuhi word-wrap: break-wordme te word-break: break-word. Ka whakamahia e matou word-wraphei utu mo nga mea noa ake overflow-wrapmo te tautoko kaitirotiro whanui, me te taapiri i nga mea kua pahemo word-break: break-wordhei karo i nga take o nga ipu ngawari.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakka tangohia mai i a maatau RTL CSS whakahiato.
Huringa kupu
Hurihia te kuputuhi ki roto i nga waahanga me nga karaehe whakapaipai kupu.
Kuputuhi iti.
Kuputuhi pūmatua.
Kuputuhi CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Kia mahara me pehea .text-capitalizete whakarereke i te reta tuatahi o ia kupu, ka waiho te take o etahi atu reta kaore e pa.
Rahi momotuhi
Huri tere te font-sizeo te kuputuhi. Ahakoa e pa ana a maatau karaehe pane (hei tauira, .h1– .h6) font-size, font-weight, me te line-height, ko enei taputapu anake e pa ana font-size. Ko te rahinga mo enei taputapu ka rite ki nga huānga pane o HTML, na ka piki ake te tau, ka heke te rahi.
.fs-1 kupu
.fs-2 kupu
.fs-3 kupu
.fs-4 kupu
.fs-5 kupu
.fs-6 kupu
<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>Whakaritehia font-sizeo s e waatea ana ma te whakarereke i te $font-sizesmahere Sass.
Te taumaha o te momotuhi me te titaha
Kia tere te huri i te font-weightkuputuhi font-styleme enei taputapu. font-styleka whakapotohia nga taputapu .fst-*me nga font-weighttaputapu ka whakapotohia hei .fw-*.
Kuputuhi maia.
He kupu taumaha ake (e pa ana ki te huānga matua).
Kuputuhi taumaha noa.
He kupu ngawari te taumaha.
He maama ake te taumaha o te kuputuhi (e pa ana ki te huānga matua).
Kupu titaha.
Kuputuhi me te momo momotuhi noa
<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>Te teitei o te raina
Hurihia te teitei o te raina me nga .lh-*taputapu.
He whiti roa tenei i tuhia hei whakaatu i te paanga o te raina-teitei o tetahi huānga e a maatau taputapu. Ka hoatu nga karaehe ki te huānga ake, i etahi wa ko te huānga matua. Ka taea te whakarite i enei karaehe ina hiahiatia me to maatau API whaipainga.
He whiti roa tenei i tuhia hei whakaatu i te paanga o te raina-teitei o tetahi huānga e a maatau taputapu. Ka hoatu nga karaehe ki te huānga ake, i etahi wa ko te huānga matua. Ka taea te whakarite i enei karaehe ina hiahiatia me to maatau API whaipainga.
He whiti roa tenei i tuhia hei whakaatu i te paanga o te raina-teitei o tetahi huānga e a maatau taputapu. Ka hoatu nga karaehe ki te huānga ake, i etahi wa ko te huānga matua. Ka taea te whakarite i enei karaehe ina hiahiatia me to maatau API whaipainga.
He whiti roa tenei i tuhia hei whakaatu i te paanga o te raina-teitei o tetahi huānga e a maatau taputapu. Ka hoatu nga karaehe ki te huānga ake, i etahi wa ko te huānga matua. Ka taea te whakarite i enei karaehe ina hiahiatia me to maatau API whaipainga.
<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
Hurihia he kowhiringa ki ta maatau momotuhi mokowhiti mokowhiti me te .font-monospace.
Kei roto i te mokowhiti kotahi tenei
<p class="font-monospace">This is in monospace</p>Tautuhi ano te tae
Tautuhi ano i te tae o te kuputuhi, o te hono ranei ki te .text-reset, kia mau ai te tae mai i tona matua.
Kuputuhi wahangu me te hono tautuhi .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Te whakapaipai kuputuhi
Whakapaipaihia nga tuhinga ki nga waahanga me nga karaehe whakapaipai tuhinga.
He raina kei raro i tenei kuputuhi.
He raina kei roto i tenei kuputuhi.
Ko tenei hononga kua tangohia tona whakapaipai kuputuhi<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
Taurangi
// 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;
Mahere
He mea hanga mai i tenei mapi, me te API taputapu.
$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 taputapu
Ko nga momotuhi me nga taputapu tuhinga e whakaatuhia ana i roto i o maatau taputapu API i roto i scss/_utilities.scss. Akohia me pehea te whakamahi i nga taputapu API.
"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
),