Teks

Dokumentasi lan conto kanggo keperluan teks umum kanggo ngontrol keselarasan, bungkus, bobot, lan liya-liyane.

Ing kaca iki

alignment teks

Gampang nyelarasake teks menyang komponen kanthi kelas keselarasan teks. Kanggo wiwitan, pungkasan, lan alignment tengah, kasedhiya kelas responsif sing nggunakake breakpoints jembaré viewport padha karo sistem kothak.

Mulai teks selaras ing kabeh ukuran viewport.

Teks selaras tengah ing kabeh ukuran viewport.

Pungkasi teks selaras ing kabeh ukuran viewport.

Miwiti teks selaras ing viewports ukuran SM (cilik) utawa luwih amba.

Miwiti teks selaras ing viewports ukuran MD (sedheng) utawa luwih amba.

Miwiti teks selaras ing viewport ukuran LG (gedhe) utawa luwih amba.

Miwiti teks selaras ing viewports ukuran XL (ekstra-gedhe) utawa luwih amba.

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>

Elinga yen kita ora nyedhiyakake kelas sarana kanggo teks sing dibenerake. Sanadyan, kanthi estetis, teks sing dibenerake bisa katon luwih nyenengake, nanging nggawe spasi tembung luwih acak lan mulane luwih angel diwaca.

Pambungkus teks lan kebanjiran

Bungkus teks karo .text-wrapkelas.

Teks iki kudu dibungkus.

html

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

Nyegah teks saka mbungkus karo .text-nowrapkelas.

Teks iki kudu ngluwihi wong tuwa.

html

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

Pecah tembung

Nyegah strings teks sing dawa supaya ora ngrusak tata letak komponen kanthi nggunakake .text-breaknyetel word-wrap: break-wordlan word-break: break-word. Kita nggunakake word-wraptinimbang sing luwih umum overflow-wrapkanggo dhukungan browser sing luwih akeh, lan nambah sing ora digunakake word-break: break-wordkanggo ngindhari masalah karo wadhah fleksibel.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Elinga yen ora bisa ngilangi tembung ing basa Arab , yaiku basa RTL sing paling akeh digunakake. Mulane .text-breakdibusak saka CSS kompilasi RTL kita.

Transformasi teks

Ngowahi teks dadi komponen kanthi kelas kapitalisasi teks.

Aksara cilik.

Tulisan gedhe.

Teks kapital.

html

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

Elinga carane .text-capitalizemung ngganti huruf pisanan saben tembung, ninggalake cilik huruf liyane ora kena pengaruh.

Gedene tulisan

Ganti font-sizeteks kanthi cepet. Nalika kelas judhul kita (contone, .h1– .h6) ditrapake font-size, font-weight, lan line-height, utilitas iki mung ditrapake font-size. Ukuran kanggo utilitas iki cocog karo unsur judhul HTML, dadi yen jumlahe mundhak, ukurane bakal suda.

.fs-1 teks

.fs-2 teks

.fs-3 teks

.fs-4 teks

.fs-5 teks

.fs-6 teks

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>

Ngatur font-sizes kasedhiya dening ngowahi $font-sizespeta Sass.

Bobot huruf lan miring

Ganti teks font-weightutawa font-styleteks kanthi cepet nganggo utilitas kasebut. font-styleutilitas dicekak .fst-*lan font-weightutilitas disingkat .fw-*.

Teks kandel.

Teks bobot luwih kandel (relatif karo unsur induk).

Teks bobot semibold.

Teks bobot normal.

Teks entheng.

Teks bobot entheng (relatif karo unsur induk).

Teks miring.

Teks nganggo gaya font normal

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>

Dhuwur garis

Ngganti dhuwur baris karo .lh-*keperluan.

Iki minangka paragraf dawa sing ditulis kanggo nuduhake carane dhuwur garis saka unsur dipengaruhi dening keperluan kita. Kelas ditrapake kanggo unsur kasebut dhewe utawa kadhangkala unsur induk. Kelas kasebut bisa disesuaikan kaya sing dibutuhake karo API utilitas.

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

Ganti pilihan menyang tumpukan font monospace kita nganggo .font-monospace.

Iki ing monospace

html

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

Reset werna

Reset warna teks utawa link nganggo .text-reset, supaya warna kasebut diwenehi warisan saka wong tuwa.

Teks bisu kanthi link reset .

html

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

Dekorasi teks

Dekorasi teks ing komponen kanthi kelas dekorasi teks.

Teks iki ana garis ing ngisore.

Teks iki nduweni garis sing ngliwati.

Link iki wis dibusak dekorasi teks

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

Variabel

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

Peta

Utilitas ukuran font digawe saka peta iki, kanthi kombinasi karo API utilitas.

$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

Utilitas font lan teks diumumake ing API utilitas ing scss/_utilities.scss. Sinau carane nggunakake API keperluan.

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