Maranduhai
Kuatia ha techapyrã umi utilidad jehaipyre jepivegua rehegua ocontrola hag̃ua alineación, envoltura, peso ha hetave mbaꞌe.
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>
Texto envoltura ha desbordamiento
Embojere jehaipyre peteĩ .text-wrap
mbo’esyry reheve.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Ejoko jehaipyre ojejokua hag̃ua peteĩ .text-nowrap
mbo’esyry ndive.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Ñe’ẽ ñembyai
Ejoko umi jehaipyre vore puku ani hag̃ua oñembyai ne componentekuéra ñemohenda eipurúvo .text-break
to set word-wrap: break-word
ha word-break: break-word
. Roipuru ojepuruvéva word-wrap
rangue overflow-wrap
kundahára pytyvõ tuichavévape g̃uarã, ha romoĩve umi ndojepuruvéimava word-break: break-word
ani hag̃ua oiko mba’e’apopy flex mba’e’oka ndive.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm.
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
ojeipe’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-capitalize
omoambue 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-size
de texto. Ñande mbo’esyry rubro rehegua (por ejemplo, .h1
– .h6
) ojeporu aja font-size
, font-weight
, ha , ko’ã line-height
utilidad ojeporu . font-size
Koꞌã 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-size
s ojeguerekóva emoambuévo $font-sizes
Sass mapa.
Fuente pohýi ha cursiva
Pya’e emoambue pe font-weight
térã font-style
de texto ko’ã utilidad reheve. font-style
umi servicios públicos oñembombyky ha’eháicha .fst-*
ha font-weight
umi 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.
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.
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.
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
),