Ọrọ

Iwe ati awọn apẹẹrẹ fun awọn ohun elo ọrọ ti o wọpọ lati ṣakoso titete, murasilẹ, iwuwo, ati diẹ sii.

Lori iwe yi

Titete ọrọ

Ni irọrun ṣe atunṣe ọrọ si awọn paati pẹlu awọn kilasi titete ọrọ. Fun ibẹrẹ, ipari, ati titete aarin, awọn kilasi idahun wa ti o lo awọn aaye fifọ iwọn wiwo kanna gẹgẹbi eto akoj.

Bẹrẹ ọrọ ti o ni ibamu lori gbogbo awọn titobi wiwo.

Ọrọ ti o ni ibamu laarin gbogbo awọn titobi wiwo.

Pari ọrọ titọ lori gbogbo awọn iwọn wiwo wiwo.

Bẹrẹ ọrọ titọ lori awọn ibudo wiwo ti o ni iwọn SM (kekere) tabi gbooro.

Bẹrẹ ọrọ titọ lori awọn ibudo wiwo ti iwọn MD (alabọde) tabi gbooro.

Bẹrẹ ọrọ titọ lori awọn ibudo wiwo ti o ni iwọn LG (tobi) tabi gbooro.

Bẹrẹ ọrọ titọ lori awọn ibudo wiwo ti o ni iwọn XL (afikun-tobi) tabi gbooro.

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>

Ṣe akiyesi pe a ko pese awọn kilasi iwulo fun ọrọ idalare. Lakoko, ni ẹwa, ọrọ idalare le dabi iwunilori diẹ sii, o jẹ ki aye-ọrọ jẹ laileto diẹ sii ati nitorinaa o nira lati ka.

Ọrọ murasilẹ ati aponsedanu

Fi ipari si ọrọ pẹlu .text-wrapkilasi kan.

Ọrọ yii yẹ ki o fi ipari si.

html

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

Dena ọrọ lati murasilẹ pẹlu .text-nowrapkilasi kan.

Ọrọ yii yẹ ki o kún fun obi.

html

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

Bireki ọrọ

Ṣe idilọwọ awọn gbolohun ọrọ gigun lati fifọ ifilelẹ awọn paati rẹ nipa lilo .text-breaklati ṣeto word-wrap: break-wordati word-break: break-word. A lo word-wrapdipo ti o wọpọ julọ overflow-wrapfun atilẹyin aṣawakiri ti o gbooro, ati ṣafikun ohun ti a ti sọ silẹ word-break: break-wordlati yago fun awọn ọran pẹlu awọn apoti fifọ.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Ṣe akiyesi pe fifọ awọn ọrọ ko ṣee ṣe ni Arabic , eyiti o jẹ ede RTL ti a lo julọ. Nitorina .text-breaka yọkuro lati inu RTL wa CSS.

Ọrọ iyipada

Yi ọrọ pada ni awọn paati pẹlu awọn kilasi titobi ọrọ.

Ọrọ isale.

Ọrọ ti o ni oke.

CapiTaliZed ọrọ.

html

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

Ṣe akiyesi bi .text-capitalizeo ṣe yipada lẹta akọkọ ti ọrọ kọọkan, nlọ ọran ti eyikeyi awọn lẹta miiran ti ko ni ipa.

Iwọn fonti

Ni kiakia yi font-sizeọrọ pada. Lakoko ti awọn kilasi akọle wa (fun apẹẹrẹ, .h1– .h6) lo font-size, font-weight, ati line-height, awọn ohun elo wọnyi lo nikanfont-size . Iwọn fun awọn ohun elo wọnyi baamu awọn eroja akọle HTML, nitorinaa bi nọmba naa ṣe n pọ si, iwọn wọn dinku.

.fs-1 ọrọ

.fs-2 ọrọ

.fs-3 ọrọ

.fs-4 ọrọ

.fs-5 ọrọ

.fs-6 ọrọ

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>

Ṣe akanṣe awọn font-sizes ti o wa nipa iyipada $font-sizesmaapu Sass.

Font àdánù ati italics

Yipada font-weighttabi font-styleti ọrọ ni kiakia pẹlu awọn ohun elo wọnyi. font-styleAwọn ohun elo ti wa ni abbreviated bi .fst-*ati font-weightawọn ohun elo ti wa ni abbreviated bi .fw-*.

Ọrọ ti o ni igboya.

Ọrọ iwuwo bolder (ojulumo si ano obi).

Semibold àdánù ọrọ.

Ọrọ iwuwo deede.

Ọrọ iwuwo ina.

Fẹẹrẹfẹ ọrọ ọrọ (ojulumo si awọn obi ano).

Ọrọ italic.

Ọrọ pẹlu deede font ara

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>

Giga ila

Yi iga ila pada pẹlu .lh-*awọn ohun elo.

Eyi jẹ paragirafi gigun ti a kọ lati ṣafihan bi ila-giga ti ohun elo ṣe ni ipa nipasẹ awọn ohun elo wa. Awọn kilasi ti wa ni loo si awọn ano ara tabi ma awọn obi ano. Awọn kilasi wọnyi le jẹ adani bi o ṣe nilo pẹlu API IwUlO wa.

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

Yi yiyan pada si akopọ fonti monospace wa pẹlu .font-monospace.

Eyi wa ni monospace

html

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

Tun awọ

Ṣe atunto ọrọ tabi awọ ọna asopọ pẹlu .text-reset, ki o le jogun awọ lati ọdọ obi rẹ.

Ọrọ ti o dakẹ pẹlu ọna asopọ atunto .

html

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

Ọṣọ ọrọ

Ṣe ọṣọ ọrọ ni awọn paati pẹlu awọn kilasi ohun ọṣọ ọrọ.

Ọrọ yii ni laini labẹ rẹ.

Ọrọ yii ni laini ti n lọ nipasẹ rẹ.

Ọna asopọ yii ti yọ ohun ọṣọ ọrọ rẹ kuro

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

Awọn oniyipada

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

Awọn maapu

Awọn ohun elo ti iwọn Font jẹ ipilẹṣẹ lati maapu yii, ni apapọ pẹlu API awọn ohun elo wa.

$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 Awọn ohun elo

Font ati awọn ohun elo ọrọ jẹ ikede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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