Mawu

Zolemba ndi zitsanzo zamalemba omwe amagwiritsidwa ntchito kuti aziwongolera kulumikizana, kukulunga, kulemera, ndi zina zambiri.

Patsamba ili

Kuyanjanitsa mawu

Sinthani mawu mosavuta ku zigawo zokhala ndi makalasi oyika mawu. Poyambira, kumapeto, ndi kuyanjanitsa kwapakati, makalasi omvera amapezeka omwe amagwiritsa ntchito malo omwe ali ndi mawonekedwe ofanana ndi grid system.

Yambani mawu olumikizidwa pamasaizi onse owonera.

Mawu olumikizidwa pakati pamasaizi onse owonera.

Malizitsani mawu ogwirizana pamasaizi onse owonera.

Yambitsani mawu ogwirizana pamawonekedwe a SM (yaing'ono) kapena kupitilira apo.

Yambitsani mawu ogwirizana pazithunzi za MD (zapakatikati) kapena zokulirapo.

Yambitsani mawu ogwirizana pa LG (yayikulu) kapena kupitilira apo.

Yambitsani mawu ogwirizana pazithunzi zazikulu za XL (zakukulirakulira) kapena kukulirapo.

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

Dziwani kuti sitimapereka makalasi ofunikira pamawu ovomerezeka. Ngakhale, mwachisangalalo, mawu omveka angawoneke osangalatsa, amapangitsa kuti mawu azikhala mwachisawawa motero amavuta kuwerenga.

Kukulunga malemba ndi kusefukira

Manga mawu ndi .text-wrapkalasi.

Lemba ili liyenera kukulunga.

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

Pewani zolemba kuti zisamangidwe ndi .text-nowrapkalasi.

Lembali liyenera kusefukira kwa kholo.

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

Kudula mawu

Pewani mawu amtundu wautali kuti asaphwanye masanjidwe a zigawo zanu pogwiritsa ntchito .text-breakkukhazikitsa word-wrap: break-wordndi word-break: break-word. Timagwiritsa ntchito word-wrapm'malo mwazofala overflow-wrapkwambiri pothandizira asakatuli ambiri, ndikuwonjezera zomwe zatsitsidwa word-break: break-wordkuti tipewe zovuta ndi zotengera zosinthika.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Dziwani kuti kuphwanya mawu sikutheka mu Chiarabu , chomwe ndi chilankhulo cha RTL chomwe chimagwiritsidwa ntchito kwambiri. Chifukwa chake .text-breakamachotsedwa ku CSS yathu yopangidwa ndi RTL.

Kusintha mawu

Sinthani mawu kukhala zigawo ndi makalasi a zilembo zazikulu.

Mawu ocheperako.

Mawu apamwamba.

CapiTaliZed zolemba.

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

Onani momwe .text-capitalizeamasinthira chilembo choyamba cha liwu lililonse, kusiya chilembo cha zilembo zina zilizonse.

Kukula kwa zilembo

Sinthani mawu font-sizemwachangu. Pomwe makalasi athu amitu (mwachitsanzo, .h1- .h6) amagwiritsa ntchito font-size, font-weight, ndi line-height, izi zimagwira ntchitofont-size . Kukula kwazinthu izi kumagwirizana ndi mutu wa HTML, kotero kuchuluka kwake kumachepa, kukula kwake kumachepa.

.fs-1 mawu

.fs-2 mawu

.fs-3 mawu

.fs-4 mawu

.fs-5 mawu

.fs-6 mawu

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

Sinthani zomwe zilipo font-sizeposintha $font-sizesmapu a Sass.

Kulemera kwa zilembo ndi zilembo

Sinthani mwachangu mawu font-weightkapena font-stylemawu ndi izi. font-stylezofunikira zimafupikitsidwa .fst-*ndipo font-weightzofunikira zimafupikitsidwa ngati .fw-*.

Mawu olimba mtima.

Mawu olemetsa kwambiri (ogwirizana ndi gawo la makolo).

Zolemetsa zachibadwa.

Zolemba zolemera zopepuka.

Zolemetsa zopepuka (zogwirizana ndi chinthu cha makolo).

Mawu opendekeka.

Mawu okhala ndi masitayilo abwinobwino

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

Kutalika kwa mzere

Sinthani kutalika kwa mzere ndi .lh-*zofunikira.

Iyi ndi ndime yayitali yolembedwa kuti iwonetse momwe kutalika kwa mzere wa chinthu kumakhudzidwira ndi zida zathu. Makalasi amagwiritsidwa ntchito ku chinthu chokha kapena nthawi zina gawo la makolo. Maphunzirowa atha kusinthidwa momwe amafunikira ndi API yathu yothandizira.

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

Monospace

Sinthani masanjidwe kukhala masanjidwe athu amtundu wa monospace ndi .font-monospace.

Izi zili mu monospace

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

Bwezeretsani mtundu

Konzaninso mtundu wa mawu kapena ulalo ndi .text-reset, kuti alandire mtunduwo kuchokera kwa kholo lake.

Mawu osalankhula ndi ulalo wokonzanso .

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

Kukongoletsa malemba

Kongoletsani zolemba m'zigawo zokhala ndi makalasi okongoletsa zolemba.

Mawu awa ali ndi mzere pansi pake.

Mawu awa ali ndi mzere wodutsamo.

Ulalo uwu wachotsa zokongoletsa zake

<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

Zosintha

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

Mapu

Zothandizira kukula kwa zilembo zimapangidwa pamapuwa, kuphatikiza ndi zida zathu za 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
);

Utilities API

Zida zamafonti ndi zolemba zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito API.

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