Nivîstok
Belgekirin û mînakên ji bo karûbarên nivîsê yên hevpar ji bo kontrolkirina lihevhatin, pêçan, giranî, û hêj bêtir.
Lihevkirina nivîsê
Bi dersên hevrêzkirina nivîsê re bi hêsanî nivîsê li pêkhateyan rast bikin. Ji bo destpêk, dawî, û rêzkirina navendê, dersên bersivdar hene ku heman xalên veqetandinê yên firehiya dîtinê wekî pergala torê bikar tînin.
Nivîsara rêzkirî li ser hemî mezinahiyên dîmenderê dest pê bikin.
Li ser hemî mezinahiyên porta dîtinê nivîsa rêzkirî ya navendî.
Li ser hemî mezinahiyên porta dîtinê nivîsa rêzkirî biqedînin.
Metna rêzkirî li ser dîmenderên bi mezinahiya SM (biçûk) an berfirehtir dest pê bikin.
Metna rêzkirî li ser dîmenderên bi mezinahiya MD (navîn) an berfirehtir dest pê bikin.
Li ser dîmenderên bi mezinahiya LG (mezin) an firehtir nivîsa rêzkirî dest pê bikin.
Metna rêzkirî li ser dîmenderên mezinahiya XL (zêde-mezin) an berfirehtir dest pê bikin.
<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>Pêçkirina nivîsê û zêdebûn
Nivîsê bi .text-wrappolê ve bipêçin.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Pêşîlêgirtina nivîsê bi .text-nowrapçînekê re bigire.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Peyv şikandin
Bi karanîna .text-breaksazkirinê word-wrap: break-wordû word-break: break-word. Em word-wrapli şûna ya gelemperî overflow-wrapji bo piştgirîya gerokê ya berfireh bikar tînin, û yên ku hatine hilweşandin lê zêde dikin word-break: break-wordda ku ji pirsgirêkên bi konteynerên nerm dûr nekevin.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-breakji CSS-ya meya berhevkirî ya RTL tê rakirin.
Veguherîna nivîsê
Bi çînên sermayekirina nivîsê di pêkhateyan de nivîsê veguherînin.
Nivîsa bi tîpên piçûk.
Nivîsa bi tîpên mezin.
Nivîsara CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Bala xwe bidinê ka meriv çawa .text-capitalizetenê tîpa yekem a her peyvê diguhezîne, rewşa tîpên din bêbandor dihêle.
Mezinahiya tîpan
Zûtirîn font-sizenivîsê biguherînin. Dema ku dersên sernavê me (mînak, .h1- .h6) têne sepandin font-size, font-weight, û line-height, ev karûbar tenê têne sepandin font-size. Mezinahiya van amûran bi hêmanên sernavê yên HTML-ê re li hev dike, ji ber vê yekê her ku hejmar zêde dibe, mezinahiya wan kêm dibe.
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
<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>Bi guheztina nexşeya Sass font-size-ên xweyên berdest xweş bikin.$font-sizes
Giraniya tîpan û îtalîk
Bi van karûbaran zû font-weightan jî font-stylenivîsê biguherînin. font-styleutilities bi kurtî wek .fst-*û font-weightutilities bi kurtî wek .fw-*.
Nivîsa qelew.
Nivîsa giraniya qelewtir (bi hêmana dêûbav re têkildar).
Nivîsara giraniya normal.
Nivîsara giraniya sivik.
Nivîsara bi giraniya siviktir (bi hêmana dêûbav re têkildar).
Nivîsa îtalîk.
Nivîsar bi şêwaza tîpên normal
<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>Bilindahiya rêzê
Bi karûbaran bilindahiya rêzê biguherînin .lh-*.
Ev paragrafek dirêj e ku hatî nivîsandin da ku destnîşan bike ka xêz-bilindiya hêmanek çawa ji hêla karûbarên me ve tê bandor kirin. Ders li ser hêmanê bixwe an carinan jî hêmana dêûbav têne sepandin. Van ders dikarin wekî ku hewce be bi API-ya meya karûbar re bêne xweş kirin.
Ev paragrafek dirêj e ku hatî nivîsandin da ku destnîşan bike ka xêz-bilindiya hêmanek çawa ji hêla karûbarên me ve tê bandor kirin. Ders li ser hêmanê bixwe an carinan jî hêmana dêûbav têne sepandin. Van ders dikarin wekî ku hewce be bi API-ya meya karûbar re bêne xweş kirin.
Ev paragrafek dirêj e ku hatî nivîsandin da ku destnîşan bike ka xêz-bilindiya hêmanek çawa ji hêla karûbarên me ve tê bandor kirin. Ders li ser hêmanê bixwe an carinan jî hêmana dêûbav têne sepandin. Van ders dikarin wekî ku hewce be bi API-ya meya karûbar re bêne xweş kirin.
Ev paragrafek dirêj e ku hatî nivîsandin da ku destnîşan bike ka xêz-bilindiya hêmanek çawa ji hêla karûbarên me ve tê bandor kirin. Ders li ser hêmanê bixwe an carinan jî hêmana dêûbav têne sepandin. Van ders dikarin wekî ku hewce be bi API-ya meya karûbar re bêne xweş kirin.
<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
Hilbijartinek li staka tîpên meya monospace bi .font-monospace.
Ev di monospace de ye
<p class="font-monospace">This is in monospace</p>Rengê vegerîne
Rengê nivîsek an girêdanek bi , ji nû .text-resetve bike, da ku ew reng ji dêûbavê xwe mîras bistîne.
Nivîsa bê deng a bi girêdana vesazkirinê .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Decoration text
Bi dersên xemilandina nivîsê di pêkhateyan de nivîsê xemilînin.
Di binê vê nivîsê de rêzek heye.
Xetek vê nivîsê heye ku tê de derbas dibe.
Ev lînka xemla wê ya nivîsê hatiye rakirin<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
Variables
// 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;
Nexşe
Karûbarên mezinahiya tîpan ji vê nexşeyê, digel karûbarên me API-yê têne çêkirin.
$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
Karûbarên font û nivîsê di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.
"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
),