Teksts
Dokumentācija un piemēri parastajām teksta utilītprogrammām, lai kontrolētu līdzināšanu, ietīšanu, svaru un daudz ko citu.
Teksta izlīdzināšana
Viegli pielāgojiet tekstu komponentiem, izmantojot teksta līdzināšanas klases. Sākuma, beigu un centra līdzināšanai ir pieejamas atsaucīgas klases, kurās tiek izmantoti tie paši skata loga platuma pārtraukuma punkti kā režģa sistēmai.
Sāciet līdzināto tekstu visos skata loga izmēros.
Centrā līdzinātais teksts visos skata loga izmēros.
Beigt līdzināto tekstu visos skata loga izmēros.
Sāciet līdzināto tekstu skata logos, kuru izmērs ir SM (mazs) vai plašāks.
Sāciet līdzināto tekstu skata logos, kuru izmērs ir MD (vidējs) vai plašāks.
Sāciet līdzināto tekstu skata logos, kuru izmērs ir LG (liels) vai plašāks.
Sāciet līdzināto tekstu skata logos, kuru izmērs ir XL (īpaši liels) vai plašāks.
<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>
Teksta aplaušana un pārpilde
Aplauziet tekstu ar .text-wrap
klasi.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Novērst teksta aplauzšanu ar .text-nowrap
klasi.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Vārdu pārtraukums
Neļaujiet garām teksta virknēm sabojāt jūsu komponentu izkārtojumu, izmantojot .text-break
iestatījumus word-wrap: break-word
un word-break: break-word
. Plašākam pārlūkprogrammas atbalstam mēs izmantojam word-wrap
biežāk sastopamo overflow-wrap
, un pievienojam novecojušo word-break: break-word
, lai izvairītos no problēmām ar elastīgiem konteineriem.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
tiek noņemts no mūsu RTL apkopotā CSS.
Teksta pārveidošana
Pārveidojiet tekstu komponentos ar teksta lielo burtu lietojuma klasēm.
Teksts ar mazajiem burtiem.
Teksts ar lielajiem burtiem.
Lielajiem burtiem rakstīts teksts.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Ņemiet vērā, kā .text-capitalize
tiek mainīts tikai katra vārda pirmais burts, neietekmējot pārējo burtu reģistru.
Fonta izmērs
Ātri mainiet font-size
tekstu. Lai gan mūsu virsrakstu klases (piem., .h1
– .h6
) attiecas uz font-size
, font-weight
un line-height
, šīs utilītas attiecas tikai uz font-size
. Šo utilītu lielums atbilst HTML virsraksta elementiem, tāpēc, palielinoties skaitam, to lielums samazinās.
.fs-1 teksts
.fs-2 teksts
.fs-3 teksts
.fs-4 teksts
.fs-5 teksts
.fs-6 teksts
<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>
Pielāgojiet pieejamos font-size
s, modificējot $font-sizes
Sass karti.
Fonta svars un slīpraksts
Ātri mainiet tekstu font-weight
vai font-style
, izmantojot šīs utilītas. font-style
utilities tiek saīsināti kā .fst-*
un font-weight
utilities tiek saīsināti kā .fw-*
.
Treknrakstā teksts.
Treknāks teksta svars (attiecībā pret vecākelementu).
Parasta svara teksts.
Viegls teksts.
Vieglāks teksts (attiecībā pret vecākelementu).
Teksts slīprakstā.
Teksts ar parastu fonta stilu
<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>
Līnijas augstums
Mainiet līnijas augstumu ar .lh-*
utilītprogrammām.
Šī ir gara rindkopa, kas uzrakstīta, lai parādītu, kā elementa līnijas augstumu ietekmē mūsu utilītas. Klases tiek piemērotas pašam elementam vai dažreiz vecākajam elementam. Šīs klases var pielāgot pēc vajadzības, izmantojot mūsu utilīta API.
Šī ir gara rindkopa, kas uzrakstīta, lai parādītu, kā elementa līnijas augstumu ietekmē mūsu utilītas. Klases tiek piemērotas pašam elementam vai dažreiz vecākajam elementam. Šīs klases var pielāgot pēc vajadzības, izmantojot mūsu utilīta API.
Šī ir gara rindkopa, kas uzrakstīta, lai parādītu, kā elementa līnijas augstumu ietekmē mūsu utilītas. Klases tiek piemērotas pašam elementam vai dažreiz vecākajam elementam. Šīs klases var pielāgot pēc vajadzības, izmantojot mūsu utilīta API.
Šī ir gara rindkopa, kas uzrakstīta, lai parādītu, kā elementa līnijas augstumu ietekmē mūsu utilītas. Klases tiek piemērotas pašam elementam vai dažreiz vecākajam elementam. Šīs klases var pielāgot pēc vajadzības, izmantojot mūsu utilīta 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>
Monotelpa
Mainiet atlasi uz mūsu monospace fontu kopu ar .font-monospace
.
Tas ir monotelpā
<p class="font-monospace">This is in monospace</p>
Atiestatīt krāsu
Atiestatiet teksta vai saites krāsu, izmantojot .text-reset
, lai tā mantotu krāsu no sava vecāka.
Izslēgts teksts ar atiestatīšanas saiti .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Teksta dekorēšana
Izrotāt tekstu komponentos ar teksta dekorēšanas klasēm.
<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
Mainīgie lielumi
// 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;
Kartes
Fonta lieluma utilītas tiek ģenerētas no šīs kartes kopā ar mūsu utilītu 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
Fontu un teksta utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss
. Uzziniet, kā izmantot utilītu 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
),