kikokikona

ʻO ka palapala a me nā laʻana no nā pono kikokikona maʻamau e hoʻomalu i ka hoʻopololei ʻana, ka ʻōwili ʻana, ke kaumaha, a me nā mea hou aku.

Ma kēia ʻaoʻao

Hoʻopololei kikokikona

Hoʻololi maʻalahi i ka kikokikona i nā ʻāpana me nā papa hoʻoponopono kikokikona. No ka hoʻomaka, ka hopena, a me ka hoʻopololei waena, loaʻa nā papa pane e hoʻohana i nā ʻāpana ākea ākea like me ka ʻōnaehana grid.

E hoʻomaka i ke kikokikona i hoʻopaʻa ʻia ma nā ʻano nui o ka ʻike.

ʻO ke kikokikona i hoʻopaʻa ʻia i waena ma nā nui o nā awa nānā.

E hoʻopau i nā kikokikona i hoʻopaʻa ʻia ma nā ʻano nui o nā awa nānā.

E hoʻomaka i nā kikokikona i hoʻopaʻa ʻia ma nā puka nānā i ka nui SM (liʻiliʻi) a i ʻole ka laulā.

E hoʻomaka i nā kikokikona i hoʻopaʻa ʻia ma nā puka nānā i ka nui MD (medium) a i ʻole ka laulā.

E hoʻomaka i nā kikokikona i hoʻopaʻa ʻia ma nā puka ʻike LG (nui) a ʻoi aku paha.

E hoʻomaka i nā kikokikona i hoʻopaʻa ʻia ma nā puka nānā i ka nui XL (nui-nui) a ʻoi aku paha.

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

E hoʻomaopopo ʻaʻole mākou e hāʻawi i nā papa pono no nā kikokikona i hoʻāpono ʻia. ʻOiai, ʻoi aku ka maikaʻi o nā kikokikona i hoʻopaʻa ʻia, ʻoi aku ka maikaʻi o ka hoʻokaʻawale ʻana i nā huaʻōlelo a no laila ʻoi aku ka paʻakikī o ka heluhelu ʻana.

ʻO ka wahī ʻana a me ke kahe ʻana

Wāhi kikokiko me kahi .text-wrappapa.

Pono kēia kikokikona e uhi.

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

Kāohi i ka kikokikona mai ka wahī ʻana me kahi .text-nowrappapa.

Pono kēia kikokikona i ka makua.

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

Haʻi ʻōlelo

Kāohi i nā kaula lōʻihi o ka kikokikona mai ka haki ʻana i ka hoʻolālā o kāu mau ʻāpana me ka hoʻohana .text-breakʻana i ka hoʻonohonoho word-wrap: break-worda me word-break: break-word. Hoʻohana mākou word-wrapma kahi o ka mea maʻamau overflow-wrapno ke kākoʻo ʻoi aku ka nui o ka polokalamu kele pūnaewele, a hoʻohui i ka mea i hoʻopau word-break: break-wordʻia e pale aku i nā pilikia me nā ipu flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

E hoʻomaopopo ʻaʻole hiki ke haʻihaʻi i nā huaʻōlelo ma ka ʻōlelo ʻAlapia , ʻo ia ka ʻōlelo RTL i hoʻohana nui ʻia. No laila .text-breakua wehe ʻia mai kā mākou RTL i hōʻuluʻulu ʻia CSS.

Hoʻololi kikokikona

Hoʻololi i ka kikokikona ma nā ʻāpana me nā papa hoʻohua kikokikona.

kikokikona liʻiliʻi.

He kikokikona i hoʻopaʻa ʻia.

kikokikona CapiTaliZed.

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

E nānā i ka .text-capitalizehoʻololi wale ʻana i ka hua mua o kēlā me kēia huaʻōlelo, me ka waiho ʻole ʻana i ka hihia o nā leka ʻē aʻe.

Nui kikokiko

Hoʻololi koke i ka font-sizekikokikona. ʻOiai e pili ana kā mākou papa poʻomanaʻo (eg, .h1– .h6) font-size, font-weight, a , pili waleline-height kēia mau pono hana . Hoʻohālikelike ka hoʻonui ʻana i kēia mau mea pono i nā mea poʻomanaʻo HTML, no laila ke piʻi aʻe ka helu, e emi ana ko lākou nui.font-size

.fs-1 kikokikona

.fs-2 kikokikona

.fs-3 kikokikona

.fs-4 kikokikona

.fs-5 kikokikona

.fs-6 kikokikona

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

Hoʻopilikino i kāu mau font-sizes i loaʻa ma ka hoʻololi ʻana i ka $font-sizespalapala ʻāina Sass.

ʻO ke kaumaha o nā kikokikona a me nā kikoʻī

E hoʻololi koke i ka a i font-weightʻole font-styleo ke kikokikona me kēia mau pono. font-stylehoʻopau ʻia nā pono a hoʻopau .fst-*ʻia font-weightnā pono e like me .fw-*.

ʻŌlelo wiwo ʻole.

He kikokikona kaumaha loa (e pili ana i ka mea makua).

kikokikona kaumaha maʻamau.

kikokikona kaumaha māmā.

ʻOi aku ka māmā o nā kikokikona (e pili ana i ka mea makua).

kikokikona kikoʻī.

He kikokikona me ke ʻano kikokikona maʻamau

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

Kiʻekiʻe laina

E hoʻololi i ke kiʻekiʻe o ka laina me .lh-*nā mea pono.

He paukū lōʻihi kēia i kākau ʻia e hōʻike i ke ʻano o ka hopena o ke kiʻekiʻe laina o kahi mea e kā mākou mau pono. Hoʻohana ʻia nā papa i ka element ponoʻī a i ʻole ka mea makua i kekahi manawa. Hiki ke hoʻopilikino ʻia kēia mau papa e like me ka mea e pono ai me kā mākou pono API.

<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

E hoʻololi i kahi koho i kā mākou waihona monospace me .font-monospace.

Aia kēia ma ka monospace

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

Hoʻihoʻi i ke kala

Hoʻihoʻi hou i kahi kikokikona a i ʻole ke kala o ka loulou me .text-reset, i loaʻa iā ia ke kala mai kona makua mai.

Hoʻopaʻa ʻia ka kikokikona me kahi loulou hoʻihoʻi .

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

Kākoʻo kikokikona

E hoʻokaʻawale i ka kikokikona ma nā ʻāpana me nā papa hoʻonaninani kikokikona.

He laina ko kēia kikokikona ma lalo.

He laina ko kēia kikokikona.

Ua wehe ʻia kēia loulou i kāna kāhiko kikokikona

<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

Nā mea hoʻololi

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

Palapala 'āina

Hoʻokumu ʻia nā pono hana nui mai kēia palapala ʻāina, i hui pū ʻia me kā mākou API pono.

$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 no nā pono hana

Hōʻike ʻia nā pono kikokikona a me nā kikokikona i kā mākou API ponoʻī ma scss/_utilities.scss. E aʻo pehea e hoʻohana ai i nā pono 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
    ),