Testua

Testu-erabilgarritasun arrunten dokumentazioa eta adibideak lerrokatzea, biltzea, pisua eta abar kontrolatzeko.

Orrialde honetan

Testuaren lerrokatzea

Erraz lerrokatu testua osagaiekin testua lerrokatzeko klaseekin. Hasierako, amaierako eta erdiko lerrokatzeetarako, sare-sistemaren bista-zabalera-puntu berdinak erabiltzen dituzten klase sentikorrak daude eskuragarri.

Hasi lerrokatuta testua bista-tamaina guztietan.

Zentratu lerrokatutako testua bista-tamaina guztietan.

Amaitu lerrokatutako testua bista-tamaina guztietan.

Hasi lerrokatuta testua SM (txikia) edo zabalagoko bistaratzeetan.

Hasi lerrokatuta testua MD (ertaina) edo zabalagoko bistaratzeetan.

Hasi lerrokatuta testua LG tamainako (handia) edo zabalagoko ataletan.

Hasi lerrokatuta testua XL tamainako (handiagoak) edo zabalagoko bistaratzeetan.

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>

Kontuan izan ez dugula erabilera-klaserik ematen justifikatutako testuetarako. Estetikoki justifikatutako testuak erakargarriagoa dirudien arren, hitz-tartea ausazkoagoa egiten du eta, beraz, zailagoa da irakurtzea.

Testua biltzea eta gainezkatzea

Bilatu testua .text-wrapklase batekin.

Testu honek bildu beharko luke.

html

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

.text-nowrapSaihestu testua klase batekin biltzea .

Testu honek gurasoak gainezka egin beharko luke.

html

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

Hitz-haustea

Saihestu testu-kate luzeek zure osagaien diseinua haustea .text-breakezartzeko word-wrap: break-wordeta word-break: break-word. Arakatzaileen euskarria zabalagorako word-wrapohikoagoa denaren ordez erabiltzen dugu , eta zaharkitua gehitzen dugu flex edukiontziekin arazoak saihesteko.overflow-wrapword-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Kontuan izan hitzak hautsi ezin direla arabieraz , hau da, gehien erabiltzen den RTL hizkuntza. Hori dela .text-breaketa, gure RTL konpilatutako CSStik kendu da.

Testu-eraldaketa

Eraldatu testua osagaietan testu larriz idazteko klaseekin.

Testua minuskulaz.

Testua maiuskulaz.

Testu maiuskulatua.

html

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

Kontuan izan nola .text-capitalizehitz bakoitzaren lehen letra bakarrik aldatzen den, beste edozein hizkiren maiuskulak eragin gabe utziz.

Letra-tamaina

Azkar aldatu font-sizetestua. Gure goiburuko klaseak (adibidez, .h1– .h6) aplikatzen diren bitartean font-size, font-weighteta line-heighterabilgarritasun hauek soilik aplikatzen dira font-size. Utilitate hauen tamaina HTML-ren goiburuko elementuekin bat dator, beraz, kopurua handitzen den heinean, haien tamaina txikiagotzen da.

.fs-1 testua

.fs-2 testua

.fs-3 testua

.fs-4 testua

.fs-5 testua

.fs-6 testua

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>

Pertsonalizatu erabilgarri dauden Sass mapa font-sizealdatuz .$font-sizes

Letraren pisua eta letra etzana

font-weightAldatu testuaren edo azkar font-styleutilitate hauekin. font-styleutilitateak honela laburtzen dira .fst-*eta font-weightutilitateak honela laburtzen dira .fw-*.

Testu lodia.

Testu lodiagoa (elementu nagusiari dagokiona).

Pisu erdi lodia testua.

Pisu arrunteko testua.

Testu arina.

Testu arinagoa (elementu nagusiari dagokiona).

Testu etzana.

Letra-tipo normala duen testua

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>

Lerroaren altuera

Aldatu linearen altuera .lh-*utilitateekin.

Elementu baten lerro-altuerari gure utilitateek nola eragiten dioten erakusteko idatzitako paragrafo luze bat da. Klaseak elementuari berari edo batzuetan elementu nagusiari aplikatzen zaizkio. Klase hauek behar bezala pertsonaliza daitezke gure erabilgarritasun APIarekin.

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>

Monoespazioa

Aldatu aukeraketa bat gure espazio bakarreko letra-tipo-pilara .font-monospace.

Hau monoespazioan dago

html

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

Berrezarri kolorea

Berrezarri testu edo estekaren kolorea rekin .text-reset, bere gurasoaren kolorea hereda dezan.

Ezkutatuta dagoen testua berrezartzeko esteka batekin .

html

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

Testu dekorazioa

Dekoratu testua osagaietan testu dekorazio klaseekin.

Testu honek lerro bat dauka azpian.

Testu honek lerro bat dauka zeharkatzen duena.

Esteka honi testu-apainketa kendu zaio

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

Aldagaiak

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

Mapak

Letra-tamainako utilitateak mapa honetatik sortzen dira, gure utilitateen APIarekin batera.

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

Letra-tipoak eta testu-erabilgarriak gure utilitateen APIan deklaratzen dira scss/_utilities.scss. Ikasi utilitateen APIa erabiltzen.

    "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
    ),