in English

Kuputuhi

Nga tuhinga me nga tauira mo nga taputapu kuputuhi noa hei whakahaere i te tirohanga, te takai, te taumaha, me etahi atu.

I tenei wharangi

Tirohanga Kuputuhi

He ngawari ki te whakatika i nga tuhinga ki nga waahanga me nga karaehe whakatika kuputuhi. Mo te tiimatanga, 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.

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>

Kia mahara kaore matou e whakarato i nga karaehe whaipainga mo nga tuhinga tika. Ahakoa te ahua ataahua, nga tuhinga tika, he pai ake te ahua, ka kaha ake te mokowhiti kupu, na reira ka uaua ake te panui.

Te takai kupu me te puhake

Takaia te tuhinga ki te .text-wrapakomanga.

Me takai tenei kuputuhi.

html

<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.

Ko tenei kuputuhi me kaha ki te matua.

html

<div class="text-nowrap bg-light border" 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

html

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

Kia mahara kaore e taea te wawahi kupu i roto i te reo Arapi , koinei te reo RTL tino whakamahia. No reira .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.

html

<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

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>

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 iti.

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

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>

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.

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>

Monospace

Hurihia he kowhiringa ki ta maatau momotuhi mokowhiti mokowhiti me te .font-monospace.

Kei roto i te mokowhiti kotahi tenei

html

<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 .

html

<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

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

Taurangi

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

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(--#{$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
    ),