Матн

Ҳуҷҷатҳо ва мисолҳо барои утилитаҳои матнии умумӣ барои назорати ҳамворкунӣ, печондан, вазн ва ғайра.

Дар ин саҳифа

Ҳамоҳангсозии матн

Матнро ба ҷузъҳо бо синфҳои ҳамоҳангсозии матн ба осонӣ мутобиқ кунед. Барои ҳамоҳангсозии оғоз, анҷом ва марказ, синфҳои ҷавобӣ мавҷуданд, ки ҳамон нуқтаи кандашавии паҳнои намоишро ҳамчун системаи шабака истифода мебаранд.

Матни мувофиқро дар ҳама андозаҳои намоишӣ оғоз кунед.

Матни ба марказ мутобиқ кардашуда дар ҳама андозаҳои намоиш.

Матни мувофиқро дар ҳама андозаҳои намоишӣ анҷом диҳед.

Матни мувофиқро дар намоишгоҳҳои андозаи SM (хурд) ё васеътар оғоз кунед.

Матни мувофиқро дар намоишгоҳҳои андозаи MD (миёна) ё васеътар оғоз кунед.

Матни мувофиқро дар намоишгоҳҳои андозаи LG (калон) ё васеътар оғоз кунед.

Матни мувофиқро дар намоишгоҳҳои андозаи XL (аз ҳад калон) ё васеътар оғоз кунед.

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>

Дар хотир доред, ки мо барои матни асоснок синфҳои муфидро пешниҳод намекунем. Гарчанде, ки матни аз ҷиҳати эстетикӣ асоснокшуда ҷолибтар ба назар мерасад, он фосилаи калимаҳоро тасодуфӣ ва аз ин рӯ хондан душвортар мекунад.

Паҳнкунии матн ва фаромадани матн

Матнро бо .text-wrapсинф печонед.

Ин матн бояд печонида шавад.

html

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

Аз печонидани матн бо .text-nowrapсинф пешгирӣ кунед.

Ин матн бояд волидайнро пур кунад.

html

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

Танаффус

Пешгирии сатрҳои дарози матн аз вайрон кардани тарҳбандии ҷузъҳои шумо бо истифода аз .text-breakтанзим word-wrap: break-wordва word-break: break-word. Мо word-wrapба ҷои маъмултарин overflow-wrapбарои дастгирии васеътари браузер истифода мебарем ва word-break: break-wordбарои пешгирӣ кардани мушкилот бо контейнерҳои flex-ро илова мекунем.

Mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Аҳамият диҳед, ки шикастани калимаҳо дар арабӣ , ки забони RTL аз ҳама бештар истифода мешавад, имконнопазир аст. Аз ин рӯ .text-break, аз CSS-и RTL-и мо хориҷ карда шудааст.

Табдил додани матн

Матнро дар ҷузъҳо бо синфҳои капитализатсияи матн табдил диҳед.

Матни хурд.

Матни калон.

Матни калонҳаҷм.

html

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

Аҳамият диҳед, ки чӣ гуна .text-capitalizeтанҳо ҳарфи аввали ҳар як калимаро тағир медиҳад ва ҳолати ҳарфҳои дигарро бетаъсир мемонад.

Андозаи шрифт

font-sizeМатнро зуд иваз кунед . Дар ҳоле ки синфҳои сарлавҳаи мо (масалан, .h1– .h6) татбиқ мешаванд font-size, font-weight, ва line-height, ин утилитаҳо танҳо татбиқ мешаванд font-size. Андозаи ин утилитаҳо ба унсурҳои сарлавҳаи HTML мувофиқат мекунад, аз ин рӯ бо зиёд шудани адад андозаи онҳо кам мешавад.

Матни .fs-1

Матни .fs-2

Матни .fs-3

Матни .fs-4

Матни .fs-5

Матни .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>

font-sizeБо тағир додани $font-sizesхаритаи Sass -и дастраси худро фармоиш диҳед .

Вазни шрифт ва курсив

font-weightБо ин утилитаҳо матн ё матнро зуд иваз кунед font-style. font-styleкоммуналӣ ҳамчун мухтасар .fst-*ва font-weightкоммуналӣ ҳамчун ихтисор карда мешаванд .fw-*.

Матни ғафс.

Матни вазни ғафс (нисбат ба унсури волидайн).

Матни вазни нимбол.

Матни вазни муқаррарӣ.

Матни вазни сабук.

Матни вазни сабуктар (нисбат ба унсури волидайн).

Матни курсив.

Матн бо услуби муқаррарии ҳуруф

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>

Баландии хати

Баландии хатро бо .lh-*утилитҳо тағир диҳед.

Ин параграфи дарозест, ки барои нишон додани он, ки чӣ гуна ба баландии хати элемент аз ҷониби хидматҳои мо таъсир мерасонад, навишта шудааст. Синфҳо ба худи элемент ё баъзан ба унсури волидайн татбиқ карда мешаванд. Ин синфҳоро мувофиқи зарурат бо API утилитаи мо танзим кардан мумкин аст.

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>

Монофазо

Интихобро ба стеки шрифти монофосилаи мо бо .font-monospace.

Ин дар як фазо аст

html

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

Рангро барқарор кунед

Ранги матн ё пайвандро бо - аз нав .text-resetтанзим кунед, то он рангро аз волидайни худ мерос гирад.

Матни хомӯшшуда бо истиноди азнавсозӣ .

html

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

Ороиши матн

Матнро дар ҷузъҳо бо синфҳои ороиши матн оро диҳед.

Ин матн дар зери он сатр дорад.

Ин матн хате дорад, ки аз он мегузарад.

Ин пайванд ороиши матни онро нест кардааст

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>

Сасс

Тағйирёбандаҳо

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

Харитаҳо

Утилитаҳои андозаи шрифт аз ин харита дар якҷоягӣ бо 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
);

API Utilities

Утилитҳои ҳуруф ва матн дар API утилитаҳои мо дар scss/_utilities.scss. Омӯзед, ки чӣ тавр истифода бурдани API-и коммуналӣ.

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