Maranduhai

Kuatia ha techapyrã umi utilidad jehaipyre jepivegua rehegua ocontrola hag̃ua alineación, envoltura, peso ha hetave mbaꞌe.

Ko páhinape

Jehaipyre ñemohenda

Emohenda jey jehaipyre ndahasýiva umi componente orekóva clase alineación jehaipyre rehegua. Ñepyrũrã, paha ha mbytegua alineación-pe g̃uarã, ojeguereko mboꞌepy ombohováiva oipurúva peteĩchagua punto de ruptura jehechaukaha ancho rehegua sistema cuadrícula rehegua ndive.

Eñepyrũ jehaipyre oñembojoajúva opaite jehechaukaha tuichakue rehe.

Jehaipyre oñembojoajúva mbytépe opaite jehechaukaha tuichakue rehe.

Opaite jehaipyre oñembohekopyréva opaite jehechaukaha tuichakue rehe.

Emoñepyrũ jehaipyre oñembohekopyréva umi jehechaukaha tuichakue SM (michĩvéva) térã tuichavévape.

Emoñepyrũ jehaipyre oñembohekopyréva umi jehechaukaha tuichakue MD (mediano) térã tuichavévape.

Eñepyrũ jehaipyre oñembohekopyréva umi jehechaukaha LG (tuichavéva) térã tuichavévape.

Emoñepyrũ jehaipyre oñembohekopyréva umi jehechaukaha tuichakue XL (tuichavéva) térã tuichavévape.

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

Ñañamindu’u norome’ẽiha umi clase utilidad rehegua jehaipyre ojehustifikávape g̃uarã. Jepémo, estéticamente, texto justificado ikatu ojehecha atractivove, ojapo espaciado ñe’ẽ rehegua aleatorio-ve ha upévare hasyve ojelee haĝua.

Texto envoltura ha desbordamiento

Embojere jehaipyre peteĩ .text-wrapmbo’esyry reheve.

Ko jehaipyre ombotyva’erã.

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

Ejoko jehaipyre ojejokua hag̃ua peteĩ .text-nowrapmbo’esyry ndive.

Ko jehaipyre ohypýiva’erã túvape.

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

Ñe’ẽ ñembyai

Ejoko umi jehaipyre vore ipukúva ani hag̃ua omboja ne componentekuéra ñemohenda eipurúvo .text-breakto set word-wrap: break-wordha word-break: break-word. Roipuru ojepuruvéva word-wraprangue overflow-wrapkundahára pytyvõ tuichavévape g̃uarã, ha romoĩve umi ndojepuruvéimava word-break: break-wordani hag̃ua oiko mba’e’apopy flex mba’e’oka ndive.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm.

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

Ñañamindu’u ndaikatuiha oñembyai ñe’ẽ árabe -pe , ha’éva RTL ñe’ẽ ojepuruvéva. Upévare .text-breakojeipe’a ñande RTL CSS oñembyatývagui.

Ñe’ẽryru ñembohasa

Omoambue jehaipyre componente-kuérape umi clase jehaipyre mayúscula rehegua reheve.

Jehaipyre michĩva.

Jehaipyre tuicháva.

Jehaipyre oñembohekopyréva.

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

Ñañamindu’u mba’éichapa .text-capitalizeomoambue peteĩteĩ ñe’ẽ tai peteĩha añoite, ohejávo mba’eveichagua ambue tai káso noñeafectái.

Fuente tuichakue

Pya’e emoambue pe font-sizede texto. Ñande mbo’esyry rubro rehegua (por ejemplo, .h1– .h6) ojeporu aja font-size, font-weight, ha , ko’ã line-heightutilidad ojeporu . font-sizeKoꞌã tembipururãme g̃uarã tuichakue ojoaju HTML elemento iñakãrapuꞌa rehegua ndive, upéicha rupi oñembohetavévo papapy, oguejy tuichakue.

.fs-1 jehaipyre

.fs-2 jehaipyre

.fs-3 jehaipyre

.fs-4 jehaipyre

.fs-5 jehaipyre

.fs-6 jehaipyre

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

Emohenda nde font-sizes ojeguerekóva emoambuévo $font-sizesSass mapa.

Fuente pohýi ha cursiva

Pya’e emoambue pe font-weighttérã font-stylede texto ko’ã utilidad reheve. font-styleumi servicios públicos oñembombyky ha’eháicha .fst-*ha font-weightumi servicios públicos oñemboty .fw-*.

Texto negro-pe.

Jehaipyre ipohýiveva (relativo elemento túva rehe).

Texto de peso normal rehegua.

Texto de peso ligero rehegua.

Jehaipyre ipohýiveva (elemento túva rehe).

Texto cursiva rehegua.

Jehaipyre oguerekóva estilo de letra normal

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

Línea yvatekuépe

Omoambue línea yvate umi .lh-*servicio público ndive.

Kóva haꞌehína peteĩ párrafo ipukúva ojehaíva ohechauka hag̃ua mbaꞌeichaitépa ojeafectá ñande utilidad rupive línea-altura peteĩ elemento rehegua. Umi clase ojeporu elemento rehe voi térã sapyꞌante elemento túva rehe. Ko’ã mbo’esyry ikatu oñemboheko oñeikotevẽháicha ore API utilidad rehegua rupive.

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

Monoespacio rehegua

Emoambue peteĩ jeporavopyre ñande pila de fuente monoespacio-pe .font-monospace.

Péva monoespacio-pe

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

Reset color rehegua

Emoĩjey peteĩ jehaipyre térã joajuha sa’y .text-reset, ikatu hag̃uáicha ohupyty pe sa’y ituvagui.

Jehaipyre oñembogueva'ekue peteĩ enlace reset reheve .

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

Decoración de texto rehegua

Ombojegua jehaipyre componente-kuérape umi clase decoración jehaipyre reheve.

Ko jehaipyre oguereko peteĩ línea iguype.

Ko jehaipyre oguereko peteĩ línea ohasáva ipype.

Ko enlace oguereko idecoración de texto ojeipe’áva

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

Variables rehegua

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

Mapakuéra

Umi purupyrã vore tuichakue rehegua ojejapo ko mapa-gui, oñembojoajúvo ore purupyrã API ndive.

$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 de Utilidades rehegua

Umi purupyrã letra ha jehaipyre rehegua ojedeclara ñande API purupyrãme ary scss/_utilities.scss. Eikuaa mba’éichapa eipurukuaa API utilidad rehegua.

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