Okuwandiika obubaka
Ebiwandiiko n'ebyokulabirako by'ebikozesebwa mu biwandiiko ebya bulijjo okufuga okulaganya, okuzinga, obuzito, n'ebirala.
Okusengeka ebiwandiiko
Kyangu okuddamu okusengeka ebiwandiiko ku bitundu ebirina ebika by’okusengeka ebiwandiiko. Ku lw’okulaganya okutandika, okumaliriza, n’oku makkati, kiraasi eziddamu ziriwo ezikozesa ebifo bye bimu eby’okumenya obugazi bw’ekifo eky’okulaba ng’enkola ya giridi.
Tandika ebiwandiiko ebisengekeddwa ku sayizi zonna ez'ekifo eky'okulaba.
Ebiwandiiko ebiteekeddwa wakati ku sayizi zonna ez'ekifo eky'okulaba.
Komekkereza ebiwandiiko ebisengekeddwa ku sayizi zonna ez'ekifo eky'okulaba.
Tandika ebiwandiiko ebisengekeddwa ku bifo eby'okulaba ebirina obunene bwa SM (obutono) oba okusingawo.
Tandika ebiwandiiko ebisengekeddwa ku bifo eby'okulabamu obunene bwa MD (wa wakati) oba okusingawo.
Tandika ebiwandiiko ebisengekeddwa ku viewports ezirina sayizi ya LG (ennene) oba okusingawo.
Tandika ebiwandiiko ebisengekeddwa ku bifo eby'okulaba ebirina obunene bwa XL (ebinene ennyo) oba okusingawo.
<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>
Okuzinga ebiwandiiko n’okujjula
Zinga ebiwandiiko .text-wrap
n’ekibiina.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Lemesa ebiwandiiko okuzinga ne .text-nowrap
kiraasi.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Okumenya ebigambo
Lemesa ennyiriri empanvu ez'ebiwandiiko okumenya ensengeka y'ebitundu byo ng'okozesa .text-break
okuteeka word-wrap: break-word
ne word-break: break-word
. Tukozesa word-wrap
mu kifo ky’ebisinga okubeerawo overflow-wrap
olw’obuwagizi bwa bbulawuzi obugazi, era ne twongerako ebitakozesebwa word-break: break-word
okwewala ensonga ne flex containers.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
eggyibwa mu RTL yaffe ekung'aanyiziddwa CSS.
Okukyusa ebiwandiiko
Kyuusa ebiwandiiko mu bitundu ebirina ebika by’okuwandiika ebiwandiiko ebikulu.
Ebiwandiiko ebitonotono.
Ebiwandiiko ebiriko ennukuta ennene.
Ebiwandiiko ebiwandiikiddwa mu CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Weetegereze engeri .text-capitalize
gy’akyusaamu ennukuta esooka yokka eya buli kigambo, n’aleka ensonga y’ennukuta endala yonna nga tekoseddwa.
Enkula y’empandiika
Kyusa mangu the font-size
of ekiwandiiko. Nga ebibiina byaffe eby’omutwe (okugeza, .h1
– .h6
) bikola font-size
, font-weight
, ne line-height
, ebikozesebwa bino bikola byokkafont-size
. Okugerageranya obunene bw’ebikozesebwa bino kukwatagana n’ebintu ebiriko omutwe gwa HTML, kale omuwendo bwe gweyongera, obunene bwabyo bukendeera.
.fs-1 ekiwandiiko
.fs-2 ekiwandiiko
.fs-3 ekiwandiiko
.fs-4 ekiwandiiko
.fs-5 ekiwandiiko
.fs-6 ekiwandiiko
<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>
Customize font-size
s zo eziriwo nga okyusa $font-sizes
maapu ya Sass.
Obuzito bw’empandiika n’ennukuta ensirifu
Kyusa mangu font-weight
oba font-style
of text n'ebikozesebwa bino. font-style
utilities zifunzibwa nga .fst-*
ate font-weight
utilities zifunzibwa nga .fw-*
.
Ebiwandiiko ebinene.
Ebiwandiiko ebizitowa ebigumu (ebikwatagana n’ekintu ekizadde).
Ekiwandiiko ekizitowa ekya bulijjo.
Ebiwandiiko ebizitowa ennyo.
Ekiwandiiko ekizitowa ennyo (ekikwatagana n’ekintu ekizadde).
Ebiwandiiko ebiwandiikiddwa mu ngeri ey’enjawulo.
Ebiwandiiko ebirina sitayiro ya fonti eya bulijjo
<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>
Obugulumivu bwa layini
Kyusa obuwanvu bwa layini .lh-*
n’ebikozesebwa.
Kano katundu kawanvu akawandiikiddwa okulaga engeri obugulumivu bwa layini bwa elementi gye bukosebwamu ebikozesebwa byaffe. Ebika bikozesebwa ku elementi yennyini oba oluusi elementi omuzadde. Ebika bino bisobola okulongoosebwa nga bwe kyetaagisa ne API yaffe ey’omugaso.
Kano katundu kawanvu akawandiikiddwa okulaga engeri obugulumivu bwa layini bwa elementi gye bukosebwamu ebikozesebwa byaffe. Ebika bikozesebwa ku elementi yennyini oba oluusi elementi omuzadde. Ebika bino bisobola okulongoosebwa nga bwe kyetaagisa ne API yaffe ey’omugaso.
Kano katundu kawanvu akawandiikiddwa okulaga engeri obugulumivu bwa layini bwa elementi gye bukosebwamu ebikozesebwa byaffe. Ebika bikozesebwa ku elementi yennyini oba oluusi elementi omuzadde. Ebika bino bisobola okulongoosebwa nga bwe kyetaagisa ne API yaffe ey’omugaso.
Kano katundu kawanvu akawandiikiddwa okulaga engeri obugulumivu bwa layini bwa elementi gye bukosebwamu ebikozesebwa byaffe. Ebika bikozesebwa ku elementi yennyini oba oluusi elementi omuzadde. Ebika bino bisobola okulongoosebwa nga bwe kyetaagisa ne API yaffe ey’omugaso.
<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>
Ekifo kimu
Kyusa okulonda ku monospace font stack yaffe ne .font-monospace
.
Kino kiri mu monospace
<p class="font-monospace">This is in monospace</p>
Reset langi
Ddamu langi y'ekiwandiiko oba enkolagana ne .text-reset
, esobole okusikira langi okuva ku muzadde waakyo.
Ebiwandiiko ebisirise nga biriko enkolagana y'okuzzaawo .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Okuyooyoota ebiwandiiko
Okuyooyoota ebiwandiiko mu bitundu n'ebibiina by'okuyooyoota ebiwandiiko.
Ekiwandiiko kino kirina layini wansi waakyo.
Ekiwandiiko kino kirina layini eyitamu.
Link eno erina okuyooyoota kwayo okw’ebiwandiiko okuggyiddwawo<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 nga bwe kiri
Enkyukakyuka ezikyukakyuka
// 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;
Maapu
Ebikozesebwa eby’obunene bw’empandiika bikolebwa okuva ku maapu eno, nga bigattiddwa wamu n’ebikozesebwa byaffe 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
);
Ebikozesebwa API
Ebikozesebwa mu font n'ebiwandiiko bilangirirwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss
. Yiga engeri y'okukozesaamu API y'ebikozesebwa.
"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
),