Tekstas
Įprastų teksto paslaugų, skirtų lygiavimui, vyniojimui, svoriui ir kt. valdyti, dokumentacija ir pavyzdžiai.
Teksto lygiavimas
Lengvai suderinkite tekstą su komponentais naudodami teksto lygiavimo klases. Norint išlygiuoti pradžią, pabaigą ir vidurį, galimos reaguojančios klasės, kuriose naudojami tie patys peržiūros srities pločio taškai, kaip ir tinklelio sistemoje.
Pradėti sulygiuotą tekstą visų dydžių peržiūros srityje.
Visų dydžių peržiūros srities tekstas sulygiuotas centre.
Užbaikite sulygiuotą tekstą visų dydžių peržiūros srityje.
Pradėkite lygiuotą tekstą peržiūros langeliuose, kurių dydis yra SM (mažas) arba didesnis.
Išlygiuotą tekstą pradėkite MD (vidutinio) arba platesnėse peržiūros srityse.
Pradėkite lygiuotą tekstą LG (didelės) arba platesnėse peržiūros srityse.
Išlygiuotą tekstą pradėkite XL (ypač didelės) arba platesnėse peržiūros srityse.
<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>
Teksto vyniojimas ir perpildymas
Apvyniokite tekstą .text-wrap
klase.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Neleiskite tekstui įvynioti naudojant .text-nowrap
klasę.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Žodžių pertrauka
Neleiskite ilgoms teksto eilutėms pažeisti jūsų komponentų išdėstymą, naudodami .text-break
nustatymą word-wrap: break-word
ir word-break: break-word
. Naudojame word-wrap
vietoj įprastesnio, overflow-wrap
kad palaikytume naršyklę, ir pridedame nebenaudojamą word-break: break-word
, kad išvengtume problemų su lanksčiais konteineriais.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
yra pašalintas iš mūsų RTL sudaryto CSS.
Teksto transformacija
Transformuokite tekstą į komponentus naudodami didžiųjų raidžių rašymo klases.
Tekstas mažosiomis raidėmis.
Tekstas didžiosiomis raidėmis.
Didžiosiomis raidėmis rašomas tekstas.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Atkreipkite dėmesį, kaip .text-capitalize
pakeičiama tik pirmoji kiekvieno žodžio raidė, o kitų raidžių didžiosios ir mažosios raidės nepaveikiamos.
Šrifto dydis
Greitai pakeiskite font-size
tekstą. Nors mūsų antraštės klasės (pvz., .h1
– .h6
) taikomos font-size
, font-weight
, ir line-height
, šios paslaugos taikomos tikfont-size
. Šių paslaugų dydis atitinka HTML antraštės elementus, todėl skaičiui didėjant, jų dydis mažėja.
.fs-1 tekstas
.fs-2 tekstas
.fs-3 tekstas
.fs-4 tekstas
.fs-5 tekstas
.fs-6 tekstas
<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>
Tinkinkite turimus font-size
s modifikuodami $font-sizes
Sass žemėlapį.
Šrifto svoris ir kursyvas
Greitai pakeiskite font-weight
arba font-style
tekstą naudodami šias priemones. font-style
komunalinės paslaugos trumpinamos kaip, .fst-*
o font-weight
komunalinės paslaugos – kaip .fw-*
.
Paryškintas tekstas.
Paryškintas tekstas (palyginti su pirminiu elementu).
Normalaus svorio tekstas.
Lengvas tekstas.
Lengvesnis tekstas (palyginti su pirminiu elementu).
Kursyvas tekstas.
Tekstas įprastu šrifto stiliumi
<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>
Linijos aukštis
Pakeiskite linijos aukštį naudodami .lh-*
komunalines paslaugas.
Tai ilga pastraipa, skirta parodyti, kaip elemento linijos aukštį veikia mūsų komunalinės paslaugos. Klasės taikomos pačiam elementui arba kartais pirminiam elementui. Šias klases galima pritaikyti pagal poreikį naudojant mūsų paslaugų API.
Tai ilga pastraipa, skirta parodyti, kaip elemento linijos aukštį veikia mūsų komunalinės paslaugos. Klasės taikomos pačiam elementui arba kartais pirminiam elementui. Šias klases galima pritaikyti pagal poreikį naudojant mūsų paslaugų API.
Tai ilga pastraipa, skirta parodyti, kaip elemento linijos aukštį veikia mūsų komunalinės paslaugos. Klasės taikomos pačiam elementui arba kartais pirminiam elementui. Šias klases galima pritaikyti pagal poreikį naudojant mūsų paslaugų API.
Tai ilga pastraipa, skirta parodyti, kaip elemento linijos aukštį veikia mūsų komunalinės paslaugos. Klasės taikomos pačiam elementui arba kartais pirminiam elementui. Šias klases galima pritaikyti pagal poreikį naudojant mūsų paslaugų 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
Pakeiskite pasirinkimą į mūsų monospace šriftų krūvą naudodami .font-monospace
.
Tai yra monoerdvėje
<p class="font-monospace">This is in monospace</p>
Iš naujo nustatyti spalvą
Iš naujo nustatykite teksto arba nuorodos spalvą naudodami .text-reset
, kad ji paveldėtų spalvą iš pirminės.
Nutildytas tekstas su nuoroda iš naujo .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Teksto dekoravimas
Papuoškite tekstą komponentuose naudodami teksto dekoravimo klases.
<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
Kintamieji
// 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;
Žemėlapiai
Šrifto dydžio priemonės generuojamos iš šio žemėlapio kartu su mūsų paslaugų 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
Šrifto ir teksto priemonės yra nurodytos mūsų paslaugų API scss/_utilities.scss
. Sužinokite, kaip naudoti paslaugų 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
),