Qillqa
Qillqakuna chaymanta rikch'anakuna común qillqa yanapakuykunapaq chiqanchay, p'istuy, llasaynin chaymanta aswan kamachinapaq.
Qillqasqa chiqanchay
Qillqa chiqanchay clasekunawan componentekunaman mana sasachakuspa musuqmanta chiqanchay. Qallarinapaq, tukukuypaq chaymanta chawpi chiqanchaypaq, kutichiq clasekuna kanku mayqinkunachus kikin qhaway punku ancho p'akiykunata llamk'achinku llika sistema hina.
Llapan qhawana sayaykunapi chiqanchasqa qillqata qallariy.
Llapan qhawana sayaykunapi chawpi chiqanchasqa qillqa.
Tukuy qhawana sayaykunapi chiqanchasqa qillqata tukukuy.
SM (huch'uy) icha aswan anchoyuq qhawanakunapi chiqanchasqa qillqata qallariy.
MD (chawpi) utaq aswan anchoyuq qhawanakunapi chiqanchasqa qillqata qallariy.
LG (hatun) utaq aswan anchoyuq qhawanakunapi chiqanchasqa qillqata qallariy.
XL (yapa-hatun) utaq aswan anchoyuq qhawanakunapi chiqanchasqa qillqata qallariy.
<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>
Envoltura de texto y desbordamiento
Qillqasqata huk .text-wrap
clasewan p’istuy.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Qillqa huk .text-nowrap
clasewan p’istuykunanpaq hark’ay.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Palabra pakiy
Hark'ay suni kaskakuna qillqakuna componentekunaykipa churayninta p'akinanpaq llamk'achispa .text-break
to set word-wrap: break-word
chaymanta word-break: break-word
. Aswan word-wrap
común overflow-wrap
kaqmanta aswan hatun maskaq yanapakuypaq llamk'achiyku, chaymanta yapayku manaña word-break: break-word
flex contenedores kaqwan sasachakuykuna kananpaq.
mmmmMmmMMMMMMMMMMMMMMMMMMMMMmmMMmmMMMMMMMMMMMMMMMMmmMMMMMmmMMMMMMMMMMMmmMMMMMMMMMmmMMMMMMmmMMMMMMMMmmMMMMMMMM
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
RTL huñusqa CSS nisqaykumanta hurqusqa kachkan.
Qillqa t’ikray
Qillqa hatun qillqana clasekunawan componentekunapi qillqa tikray.
Uchuy qillqa.
Hatun qillqa.
Capitalizasqa qillqasqa.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Reparay imaynatas .text-capitalize
sapa simiq ñawpaq kaq letrallanta cambian, huk letrakunaq casontapas mana afectasqata saqespa.
Tamaño de fuente
Utqaylla tikray chay font-size
de texto. Mientras ñuqaykupa umalliq clasekuna (kayhina, .h1
– .h6
) font-size
, font-weight
, chaymanta line-height
, kay yanapakuykunalla ruwakunku font-size
. Kay yanapakuykunapaq hatun kaynin HTML umalliq elementokunawan tupan, chayrayku yupay yapakusqanmanhina, hatun kayninku pisiyan.
.fs-1 qillqasqa
.fs-2 qillqasqa
.fs-3 qillqasqa
.fs-4 qillqasqa
.fs-5 qillqasqa
.fs-6 qillqasqa
<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>
Sass mapata font-size
tikraspa s kaqniykikunata ruway .$font-sizes
Peso de fuente y cursiva
Utqaylla tikray font-weight
utaq font-style
qillqamanta kay yanapakuykunawan. font-style
utilidades nisqakunaqa kayhinata pisiyachisqa kanku .fst-*
chaymanta font-weight
utilidadkuna kayhinata pisiyachisqa kanku .fw-*
.
Yana qillqawan qillqasqa.
Aswan negro llasaq qillqasqa (mama elementowan tupachisqa).
Texto de peso normal.
Llampu llasaq qillqasqa.
Aswan llasaq qillqa (mama elementowan tupachisqa).
Kursivawan qillqasqa.
Texto con 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>
Chiru sayay
.lh-*
Utilidades nisqawan chiru sayayninta tikray .
Kayqa huk suni parrafo qillqasqa kachkan imayna huk elementopa chiru-alturan utilidadniykuwan afectasqa kasqanmanta qawachinapaq. Clases nisqakunaqa kikin elementoman icha wakin kuti tayta elementoman churakun. Kay clasekuna API yanapakuyniykuwan necesitasqankumanhina ruwasqa kankuman.
Kayqa huk suni parrafo qillqasqa kachkan imayna huk elementopa chiru-alturan utilidadniykuwan afectasqa kasqanmanta qawachinapaq. Clases nisqakunaqa kikin elementoman icha wakin kuti tayta elementoman churakun. Kay clasekuna API yanapakuyniykuwan necesitasqankumanhina ruwasqa kankuman.
Kayqa huk suni parrafo qillqasqa kachkan imayna huk elementopa chiru-alturan utilidadniykuwan afectasqa kasqanmanta qawachinapaq. Clases nisqakunaqa kikin elementoman icha wakin kuti tayta elementoman churakun. Kay clasekuna API yanapakuyniykuwan necesitasqankumanhina ruwasqa kankuman.
Kayqa huk suni parrafo qillqasqa kachkan imayna huk elementopa chiru-alturan utilidadniykuwan afectasqa kasqanmanta qawachinapaq. Clases nisqakunaqa kikin elementoman icha wakin kuti tayta elementoman churakun. Kay clasekuna API yanapakuyniykuwan necesitasqankumanhina ruwasqa kankuman.
<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
Huk akllasqata huk espacio letra pilaykuman tikray .font-monospace
.
Kayqa monoespacio nisqapim kachkan
<p class="font-monospace">This is in monospace</p>
Reset color
Huk qillqap icha t'inkip llimp'inta , nisqawan musuqmanta churay .text-reset
, chay hinapi tayta-mamanmanta llimp'ita herenciata chaskinanpaq.
Huk kutichiy t'inkiwan upallachisqa qillqasqa .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Decoración de texto
Qillqa sumaqchay clasekunawan componentekunapi qillqasqata sumaqchay.
Kay qillqasqaqa uranpi huk chiruyuqmi.
Kay qillqasqaqa huk chiruyuqmi chayninta purichkaq.
Kay t'inkiqa qillqa sumaqchasqa kaynintam hurqusqa kachkan<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
Variables nisqakuna
// 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;
Mapas
Letra-hatun yanapakuykuna kay mapamanta ruwasqa, yanapakuyniyku API kaqwan kuskachasqa.
$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 nisqa
Fuente chaymanta qillqa yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss
. Yachay imayna ruwanakuna API llamk'achiyta.
"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
),