Ntawv nyeem

Cov ntaub ntawv thiab cov piv txwv rau cov ntawv nyeem siv los tswj kev sib dhos, qhwv, qhov hnyav, thiab lwm yam.

Ntawm nplooj ntawv no

Cov ntawv nyeem alignment

Yooj yim realign cov ntawv rau cov khoom nrog cov chav kawm ntawv nyeem. Rau qhov pib, qhov kawg, thiab qhov chaw nyob nruab nrab, cov chav kawm teb muaj nyob uas siv tib qhov kev pom dav dav qhov sib cais raws li kab sib chaws.

Pib dlhos cov ntawv ntawm txhua qhov loj ntawm qhov chaw saib.

Muab cov ntawv sib dhos hauv nruab nrab ntawm txhua qhov loj ntawm qhov chaw saib.

Xaus cov ntawv sib dhos ntawm txhua qhov loj ntawm qhov chaw saib.

Pib dlhos cov ntawv ntawm viewports loj SM (me) los yog dav dua.

Pib cov ntawv nyeem nyob rau ntawm qhov chaw saib qhov loj MD (nruab nrab) lossis dav dua.

Pib dlhos cov ntawv ntawm viewports loj LG (loj) los yog wider.

Pib ua raws cov ntawv nyeem ntawm qhov chaw saib qhov loj XL (ntxiv-loj) lossis dav dua.

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>

Nco ntsoov tias peb tsis muab cov chav kawm siv hluav taws xob rau cov ntawv nyeem ncaj ncees. Thaum, zoo nkauj, cov ntawv nyeem tau zoo yuav zoo li ntxim nyiam dua, nws ua rau cov lus sib nrug ntau dua thiab yog li nyuaj nyeem.

Text wrapping thiab overflow

Qhwv ntawv nrog ib .text-wrapchav kawm.

Cov ntawv no yuav tsum qhwv.

html

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

Tiv thaiv cov ntawv los ntawm kev qhwv nrog ib .text-nowrapchav kawm.

Cov ntawv no yuav tsum dhau tus niam txiv.

html

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

Lo lus tawg

Tiv thaiv cov hlua ntev ntawm cov ntawv los ntawm kev tawg koj cov khoom 'layout los ntawm kev siv .text-breaklos teeb tsa word-wrap: break-wordthiab word-break: break-word. Peb siv word-wrapes tsis txhob siv ntau dua overflow-wraprau kev txhawb nqa dav dav ntawm browser, thiab ntxiv qhov tsis word-break: break-wordtxaus siab kom tsis txhob muaj teeb meem nrog flex ntim.

hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Nco ntsoov tias cov lus tawg tsis tuaj yeem ua tau hauv Arabic , uas yog cov lus siv RTL tshaj plaws. Yog li ntawd .text-breakraug tshem tawm ntawm peb RTL suav nrog CSS.

Cov ntawv hloov pauv

Hloov cov ntawv hauv cov khoom nrog cov chav kawm ntawv sau ntawv.

Cov ntawv qis.

Cov ntawv sau dua.

CapiTaliZed ntawv nyeem.

html

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

Nco ntsoov yuav ua li cas .text-capitalizetsuas yog hloov thawj tsab ntawv ntawm txhua lo lus, tawm hauv rooj plaub ntawm lwm cov ntawv tsis cuam tshuam.

Font loj

Hloov cov font-sizentawv sai sai. Thaum peb cov chav kawm (piv txwv li, .h1– .h6) siv font-size, font-weight, thiab line-height, cov khoom siv hluav taws xob no tsuas siv tau font-size. Sizing rau cov khoom siv hluav taws xob no sib phim HTML cov ntsiab lus, yog li tus lej nce, lawv qhov loj me me.

.fs-1 lus

.fs-2 lus

.fs-3 lus

.fs-4 lus

.fs-5 lus

.fs-6 lus

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 koj muaj font-sizes los ntawm kev hloov kho $font-sizesSass daim ntawv qhia.

Font hnyav thiab italics

Hloov cov ntawv font-weightlossis font-stylecov ntawv sai sai nrog cov khoom siv no. font-styleutilities yog abbreviated li .fst-*thiab font-weightutilities yog abbreviated li .fw-*.

Cov ntawv loj.

Bolder hnyav ntawv (xws li niam txiv lub ntsiab).

Semiold phau ntawv hnyav.

Cov ntawv hnyav li qub.

Lub teeb nyhav ntawv.

Cov ntawv hnyav dua (xws li niam txiv lub ntsiab).

Italic ntawv nyeem.

Cov ntawv nrog ib txwm 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>

Kab qhov siab

Hloov kab qhov siab nrog .lh-*cov khoom siv hluav taws xob.

Qhov no yog ib nqe lus ntev sau los qhia tias kab-qhov siab ntawm ib lub ntsiab yog cuam tshuam los ntawm peb cov khoom siv. Cov chav kawm yog siv rau lub caij nws tus kheej lossis qee zaum niam txiv lub caij. Cov chav kawm no tuaj yeem hloov kho raws li xav tau nrog peb cov khoom siv 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

Hloov ib qho kev xaiv rau peb monospace font pawg nrog .font-monospace.

Qhov no yog nyob rau hauv monospace

html

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

Rov pib xim

Pib dua cov ntawv nyeem lossis txuas cov xim nrog .text-reset, kom nws tau txais cov xim los ntawm nws niam nws txiv.

Muted ntawv nrog ib tug reset link .

html

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

Cov ntawv kho kom zoo nkauj

Kho cov ntawv hauv cov khoom nrog cov chav kawm kho kom zoo nkauj.

Cov ntawv no muaj ib kab hauv qab nws.

Cov ntawv no muaj ib kab mus hla nws.

Qhov txuas no muaj nws cov ntawv kho kom zoo nkauj tshem tawm

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

Hloov pauv

// 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-loj siv hluav taws xob yog tsim los ntawm daim ntawv qhia no, ua ke nrog peb cov khoom siv 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

Cov ntawv siv font thiab ntawv tau tshaj tawm hauv peb cov khoom siv API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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