in English

Teksto

Dokumentasion ken dagiti pagarigan para kadagiti gagangay a utilidad ti teksto tapno makontrol ti panagtunos, panagbalkot, dagsen, ken dadduma pay.

Iti daytoy a panid

Panagtunos ti teksto

Nalaka nga i-realign ti teksto kadagiti paset nga addaan kadagiti klase ti panagtunos ti teksto. Para iti panagtunos ti pangrugian, panagpatingga, ken tengnga, dagiti sumungsungbat a klase ket magun-od nga agus-usar kadagiti isu met laeng a puntos ti panagburak ti kalawa ti viewport a kas ti sistema ti grid.

Rugian ti naitunos a teksto kadagiti amin a kadakkel ti viewport.

Sentro a naitunos a teksto kadagiti amin a kadakkel ti viewport.

Pagpatinggaen ti naitunos a teksto kadagiti amin a kadakkel ti viewport.

Rugian ti naitunos a teksto kadagiti viewport a kadakkel ti SM (bassit) wenno nalawlawa.

Rugian ti naitunos a teksto kadagiti viewport a kadakkel ti MD (kalalainganna) wenno nalawlawa.

Rugian ti naitunos a teksto kadagiti viewport a kadakkel ti LG (dakkel) wenno nalawlawa.

Rugian ti naitunos a teksto kadagiti viewport a kadakkel ti XL (extra-large) wenno nalawlawa.

html nga

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

Imutektekanyo a saanmi nga ipaay dagiti klase ti utilidad para iti nainkalintegan a teksto. Nupay, iti estetika, mabalin nga ad-adda a makaay-ayo ti langa ti nainkalintegan a teksto, pagbalinenna nga ad-adda a naiparna ti panagsisina dagiti sasao ket ngarud narigrigat a basaen.

Panangbalkot iti teksto ken panaglablabes

Balkoten ti teksto iti maysa a .text-wrapklase.

Daytoy a teksto ti rumbeng a mangbalkot.

html nga

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

Lapdan ti panagbalkot ti teksto babaen ti maysa a .text-nowrapklase.

Rumbeng nga aglaplapusanan daytoy a teksto iti nagannak.

html nga

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

Word break

Lapdan dagiti atiddog a kuerdas ti teksto a mangburak iti layout dagiti pasetmo babaen ti panagusar .text-breakti to set word-wrap: break-wordken word-break: break-word. Usarenmi word-wrapimbes a ti ad-adu a gagangay overflow-wrappara iti nalawlawa a suporta ti browser, ken inayonmi dagiti saanen a maus-usar word-break: break-wordtapno maliklikan dagiti isyu kadagiti flex a pagkargaan.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmsutederngatengle mabalinmo nga nga nga nga nga nga na nganao nga mammmmmmmmmmmmormst iti nga naminmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmnag ngasupart nagelid ngem idi nai kinapudno tiayossganmganganyy kaniakby pa tayhim.

html nga

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

Imutektekanyo a ti panangburak kadagiti balikas ket saan a mabalin iti Arabiko , nga isu ti kaaduan a maus-usar a pagsasao ti RTL. Ngarud .text-breakket naikkat manipud iti RTL a naurnongtayo a CSS.

Pagbalbaliw ti teksto

Baliwan ti teksto kadagiti paset nga addaan kadagiti klase ti kapitalisasion ti teksto.

Basbassit a teksto.

Dakkel a letra ti teksto.

Nakapitalisado a teksto.

html nga

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

Paliiwenyo no kasano .text-capitalizea baliwanna laeng ti umuna a letra ti tunggal sao, a baybay-anna a di maapektaran ti kaso ti aniaman a sabali a letra.

Dakkel ti letra

Dagus a baliwan ti font-sizeti teksto. Bayat a dagiti klasetayo iti paulo (kas pagarigan, .h1– .h6) ket agaplikar iti font-size, font-weight, ken line-height, dagitoy a utilidad ket agaplikar laeng iti font-size. Ti panagdakkel para kadagitoy a utilidad ket maipada kadagiti elemento ti paulo ti HTML, isu a bayat nga umad-adu ti bilang, bumassit ti kadakkelda.

.fs-1 a teksto

.fs-2 a teksto

.fs-3 a teksto

.fs-4 a teksto

.fs-5 a teksto

.fs-6 a teksto

html nga

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

Ipasayaat ti magun-odmo font-sizenga s babaen ti panangbalbaliw iti $font-sizesmapa ti Sass.

Timbang ti letra ken italiko

Napardas a baliwan ti font-weightwenno font-styleti teksto babaen kadagitoy a utilidad. font-styledagiti utilidad ket napaababa a kas .fst-*ken font-weightdagiti utilidad ket napaababa a kas .fw-*.

Nalukmeg a teksto.

Nalukmeg ti dagsen a teksto (relatibo iti nagannak nga elemento).

Semibold nga teksto ti timbang.

Normal a timbang a teksto.

Nalag-an ti dagsenna a teksto.

Nalaglag-an ti dagsenna a teksto (relatibo iti nagannak nga elemento).

Teksto nga italiko.

Teksto nga addaan iti normal nga estilo ti letra

html nga

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

Katayag ti linia

Baliwan ti kangato ti linia babaen kadagiti .lh-*utilidad.

Daytoy ket atiddog a parapo a naisurat tapno maipakita no kasano a ti line-height ti maysa nga elemento ket maapektaran babaen dagiti utilidadtayo. Dagiti klase ket maipakat iti elemento a mismo wenno no dadduma ti nagannak nga elemento. Dagitoy a klase ket mabalin a maibagay no kasapulan babaen ti utility API-mi.

html nga

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

Monoespasio

Baliwan ti maysa a panagpili iti monospace font stack-tayo babaen ti .font-monospace.

Daytoy ket adda iti monospace

html nga

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

I-reset ti kolor

I-reset ti kolor ti teksto wenno silpo babaen ti .text-reset, tapno tawidenna ti kolor manipud iti nagannakna.

Naulimek a teksto nga addaan iti reset link .

html nga

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

Dekorasion ti teksto

Arkosan ti teksto kadagiti paset babaen kadagiti klase ti dekorasion ti teksto.

Daytoy a teksto ket addaan iti linia iti babana.

Daytoy a teksto ket addaan iti linia a lumasat iti dayta.

Daytoy a silpo ket addaan iti naikkat ti dekorasionna a teksto

html nga

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

Dagiti Variable

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

Dagiti Mapa

Dagiti utilidad ti kadakkel ti letra ket napataud manipud iti daytoy a mapa, a maikuyog ti API dagiti utilidadmi.

$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 dagiti utilidad

Dagiti utilidad ti letra ken teksto ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss. Ammuem no kasano nga usaren ti utilities 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
    ),