Teacs

Sgrìobhainnean agus eisimpleirean airson goireasan teacsa cumanta gus smachd a chumail air co-thaobhadh, pasgadh, cuideam, agus barrachd.

Air an duilleig seo

Co-thaobhadh teacsa

Atharraich teacsa gu co-phàirtean gu furasta le clasaichean co-thaobhadh teacsa. Airson toiseach, deireadh, agus co-thaobhadh sa mheadhan, tha clasaichean freagairteach rim faighinn a bhios a’ cleachdadh na h-aon phuingean leudachaidh sealladh ri siostam a’ ghriod.

Tòisich teacsa co-thaobhadh air gach meud sealladh-seallaidh.

Teacs co-thaobhadh sa mheadhan air gach meud sealladh-seallaidh.

Cuir crìoch air teacsa co-thaobhadh air gach meud sealladh-seallaidh.

Tòisich teacsa co-thaobhadh air seallaidhean meud SM (beag) no nas fharsainge.

Tòisich teacsa co-thaobhadh air seallaidhean meud MD (meadhanach) no nas fharsainge.

Tòisich teacsa co-thaobhadh air seallaidhean meud LG (mòr) no nas fharsainge.

Tòisich teacsa co-thaobhadh air seallaidhean meud XL (barrach mòr) no nas fharsainge.

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>

Thoir an aire nach bi sinn a’ toirt seachad clasaichean goireis airson teacsa a tha air fhìreanachadh. Ged a dh’ fhaodadh, a thaobh bòidhchead, teacsa le fìreanachadh a bhith a’ coimhead nas tarraingiche, bidh e a’ fàgail farsaingeachd fhaclan nas tuairmeasaiche agus mar sin nas duilghe a leughadh.

Còmhdach teacsa agus thar-shruth

Paisg an teacsa le .text-wrapclas.

Bu chòir an teacsa seo a bhith air a chòmhdach.

html

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

Cuir casg air teacsa bho bhith a’ pacadh le .text-nowrapclas.

Bu chòir don teacsa seo a dhol thairis air a’ phàrant.

html

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

Briseadh fhaclan

Cuir casg air sreathan fada de theacsa bho bhith a’ briseadh cruth do phàirtean le bhith a’ cleachdadh .text-breakgu seata word-wrap: break-wordagus word-break: break-word. Bidh sinn a’ cleachdadh word-wrapan àite an fheadhainn as cumanta overflow-wrapairson taic brobhsair nas fharsainge, agus cuiridh sinn ris an fheadhainn nach deach a mholadh word-break: break-wordgus cùisean le soithichean sùbailte a sheachnadh.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Thoir an aire nach eil briseadh fhaclan comasach ann an Arabais , is e sin an cànan RTL as motha a chleachdar. Mar sin .text-breaktha e air a thoirt air falbh bhon CSS againn a chuir RTL ri chèile.

Tionndadh teacsa

Atharraich teacsa gu co-phàirtean le clasaichean calpachadh teacsa.

Teacs le litrichean beaga.

Teacs le mullach àrd.

Teacs CapiTaliZed.

html

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

Thoir an aire .text-capitalizenach atharraich ach a’ chiad litir de gach facal, a’ fàgail cùis litrichean sam bith eile gun bhuaidh.

Meud cruth-clò

Atharraich an font-sizeteacsa gu sgiobalta. Fhad ‘s a tha na clasaichean cinn againn (me, .h1- .h6) a’ buntainn font-size, font-weight, agus line-height, chan eil na goireasan sin a’ buntainn achfont-size ri . Bidh meud nan goireasan sin a’ maidseadh eileamaidean cinn HTML, gus mar a bhios an àireamh a’ dol am meud, bidh am meud a’ dol sìos.

.fs-1 teacs

.fs-2 teacs

.fs-3 teacs

.fs-4 teacs

.fs-5 teacs

.fs-6 teacs

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>

Gnàthaich na tha ri fhaighinn font-sizele bhith ag atharrachadh $font-sizesmapa Sass.

Cuideam cruth-clò agus clò eadailteach

Atharraich gu sgiobalta an teacsa font-weightno font-stylean teacsa leis na goireasan sin. font-styletha goireasan air an giorrachadh mar .fst-*agus font-weighttha goireasan air an giorrachadh mar .fw-*.

Teacs trom.

Teacs cuideam nas truime (an coimeas ris an eileamaid phàrant).

Teacsa cuideam semibold.

Teacsa cuideam àbhaisteach.

Teacsa cuideam aotrom.

Teacs cuideam nas aotroime (an coimeas ris an eileamaid phàrant).

Teacs eadailteach.

Teacs le stoidhle cruth-clò àbhaisteach

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>

Àirde na loidhne

Atharraich àirde na loidhne le .lh-*goireasan.

Is e seo paragraf fada a chaidh a sgrìobhadh gus sealltainn mar a tha na goireasan againn a’ toirt buaidh air àirde loidhne eileamaid. Tha clasaichean air an cur an sàs anns an eileamaid fhèin no uaireannan am pàrant eileamaid. Faodar na clasaichean sin a ghnàthachadh mar a dh’ fheumar leis an API goireasach againn.

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

Atharraich taghadh don chruach clò monospace againn le .font-monospace.

Tha seo ann am monospace

html

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

Ath-shuidhich dath

Ath-shuidhich dath teacsa no ceangail le .text-reset, gus am faigh e an dath bho a phàrant.

Teacs sàmhach le ceangal ath-shuidheachadh .

html

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

Sgeadachadh teacsa

Dèan sgeadachadh air teacsa ann am pàirtean le clasaichean sgeadachaidh teacsa.

Tha loidhne fon teacsa seo.

Tha loidhne aig an teacsa seo a’ dol troimhe.

Thug an ceangal seo a sgeadachadh teacsa air falbh

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

Caochlaidhean

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

Mapaichean

Bithear a’ gineadh goireasan meud cruth-clò bhon mhapa seo, an co-bhonn ris na goireasan API againn.

$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

Tha goireasan cruth-clò is teacsa air an ainmeachadh anns na goireasan API againn ann an scss/_utilities.scss. Ionnsaich mar a chleachdas tu an API Utilities.

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