Teacs
Sgrìobhainnean agus eisimpleirean airson goireasan teacsa cumanta gus smachd a chumail air co-thaobhadh, pasgadh, cuideam, agus barrachd.
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.
<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>
Còmhdach teacsa agus thar-shruth
Paisg an teacsa le .text-wrap
clas.
<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-nowrap
clas.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Briseadh fhaclan
Cuir casg air sreathan fada de theacsa bho bhith a’ briseadh cruth na co-phàirtean agad le bhith a’ cleachdadh .text-break
gu seata word-wrap: break-word
agus word-break: break-word
. Bidh sinn a’ cleachdadh word-wrap
an àite an fheadhainn as cumanta overflow-wrap
airson taic brobhsair nas fharsainge, agus cuiridh sinn ris an fheadhainn nach deach a mholadh word-break: break-word
gus cùisean le soithichean sùbailte a sheachnadh.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
tha 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.
<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-capitalize
nach 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-size
teacsa 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
<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>
Dèan gnàthachadh air na tha ri fhaighinn font-size
le bhith ag atharrachadh $font-sizes
mapa Sass.
Cuideam cruth-clò agus clò eadailteach
Atharraich gu sgiobalta an teacsa font-weight
no font-style
an teacsa leis na goireasan sin. font-style
tha goireasan air an giorrachadh mar .fst-*
agus font-weight
tha goireasan air an giorrachadh mar .fw-*
.
Teacs trom.
Teacs cuideam nas truime (an coimeas ris an eileamaid phàrant).
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
<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>
À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.
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.
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.
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.
<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
<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 .
<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<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", 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;
Mapaichean
Tha goireasan meud cruth-clò air an gineadh 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(--#{$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
),