Qillqa

Qillqakuna chaymanta rikch'anakuna común qillqa yanapakuykunapaq chiqanchay, p'istuy, llasaynin chaymanta aswan kamachinapaq.

Kay p'anqapi

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.

html nisqapi

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

Reparay mana allinchasqa qillqapaq yanapakuy clasekunata quykuchu. Sichus, estéticamente, justificado texto aswan munay qhawarikunman, ichaqa aswan random ruwan palabrakuna espaciamientota chayrayku aswan sasa ñawinchay.

Envoltura de texto y desbordamiento

Qillqasqata huk .text-wrapclasewan p’istuy.

Kay qillqasqaqa p’istunan tiyan.

html nisqapi

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

Qillqa huk .text-nowrapclasewan p’istuykunanpaq hark’ay.

Kay qillqasqaqa tayta-mamatam huntachinan.

html nisqapi

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

Palabra pakiy

Hark'ay suni kaskakuna qillqakuna componentekunaykipa churayninta p'akinanpaq llamk'achispa .text-breakto set word-wrap: break-wordchaymanta word-break: break-word. Aswan word-wrapcomún overflow-wrapkaqmanta aswan hatun maskaq yanapakuypaq llamk'achiyku, chaymanta yapayku manaña word-break: break-wordflex contenedores kaqwan sasachakuykuna kananpaq.

mmmmMmmMMMMMMMMMMMMMMMMMMMMMmmMMmmMMMMMMMMMMMMMMMMmmMMMMMmmMMMMMMMMMMMmmMMMMMMMMMmmMMMMMMmmMMMMMMMMmmMMMMMMMM

html nisqapi

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

Reparay simikunata pakiyqa manam atikunchu árabe simipi , chaymi aswan llamk'achisqa RTL simi. Chayrayku .text-breakRTL huñusqa CSS nisqaykumanta hurqusqa kachkan.

Qillqa t’ikray

Qillqa hatun qillqana clasekunawan componentekunapi qillqa tikray.

Uchuy qillqa.

Hatun qillqa.

Capitalizasqa qillqasqa.

html nisqapi

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

Reparay imaynatas .text-capitalizesapa simiq ñawpaq kaq letrallanta cambian, huk letrakunaq casontapas mana afectasqata saqespa.

Tamaño de fuente

Utqaylla tikray chay font-sizede 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

html nisqapi

<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-sizetikraspa s kaqniykikunata ruway .$font-sizes

Peso de fuente y cursiva

Utqaylla tikray font-weightutaq font-styleqillqamanta kay yanapakuykunawan. font-styleutilidades nisqakunaqa kayhinata pisiyachisqa kanku .fst-*chaymanta font-weightutilidadkuna kayhinata pisiyachisqa kanku .fw-*.

Yana qillqawan qillqasqa.

Aswan negro llasaq qillqasqa (mama elementowan tupachisqa).

Texto de peso seminegro.

Texto de peso normal.

Llampu llasaq qillqasqa.

Aswan llasaq qillqa (mama elementowan tupachisqa).

Kursivawan qillqasqa.

Texto con estilo de letra normal

html nisqapi

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

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.

html nisqapi

<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

html nisqapi

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

html nisqapi

<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

html nisqapi

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

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(--#{$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
    ),