Text

Dokumentasyon ug mga pananglitan alang sa komon nga mga gamit sa teksto aron makontrol ang paglinya, pagputos, gibug-aton, ug uban pa.

Niini nga panid

Pag-align sa teksto

Dali nga i-realign ang teksto sa mga sangkap nga adunay mga klase sa pag-align sa teksto. Alang sa pagsugod, pagtapos, ug pag-align sa sentro, magamit ang mga responsive nga klase nga naggamit sa parehas nga mga breakpoint sa gilapdon sa viewport sama sa sistema sa grid.

Sugdi ang aligned text sa tanang viewport sizes.

Gi-align sa tunga nga teksto sa tanang gidak-on sa viewport.

Tapuson ang aligned nga teksto sa tanang gidak-on sa viewport.

Sugdi ang aligned text sa viewports sized SM (gamay) o mas lapad.

Sugdi ang aligned text sa viewports sized MD (medium) o mas lapad pa.

Sugdi ang aligned text sa viewports sized LG (dako) o mas lapad.

Sugdi ang aligned text sa viewports sized XL (extra-large) o mas lapad pa.

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

Timan-i nga wala kami maghatag mga klase sa utility para sa makatarunganon nga teksto. Samtang, sa aesthetically, gipakamatarong nga teksto mahimong mas madanihon tan-awon, kini naghimo sa mga pulong nga gilay-on nga mas random ug busa mas lisud basahon.

Pagputos ug pag-awas sa teksto

I-wrap ang teksto sa usa ka .text-wrapklase.

Kini nga teksto kinahanglan nga iputos.

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

Pugngi ang teksto gikan sa pagputos sa usa ka .text-nowrapklase.

Kini nga teksto kinahanglan nga moawas sa ginikanan.

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

Pagputol sa pulong

Pugngi ang tag-as nga mga kuwerdas sa teksto gikan sa pagguba sa layout sa imong mga sangkap pinaagi sa paggamit .text-breaksa set word-wrap: break-wordug word-break: break-word. Gigamit namo word-wrapimbes ang mas komon overflow-wrapalang sa mas lapad nga suporta sa browser, ug gidugang ang wala na gigamit word-break: break-wordaron malikayan ang mga isyu sa mga flex container.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Timan-i nga ang pagbungkag sa mga pulong dili mahimo sa Arabic , nga mao ang labing gigamit nga RTL nga pinulongan. Busa .text-breakgikuha gikan sa among RTL compiled CSS.

Pagbag-o sa teksto

Pagbag-o sa teksto sa mga sangkap nga adunay mga klase sa pag-capital sa teksto.

Gigamay nga teksto.

Uppercase nga teksto.

CapiTaliZed nga teksto.

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

Matikdi kung giunsa .text-capitalizepag-usab ang una nga letra sa matag pulong, nga dili maapektuhan ang kaso sa bisan unsang ubang mga letra.

Gidak-on sa font

Pag-ilis dayon font-sizesa teksto. Samtang ang among mga klase sa ulohan (pananglitan, .h1– .h6) magamit font-size, font-weight, ug line-height, kini nga mga gamit magamit rafont-size . Ang pagsukod alang niini nga mga utilities motakdo sa mga elemento sa ulohan sa HTML, mao nga samtang modaghan ang gidaghanon, mogamay ang ilang gidak-on.

.fs-1 nga teksto

.fs-2 nga teksto

.fs-3 nga teksto

.fs-4 nga teksto

.fs-5 nga teksto

.fs-6 nga teksto

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

Ipasibo ang imong magamit nga font-sizemga s pinaagi sa pag-usab sa $font-sizesmapa sa Sass.

Ang gibug-aton sa font ug italiko

Dali nga usba ang font-weighto font-stylesa teksto gamit kini nga mga gamit. font-styleAng mga utilities gipamubo ingon .fst-*ug font-weightang mga utilities gipamubo nga .fw-*.

Bold nga text.

Mas maisogon nga gibug-aton nga teksto (may kalabotan sa elemento sa ginikanan).

Normal nga gibug-aton nga teksto.

Gaan ang gibug-aton nga teksto.

Mas gaan nga gibug-aton nga teksto (may kalabotan sa elemento sa ginikanan).

Italic nga teksto.

Teksto nga adunay normal nga istilo sa font

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

Taas nga linya

Usba ang gitas-on sa linya gamit ang mga .lh-*utilities.

Kini usa ka taas nga paragraph nga gisulat aron ipakita kung giunsa ang linya sa gitas-on sa usa ka elemento naapektuhan sa among mga utilities. Ang mga klase gipadapat sa elemento mismo o usahay ang ginikanan nga elemento. Kini nga mga klase mahimong ipasibo kung gikinahanglan sa among utility API.

<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

Usba ang usa ka pagpili sa among monospace font stack gamit ang .font-monospace.

Kini anaa sa monospace

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

I-reset ang kolor

I-reset ang usa ka teksto o kolor sa link gamit ang .text-reset, aron kini makapanunod sa kolor gikan sa ginikanan niini.

Gipahilom nga teksto nga adunay link sa pag-reset .

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

Dekorasyon sa teksto

Dekorasyunan ang teksto sa mga sangkap nga adunay mga klase sa dekorasyon sa teksto.

Kini nga teksto adunay linya sa ilawom niini.

Kini nga teksto adunay linya nga moagi niini.

Kini nga link gitangtang ang dekorasyon sa teksto

<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

Mga variable

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

Mga mapa

Ang mga gamit sa gidak-on sa font namugna gikan niini nga mapa, inubanan sa among mga utilities 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

Ang font ug text utilities gideklarar sa among utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga utilities 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
    ),