Szöveg
Dokumentáció és példák általános szöveges segédprogramokhoz az igazítás, a tördelés, a súly és egyebek szabályozásához.
Szöveg igazítás
Könnyen igazíthatja újra a szöveget az összetevőkhöz a szövegigazítási osztályokkal. A kezdő-, a vég- és a középső igazításhoz olyan érzékeny osztályok állnak rendelkezésre, amelyek ugyanazokat a nézetablak-szélesség-töréspontokat használják, mint a rácsrendszer.
Kezdje el az igazított szöveget minden nézetablakban.
Középre igazított szöveg minden nézetablakban.
Vége az igazított szövegnek minden nézetablakban.
Kezdje el az igazított szöveget SM (kicsi) vagy szélesebb méretű nézetablakokon.
Kezdje el az igazított szöveget MD (közepes) vagy szélesebb méretű nézetablakokon.
Kezdje el az igazított szöveget LG (nagy) vagy szélesebb méretű nézetablakban.
Kezdje az igazított szöveget XL (extra nagy) vagy szélesebb méretű nézetablakokon.
<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>
Szöveg tördelése és túlcsordulása
Szöveg tördelése .text-wrap
osztállyal.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
A szöveg tördelésének megakadályozása egy .text-nowrap
osztállyal.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Szótörés
Megakadályozza, hogy a hosszú szövegláncok megtörjék az összetevők elrendezését a .text-break
beállítás word-wrap: break-word
és a segítségével word-break: break-word
. A szélesebb böngészőtámogatás érdekében word-wrap
a gyakoribb helyett használjuk, és a rugalmas tárolókkal kapcsolatos problémák elkerülése érdekében overflow-wrap
hozzáadjuk az elavultat .word-break: break-word
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
eltávolítjuk az RTL által összeállított CSS-ből.
Szöveg átalakítás
Szöveg átalakítása komponensekké szöveges nagybetűs osztályokkal.
Kisbetűs szöveg.
Nagybetűs szöveg.
Nagybetűs szöveg.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Jegyezze meg, hogyan .text-capitalize
változtatja csak meg az egyes szavak első betűjét, a többi betű kis- és nagybetűjét nem érinti.
Betűméret
Gyorsan módosítsa a font-size
szöveget. Míg a címsorosztályaink (pl. .h1
– .h6
) font-size
, font-weight
, és , ezek a line-height
segédprogramok csakfont-size
. Ezeknek a segédprogramoknak a mérete megegyezik a HTML címsorelemeivel, így a szám növekedésével a méretük csökken.
.fs-1 szöveg
.fs-2 szöveg
.fs-3 szöveg
.fs-4 szöveg
.fs-5 szöveg
.fs-6 szöveg
<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>
A Sass térkép font-size
módosításával testreszabhatja az elérhető s-eket.$font-sizes
Betűsúly és dőlt betű
Ezekkel a segédprogramokkal gyorsan módosíthatja a font-weight
vagy font-style
a szöveget. font-style
A segédprogramok rövidítése , az .fst-*
utilities font-weight
pedig .fw-*
.
Félkövér szöveg.
Félkövérebb súlyú szöveg (a szülőelemhez képest).
Normál súlyú szöveg.
Könnyű szöveg.
Könnyebb súlyú szöveg (a szülőelemhez képest).
Dőlt szöveg.
Szöveg normál betűstílussal
<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>
Vonalmagasság
Módosítsa a vonal magasságát a .lh-*
segédprogramokkal.
Ez egy hosszú bekezdés, amely bemutatja, hogyan befolyásolják egy elem vonalmagasságát a segédprogramjaink. Az osztályokat magára az elemre vagy néha a szülőelemre alkalmazzák. Ezek az osztályok szükség szerint testreszabhatók segédprogram API-nkkal.
Ez egy hosszú bekezdés, amely bemutatja, hogyan befolyásolják egy elem vonalmagasságát a segédprogramjaink. Az osztályokat magára az elemre vagy néha a szülőelemre alkalmazzák. Ezek az osztályok szükség szerint testreszabhatók segédprogram API-nkkal.
Ez egy hosszú bekezdés, amely bemutatja, hogyan befolyásolják egy elem vonalmagasságát a segédprogramjaink. Az osztályokat magára az elemre vagy néha a szülőelemre alkalmazzák. Ezek az osztályok szükség szerint testreszabhatók segédprogram API-nkkal.
Ez egy hosszú bekezdés, amely bemutatja, hogyan befolyásolják egy elem vonalmagasságát a segédprogramjaink. Az osztályokat magára az elemre vagy néha a szülőelemre alkalmazzák. Ezek az osztályok szükség szerint testreszabhatók segédprogram API-nkkal.
<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
Módosítson egy kijelölést egyszóközű betűkészletünkre a gombbal .font-monospace
.
Ez egy térben van
<p class="font-monospace">This is in monospace</p>
Szín visszaállítása
Állítsa vissza a szöveg vagy hivatkozás színét a segítségével .text-reset
, hogy az örökölje a színt a szülőjétől.
Elnémított szöveg visszaállítási hivatkozással .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Szöveges díszítés
Díszítse a szöveget az összetevőkben szövegdíszítési osztályokkal.
Ez a szöveg alatt van egy vonal.
Ebben a szövegben van egy sor.
Ennek a linknek a szöveges díszítése eltávolítva<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
Változók
// 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;
Térképek
A betűtípus méretű segédprogramok ebből a térképből jönnek létre, a segédprogramok API-jával kombinálva.
$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
A betűtípus- és szövegsegédprogramok a segédprogramok API-jában vannak deklarálva a következőben: scss/_utilities.scss
. Ismerje meg a segédprogramok API használatát.
"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
),