Teksti

Dokumentacioni dhe shembuj për mjetet e zakonshme të tekstit për të kontrolluar shtrirjen, mbështjelljen, peshën dhe më shumë.

Në këtë faqe

Rreshtimi i tekstit

Rivendosni lehtësisht tekstin me komponentët me klasa të shtrirjes së tekstit. Për fillimin, fundin dhe shtrirjen në qendër, janë të disponueshme klasa të përgjegjshme që përdorin të njëjtat pika të gjerësisë së pamjes si sistemi i rrjetit.

Filloni tekstin e rreshtuar në të gjitha madhësitë e portave të pamjes.

Teksti i përafruar në qendër në të gjitha madhësitë e portave të pamjes.

Përfundoni tekstin e rreshtuar në të gjitha madhësitë e portave të pamjes.

Filloni tekstin e rreshtuar në portat e pamjes me madhësi SM (të vogla) ose më të gjera.

Filloni tekstin e rreshtuar në portat e pamjes me madhësi MD (mesatare) ose më të gjerë.

Filloni tekstin e rreshtuar në portat e shikimit me madhësi LG (të mëdha) ose më të gjera.

Filloni tekstin e rreshtuar në portat e pamjes me madhësi XL (ekstra të mëdha) ose më të gjerë.

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

Vini re se ne nuk ofrojmë klasa të shërbimeve për tekstin e justifikuar. Ndërsa, estetikisht, teksti i justifikuar mund të duket më tërheqës, ai e bën ndarjen e fjalëve më të rastësishme dhe për këtë arsye më të vështirë për t'u lexuar.

Mbështjellja dhe tejmbushja e tekstit

Mbështillni tekstin me një .text-wrapklasë.

Ky tekst duhet të përfundojë.

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

Parandaloni mbështjelljen e tekstit me një .text-nowrapklasë.

Ky tekst duhet të vërshojë prindin.

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

Thyerja e fjalëve

Parandaloni vargjet e gjata të tekstit nga prishja e paraqitjes së komponentëve tuaj duke përdorur .text-breakpër të vendosur word-wrap: break-worddhe word-break: break-word. Ne përdorim word-wrapnë vend të më të zakonshmeve overflow-wrappër mbështetje më të gjerë të shfletuesit dhe shtojmë të vjetruarat word-break: break-wordpër të shmangur problemet me kontejnerët flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Vini re se thyerja e fjalëve nuk është e mundur në arabisht , e cila është gjuha RTL më e përdorur. Prandaj .text-breakështë hequr nga CSS-ja jonë e përpiluar në RTL.

Transformimi i tekstit

Transformoni tekstin në komponentë me klasa të shkronjave të mëdha të tekstit.

Tekst me shkronja të vogla.

Teksti me shkronja të mëdha.

Teksti me shkronja kapitale.

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

Vini re se si .text-capitalizendryshon vetëm shkronjën e parë të secilës fjalë, duke lënë të paprekur rastin e shkronjave të tjera.

Përmasa e germave

Ndryshoni shpejt font-sizetekstin. Ndërsa klasat tona të titullit (p.sh., .h1– .h6) zbatohen font-size, font-weight, dhe line-height, këto shërbime zbatohen vetëmfont-size . Madhësia për këto shërbime përputhet me elementët e titullit të HTML, kështu që me rritjen e numrit, madhësia e tyre zvogëlohet.

.fs-1 tekst

.fs-2 tekst

.fs-3 tekst

.fs-4 tekst

.fs-5 tekst

.fs-6 tekst

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

Personalizoni pajisjet tuaja të disponueshme font-sizeduke modifikuar $font-sizeshartën Sass.

Pesha e shkronjave dhe shkronjat e pjerrëta

Ndryshoni shpejt font-weightose font-styletë tekstit me këto shërbime. font-styleUtilities janë shkurtuar si .fst-*dhe font-weightutilities janë shkurtuar si .fw-*.

Tekst i trashë.

Teksti me peshë më të theksuar (në lidhje me elementin mëmë).

Teksti me peshë normale.

Tekst me peshë të lehtë.

Tekst me peshë më të lehtë (në raport me elementin prind).

Teksti kursive.

Tekst me stil normal të fontit

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

Vija e gjatesise

Ndryshoni lartësinë e linjës me .lh-*shërbimet komunale.

Ky është një paragraf i gjatë i shkruar për të treguar sesi lartësia e vijës së një elementi ndikohet nga shërbimet tona. Klasat aplikohen në vetë elementin ose nganjëherë elementin prind. Këto klasa mund të personalizohen sipas nevojës me API-në tonë të shërbimeve.

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

Monohapësirë

Ndryshoni një përzgjedhje në grumbullin tonë të shkronjave monospace me .font-monospace.

Kjo është në monospace

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

Rivendos ngjyrën

Rivendosni ngjyrën e një teksti ose lidhjeje me .text-reset, në mënyrë që të trashëgojë ngjyrën nga prindi i tij.

Teksti i heshtur me një lidhje të rivendosur .

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

Dekorimi i tekstit

Zbukuroni tekstin në komponentë me klasat e dekorimit të tekstit.

Ky tekst ka një rresht poshtë tij.

Ky tekst ka një rresht që kalon nëpër të.

Kjo lidhje ka hequr dekorimin e tekstit

<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

Variablat

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

Hartat

Shërbimet e madhësisë së shkronjave krijohen nga kjo hartë, në kombinim me API-në e shërbimeve tona.

$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

Shërbimet e shkronjave dhe tekstit janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.

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