Okuwandiika obubaka

Ebiwandiiko n'ebyokulabirako by'ebikozesebwa mu biwandiiko ebya bulijjo okufuga okulaganya, okuzinga, obuzito, n'ebirala.

Ku muko guno

Okusengeka ebiwandiiko

Kyangu okuddamu okusengeka ebiwandiiko ku bitundu ebirina ebika by’okusengeka ebiwandiiko. Ku lw’okulaganya okutandika, okumaliriza, n’oku makkati, kiraasi eziddamu ziriwo ezikozesa ebifo bye bimu eby’okumenya obugazi bw’ekifo eky’okulaba ng’enkola ya giridi.

Tandika ebiwandiiko ebisengekeddwa ku sayizi zonna ez'ekifo eky'okulaba.

Ebiwandiiko ebiteekeddwa wakati ku sayizi zonna ez'ekifo eky'okulaba.

Komekkereza ebiwandiiko ebisengekeddwa ku sayizi zonna ez'ekifo eky'okulaba.

Tandika ebiwandiiko ebisengekeddwa ku bifo eby'okulaba ebirina obunene bwa SM (obutono) oba okusingawo.

Tandika ebiwandiiko ebisengekeddwa ku bifo eby'okulabamu obunene bwa MD (wa wakati) oba okusingawo.

Tandika ebiwandiiko ebisengekeddwa ku viewports ezirina sayizi ya LG (ennene) oba okusingawo.

Tandika ebiwandiiko ebisengekeddwa ku bifo eby'okulaba ebirina obunene bwa XL (ebinene ennyo) oba okusingawo.

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>

Weetegereze nti tetuwa kiraasi za utility ku biwandiiko ebituufu. Wadde nga, mu ngeri ey’obulungi, ebiwandiiko ebituufu biyinza okulabika ng’ebisikiriza ennyo, bifuula ebanga wakati w’ebigambo okubeera ery’ekifuulannenge n’olwekyo kizibu okusoma.

Okuzinga ebiwandiiko n’okujjula

Zinga ebiwandiiko .text-wrapn’ekibiina.

Ekiwandiiko kino kisaana okuzinga.

html

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

Lemesa ebiwandiiko okuzinga ne .text-nowrapkiraasi.

Ekiwandiiko kino kisaana okujjula omuzadde.

html

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

Okumenya ebigambo

Lemesa ennyiriri empanvu ez'ebiwandiiko okumenya ensengeka y'ebitundu byo ng'okozesa .text-breakokuteeka word-wrap: break-wordne word-break: break-word. Tukozesa word-wrapmu kifo ky’ebisinga okubeerawo overflow-wrapolw’obuwagizi bwa bbulawuzi obugazi, era ne twongerako ebitakozesebwa word-break: break-wordokwewala ensonga ne flex containers.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Weetegereze nti okumenya ebigambo tekisoboka mu Luwarabu , nga lwe lulimi lwa RTL olusinga okukozesebwa. N'olwekyo .text-breakeggyibwa mu RTL yaffe ekung'aanyiziddwa CSS.

Okukyusa ebiwandiiko

Kyuusa ebiwandiiko mu bitundu ebirina ebika by’okuwandiika ebiwandiiko ebikulu.

Ebiwandiiko ebitonotono.

Ebiwandiiko ebiriko ennukuta ennene.

Ebiwandiiko ebiwandiikiddwa mu CapiTaliZed.

html

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

Weetegereze engeri .text-capitalizegy’akyusaamu ennukuta esooka yokka eya buli kigambo, n’aleka ensonga y’ennukuta endala yonna nga tekoseddwa.

Enkula y’empandiika

Kyusa mangu the font-sizeof ekiwandiiko. Nga ebibiina byaffe eby’omutwe (okugeza, .h1– .h6) bikola font-size, font-weight, ne line-height, ebikozesebwa bino bikola byokkafont-size . Okugerageranya obunene bw’ebikozesebwa bino kukwatagana n’ebintu ebiriko omutwe gwa HTML, kale omuwendo bwe gweyongera, obunene bwabyo bukendeera.

.fs-1 ekiwandiiko

.fs-2 ekiwandiiko

.fs-3 ekiwandiiko

.fs-4 ekiwandiiko

.fs-5 ekiwandiiko

.fs-6 ekiwandiiko

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>

Customize font-sizes zo eziriwo nga okyusa $font-sizesmaapu ya Sass.

Obuzito bw’empandiika n’ennukuta ensirifu

Kyusa mangu font-weightoba font-styleof text n'ebikozesebwa bino. font-styleutilities zifunzibwa nga .fst-*ate font-weightutilities zifunzibwa nga .fw-*.

Ebiwandiiko ebinene.

Ebiwandiiko ebizitowa ebigumu (ebikwatagana n’ekintu ekizadde).

Ekiwandiiko ekizitowa nga semibold.

Ekiwandiiko ekizitowa ekya bulijjo.

Ebiwandiiko ebizitowa ennyo.

Ekiwandiiko ekizitowa ennyo (ekikwatagana n’ekintu ekizadde).

Ebiwandiiko ebiwandiikiddwa mu ngeri ey’enjawulo.

Ebiwandiiko ebirina sitayiro ya fonti eya bulijjo

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>

Obugulumivu bwa layini

Kyusa obuwanvu bwa layini .lh-*n’ebikozesebwa.

Kano katundu kawanvu akawandiikiddwa okulaga engeri obugulumivu bwa layini bwa elementi gye bukosebwamu ebikozesebwa byaffe. Ebika bikozesebwa ku elementi yennyini oba oluusi elementi omuzadde. Ebika bino bisobola okulongoosebwa nga bwe kyetaagisa ne API yaffe ey’omugaso.

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>

Ekifo kimu

Kyusa okulonda ku monospace font stack yaffe ne .font-monospace.

Kino kiri mu monospace

html

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

Reset langi

Ddamu langi y'ekiwandiiko oba enkolagana ne .text-reset, esobole okusikira langi okuva ku muzadde waakyo.

Ebiwandiiko ebisirise nga biriko enkolagana y'okuzzaawo .

html

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

Okuyooyoota ebiwandiiko

Okuyooyoota ebiwandiiko mu bitundu n'ebibiina by'okuyooyoota ebiwandiiko.

Ekiwandiiko kino kirina layini wansi waakyo.

Ekiwandiiko kino kirina layini eyitamu.

Link eno erina okuyooyoota kwayo okw’ebiwandiiko okuggyiddwawo

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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Maapu

Ebikozesebwa eby’obunene bw’empandiika bikolebwa okuva ku maapu eno, nga bigattiddwa wamu n’ebikozesebwa byaffe API.

$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
);

Ebikozesebwa API

Ebikozesebwa mu font n'ebiwandiiko bilangirirwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.

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