Maandishi
Uhifadhi wa hati na mifano ya huduma za kawaida za maandishi ili kudhibiti upatanishi, kufunga, uzito na zaidi.
Mpangilio wa maandishi
Pangilia maandishi upya kwa vipengele kwa urahisi na madarasa ya upatanishi wa maandishi. Kwa mwanzo, mwisho, na upangaji wa katikati, madarasa ya mwitikio yanapatikana ambayo yanatumia viingilio sawa vya upana wa kituo cha kutazama kama mfumo wa gridi ya taifa.
Anza maandishi yaliyopangiliwa kwenye saizi zote za kituo cha kutazama.
Maandishi yaliyopangiliwa katikati kwenye saizi zote za kituo cha kutazama.
Maliza maandishi yaliyopangiliwa kwenye saizi zote za kituo cha kutazama.
Anza maandishi yaliyopangiliwa kwenye ukubwa wa SM (ndogo) au pana zaidi.
Anza maandishi yaliyopangiliwa kwenye MD ya ukubwa wa vituo vya kutazama (kati) au pana.
Anza maandishi yaliyopangiliwa kwenye ukubwa wa vituo vya kutazama vya LG (kubwa) au pana.
Anza maandishi yaliyopangiliwa kwenye ukubwa wa vituo vya kutazama vya XL (kubwa zaidi) au kwa upana zaidi.
<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>
Kufunga maandishi na kufurika
Funga maandishi na .text-wrap
darasa.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Zuia maandishi yasifungwe na .text-nowrap
darasa.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Uvunjaji wa maneno
Zuia mifuatano mirefu ya maandishi kutoka kwa kuvunja mpangilio wa vipengele vyako kwa kutumia .text-break
kuweka word-wrap: break-word
na word-break: break-word
. Tunatumia word-wrap
badala ya ile inayojulikana zaidi overflow-wrap
kwa usaidizi mpana wa kivinjari, na kuongeza iliyoacha kutumika word-break: break-word
ili kuepuka matatizo na vyombo vinavyobadilikabadilika.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
imeondolewa kwenye CSS yetu iliyokusanywa ya RTL.
Kubadilisha maandishi
Badilisha maandishi katika vipengele na madarasa ya herufi kubwa ya maandishi.
Maandishi yenye herufi ndogo.
Maandishi yenye herufi kubwa.
Maandishi ya CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Kumbuka jinsi .text-capitalize
tu kubadilisha herufi ya kwanza ya kila neno, na kuacha kesi ya herufi nyingine yoyote bila kuathiriwa.
Ukubwa wa herufi
Badilisha font-size
maandishi kwa haraka. Ingawa madaraja yetu ya mada (km, .h1
- .h6
) yanatumika font-size
, font-weight
, na line-height
, huduma hizi zinatumika pekeefont-size
. Ukubwa wa huduma hizi unalingana na vipengee vya kichwa vya HTML, kwa hivyo nambari inapoongezeka, saizi yao hupungua.
Maandishi ya .fs-1
maandishi ya .fs-2
maandishi ya .fs-3
maandishi ya .fs-4
maandishi ya .fs-5
maandishi ya .fs-6
<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 inapatikana font-size
kwa kurekebisha $font-sizes
ramani ya Sass.
Uzito wa herufi na italiki
Badilisha kwa haraka maandishi font-weight
au font-style
maandishi na huduma hizi. font-style
huduma zimefupishwa kama .fst-*
na font-weight
huduma zinafupishwa kama .fw-*
.
Maandishi mazito.
Maandishi ya uzani mzito (yanayohusiana na kipengele cha mzazi).
Maandishi ya uzito wa kawaida.
Nakala ya uzito mwepesi.
Nakala nyepesi ya uzani (kuhusiana na kipengele cha mzazi).
Maandishi ya italiki.
Maandishi yenye mtindo wa kawaida wa fonti
<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>
Urefu wa mstari
Badilisha urefu wa mstari na .lh-*
huduma.
Hii ni aya ndefu iliyoandikwa ili kuonyesha jinsi urefu wa kipengee unavyoathiriwa na huduma zetu. Madarasa hutumiwa kwa kipengele yenyewe au wakati mwingine kipengele cha mzazi. Madarasa haya yanaweza kubinafsishwa kama inavyohitajika na API yetu ya matumizi.
Hii ni aya ndefu iliyoandikwa ili kuonyesha jinsi urefu wa kipengee unavyoathiriwa na huduma zetu. Madarasa hutumiwa kwa kipengele yenyewe au wakati mwingine kipengele cha mzazi. Madarasa haya yanaweza kubinafsishwa kama inavyohitajika na API yetu ya matumizi.
Hii ni aya ndefu iliyoandikwa ili kuonyesha jinsi urefu wa kipengee unavyoathiriwa na huduma zetu. Madarasa hutumiwa kwa kipengele yenyewe au wakati mwingine kipengele cha mzazi. Madarasa haya yanaweza kubinafsishwa kama inavyohitajika na API yetu ya matumizi.
Hii ni aya ndefu iliyoandikwa ili kuonyesha jinsi urefu wa kipengee unavyoathiriwa na huduma zetu. Madarasa hutumiwa kwa kipengele yenyewe au wakati mwingine kipengele cha mzazi. Madarasa haya yanaweza kubinafsishwa kama inavyohitajika na API yetu ya matumizi.
<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>
Nafasi moja
Badilisha chaguo kuwa safu yetu ya fonti ya nafasi moja na .font-monospace
.
Hii ni katika nafasi moja
<p class="font-monospace">This is in monospace</p>
Weka upya rangi
Weka upya rangi ya maandishi au kiungo na .text-reset
, ili irithi rangi kutoka kwa mzazi wake.
Maandishi yamenyamazishwa kwa kiungo cha kuweka upya .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Mapambo ya maandishi
Kupamba maandishi katika vipengele na madarasa ya mapambo ya maandishi.
Nakala hii ina mstari chini yake.
Maandishi haya yana mstari unaopitia humo.
Kiungo hiki kimeondolewa mapambo yake ya maandishi<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
Vigezo
// 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;
Ramani
Huduma za ukubwa wa herufi zinatolewa kutoka kwenye ramani hii, pamoja na API ya huduma zetu.
$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
);
API ya Huduma
Huduma za fonti na maandishi zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss
. Jifunze jinsi ya kutumia API ya huduma.
"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
),