Maandishi

Uhifadhi wa hati na mifano ya huduma za kawaida za maandishi ili kudhibiti upatanishi, kufunga, uzito na zaidi.

Katika ukurasa huu

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.

html

<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>

Kumbuka kuwa hatutoi madarasa ya matumizi kwa maandishi yaliyothibitishwa. Ingawa, kwa uzuri, maandishi yaliyohalalishwa yanaweza kuonekana kuvutia zaidi, hufanya nafasi ya maneno kuwa nasibu zaidi na hivyo kuwa vigumu kusoma.

Kufunga maandishi na kufurika

Funga maandishi na .text-wrapdarasa.

Nakala hii inapaswa kufungwa.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Zuia maandishi yasifungwe na .text-nowrapdarasa.

Maandishi haya yanapaswa kufurika mzazi.

html

<div class="text-nowrap bg-light border" 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-breakkuweka word-wrap: break-wordna word-break: break-word. Tunatumia word-wrapbadala ya ile inayojulikana zaidi overflow-wrapkwa usaidizi mpana wa kivinjari, na kuongeza iliyoacha kutumika word-break: break-wordili kuepuka matatizo na vyombo vinavyobadilikabadilika.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Kumbuka kuwa kuvunja maneno hakuwezekani katika Kiarabu , ambayo ndiyo lugha inayotumika zaidi ya RTL. Kwa hivyo .text-breakimeondolewa 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.

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Kumbuka jinsi .text-capitalizetu kubadilisha herufi ya kwanza ya kila neno, na kuacha kesi ya herufi nyingine yoyote bila kuathiriwa.

Ukubwa wa herufi

Badilisha font-sizemaandishi 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

html

<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-sizekwa kurekebisha $font-sizesramani ya Sass.

Uzito wa herufi na italiki

Badilisha kwa haraka maandishi font-weightau font-stylemaandishi na huduma hizi. font-stylehuduma zimefupishwa kama .fst-*na font-weighthuduma zinafupishwa kama .fw-*.

Maandishi mazito.

Maandishi ya uzani mzito (yanayohusiana na kipengele cha mzazi).

Nakala ya uzani wa nusu bold.

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

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</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.

html

<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

html

<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 .

html

<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

html

<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", "Noto Sans", "Liberation Sans", Arial, 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(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$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-semibold:        600;
$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(--#{$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,
        semibold: $font-weight-semibold,
        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
    ),