Text

Zvinyorwa uye mienzaniso yezvakajairwa zvinyorwa zvekushandisa kudzora kurongeka, kuputira, huremu, nezvimwe.

Pa peji ino

Kurongeka kwemavara

Gadzirisa zvinyorwa kune zvikamu zvine makirasi ekugadzirisa zvinyorwa. Kwekutanga, kupera, uye kurongeka kwepakati, makirasi anoteerera aripo anoshandisa iwo akafanana ekutarisa hupamhi hwekuputsika segridhi system.

Tanga mavara akarongedzerwa pamasaizi ese ekutarisisa.

Mavara akarongwa nepakati pamasaizi ese enzvimbo yekuona.

Pedzisa mavara akarongedzerwa pamasaizi ese ekutarisisa.

Tanga mavara akarongedzerwa pane ekuona nzvimbo saizi SM (diki) kana yakafara.

Tanga mameseji akarongedzerwa pane ekuona nzvimbo saizi MD (yepakati) kana yakafara.

Tanga mameseji akarongedzerwa pane ekuona nzvimbo saizi LG (huru) kana yakafara.

Tanga mameseji akarongedzerwa pane ekuona nzvimbo saizi XL (yakawedzera-yakakura) kana yakafara.

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>

Ziva kuti isu hatipe makirasi ekushandisa emavara anopembedzwa. Nepo, zvine mutsindo, mavara akaruramiswa anogona kutaridzika kunakidza, anoita kuti kupatsanurwa kwemazwi kuve zvisina tsarukano uye nekudaro kunetsa kuverenga.

Kuputirwa kwemavara uye kufashukira

Peta zvinyorwa .text-wrapnekirasi.

Ichi chinyorwa chinofanira kuputira.

html

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

Dzivirira zvinyorwa kubva pakuputirwa .text-nowrapnekirasi.

Ichi chinyorwa chinofanira kufashukira mubereki.

html

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

Kutsemuka kweshoko

Dzivirira tambo refu dzemavara kubva pakupwanya marongerwo ezvikamu zvako nekushandisa .text-breakkuseta word-wrap: break-worduye word-break: break-word. Isu tinoshandisa word-wrappachinzvimbo cheyakajairika overflow-wrapkune yakafara bhurawuza rutsigiro, uye towedzera yakadzikiswa word-break: break-wordkudzivirira nyaya neflex containers.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Ziva kuti kududzira mazwi haagoneke muchiArabic , unova ndiwo mutauro unonyanya kushandiswa weRTL. Naizvozvo .text-breakinobviswa kubva kune yedu RTL yakaunganidzwa CSS.

Kushandura mavara

Shandura zvinyorwa muzvikamu zvine makirasi emavara makuru.

Mavara akaderedzwa.

Mavara makuru.

CapiTaliZed zvinyorwa.

html

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

Ziva kuti .text-capitalizeanoshandura sei vara rekutanga rezwi rega rega, achisiya nyaya yemamwe mavara asina kukanganiswa.

Saizi yefonti

Kurumidza chinja font-sizemavara. Nepo makirasi edu emusoro (semuenzaniso, .h1- .h6) shandisa font-size, font-weight, uye line-height, izvi zvinoshandiswa zvinongoshanda chetefont-size . Kukura kwezvishandiso izvi kunoenderana nemusoro weHTML zvinhu, saka sezvo nhamba inowedzera, saizi yavo inodzikira.

.fs-1 zvinyorwa

.fs-2 zvinyorwa

.fs-3 zvinyorwa

.fs-4 zvinyorwa

.fs-5 zvinyorwa

.fs-6 zvinyorwa

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>

Gadzirisa yako iripo font-sizenekugadzirisa $font-sizesmepu yeSass.

Uremu hwemafonti uye tits

Kurumidza shandura iyo font-weightkana font-styleyemavara nezvishandiso izvi. font-stylezvishandiso zvinopfupikiswa se .fst-*uye font-weightzvinoshandiswa zvinopfupikiswa se .fw-*.

Bold text.

Bolder uremu zvinyorwa (zvinoenderana nechinhu chemubereki).

Semibold huremu zvinyorwa.

Normal uremu chinyorwa.

Chiedza chinorema chinyorwa.

Huremu huremu zvinyorwa (zvinoenderana nechinhu chemubereki).

Runyoro rwakatsveyama.

Mavara ane zvakajairika font style

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>

Mutsara urefu

Shandura urefu hwemutsara .lh-*nezvinoshandiswa.

Iyi indima refu yakanyorwa kuratidza kuti mutsara-urefu hwechinhu chinokanganiswa sei nezvishandiso zvedu. Makirasi anoshandiswa kune chinhu pachacho kana dzimwe nguva chinhu chemubereki. Aya makirasi anogona kugadziridzwa sezvinodiwa nekushandisa kwedu API.

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>

Monospace

Chinja sarudzo kune yedu monospace font stack ne .font-monospace.

Izvi zviri mumonospace

html

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

Reset ruvara

Gadzirisa zvakare mavara kana ruvara rwelink ne .text-reset, kuti itore nhaka yeruvara kubva kumubereki wayo.

Mavara akadzimwa ane chinongedzo chekugadzirisa .

html

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

Kushongedza kwemavara

Shongedza zvinyorwa muzvikamu zvine makirasi ekushongedza zvinyorwa.

Ichi chinyorwa chine mutsetse pasi pacho.

Chinyorwa ichi chine mutsara unofamba nacho.

Iyi link ine mavara ayo ekushongedza abviswa

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

Variables

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

Maps

Font-saizi zvekushandisa zvinogadzirwa kubva pamepu iyi, pamwe chete neyedu zvekushandisa 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
);

Purogiramu inonzi Utilities

Mafonti uye mameseji ekushandisa anoziviswa mune yedu zvishandiso API mu scss/_utilities.scss. Dzidza mashandisiro ezvishandiso API.

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