Rubutu

Takaddun bayanai da misalai don kayan aikin rubutu gama gari don sarrafa jeri, nannade, nauyi, da ƙari.

A wannan shafi

Daidaita rubutu

Sauƙaƙe daidaita rubutu zuwa sassa tare da azuzuwan daidaita rubutu. Don farawa, ƙarshe, da daidaitawar tsakiya, akwai azuzuwan amsa waɗanda ke amfani da madaidaitan faɗin ra'ayi iri ɗaya kamar tsarin grid.

Fara rubutu mai layi akan duk girman tashar kallo.

Rubutun da aka daidaita a tsakiya akan duk girman tashar kallo.

Ƙare rubutun da aka daidaita akan duk girman tashar kallo.

Fara rubutu mai daidaitacce akan girman SM (kananan) ko mafi girma.

Fara rubutu mai daidaitacce akan girman MD (matsakaici) ko mafi girma.

Fara rubutu mai daidaitacce akan madaidaitan ma'aunin LG (manya) ko mafi girma.

Fara rubutu mai daidaitacce akan madaidaitan ma'aunin XL (mafi girma) ko mafi girma.

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>

Lura cewa ba mu samar da azuzuwan masu amfani don ingantaccen rubutu ba. Duk da yake, a zahiri, ingantacciyar rubutu na iya zama mai ban sha'awa, yana sa tazarar kalma ta zama bazuwar sabili da haka yana da wahalar karantawa.

Rubutun rubutu da ambaliya

Rufe rubutu tare da .text-wrapaji.

Wannan rubutu ya kamata kunsa.

html

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

Hana rubutu daga nannade da .text-nowrapaji.

Wannan rubutu yakamata ya mamaye iyaye.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Katse magana

Hana dogayen zaren rubutu karya shimfidar abubuwan abubuwan da aka gyara ku ta amfani .text-breakda saita word-wrap: break-wordda word-break: break-word. Muna amfani da word-wrapmaimakon na gama gari overflow-wrapdon tallafin mai fa'ida, kuma muna ƙara abubuwan da aka yanke word-break: break-worddon guje wa batutuwa tare da kwantena masu sassauƙa.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Lura cewa karya kalmomi ba zai yiwu ba a cikin Larabci , wanda shine yaren RTL da aka fi amfani dashi. Don haka .text-breakan cire shi daga RTL ɗinmu da aka haɗa CSS.

Canjin rubutu

Canza rubutu a cikin sassa tare da azuzuwan babban rubutu.

Ƙananan rubutu.

Rubutun babba.

CapiTaliZed rubutu.

html

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

Yi la'akari da yadda .text-capitalizekawai ke canza harafin farko na kowace kalma, barin yanayin kowane haruffa ba tare da tasiri ba.

Girman rubutu

Canza rubutun da sauri font-size. Yayin da azuzuwan mu (misali, .h1- .h6) ke aiki font-size, font-weight, da line-height, waɗannan abubuwan amfani suna aiki ne kawaifont-size . Girman waɗannan kayan aikin ya dace da abubuwan kan HTML, don haka yayin da adadin ya ƙaru, girman su yana raguwa.

.fs-1 rubutu

.fs-2 rubutu

.fs-3 rubutu

.fs-4 rubutu

.fs-5 rubutu

.fs-6 rubutu

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>

Keɓance samfuran ku font-sizeta hanyar gyara $font-sizestaswirar Sass.

Nauyin rubutu da rubutun rubutu

Saurin canza rubutu font-weightko font-stylena rubutu tare da waɗannan abubuwan amfani. font-stylean gajarta kayan aiki kamar yadda .fst-*kuma font-weightan gajarta kayan aiki kamar .fw-*.

M rubutu.

Rubutun nauyi mai ƙarfi (dangane da kashi na iyaye).

Rubutun nauyi Semibold.

Rubutun nauyi na al'ada.

Rubutun nauyi mai nauyi.

Rubutun nauyi mai sauƙi (dangane da kashi na iyaye).

Rubutun rubutun.

Rubutu tare da salon rubutu na al'ada

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>

Tsawon layi

Canja tsayin layi tare da .lh-*kayan aiki.

Wannan sakin layi ne mai tsayi da aka rubuta don nuna yadda tsayin layi na wani abu ke shafar abubuwan amfaninmu. Ana amfani da azuzuwan zuwa kashi da kansa ko kuma wani lokacin bangaren iyaye. Ana iya keɓance waɗannan azuzuwan kamar yadda ake buƙata tare da API mai amfani.

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>

Monospace

Canza wani zaɓi zuwa tarin rubutun mu na monospace tare da .font-monospace.

Wannan yana cikin monospace

html

<p class="font-monospace">This is in monospace</p>

Sake saita launi

Sake saita rubutu ko launi na hanyar haɗin gwiwa tare da .text-reset, don ya gaji launi daga iyayensa.

Rubutun da aka kashe tare da hanyar haɗin sake saiti .

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Adon rubutu

Ado rubutu a cikin sassa tare da azuzuwan ado na rubutu.

Wannan rubutu yana da layi a ƙarƙashinsa.

Wannan rubutu yana da layin da ke bi ta cikinsa.

Wannan hanyar haɗin yanar gizon an cire kayan ado na rubutu

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

Masu canji

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

Taswirori

Ana samar da abubuwan amfani masu girman font daga wannan taswira, a haɗe tare da API ɗin mu.

$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 ɗin Utilities

Ana ayyana abubuwan amfanin rubutu da rubutu a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.

    "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
    ),