Текст

Документация жана мисалдар жалпы текст утилиталары үчүн тегиздөө, таңуу, салмак жана башкалар.

Бул бетте

Текстти тегиздөө

Текстти тегиздөө класстары менен компоненттерге текстти оңой кайра тегиздөө. Баштоо, аяктоо жана борборду тегиздөө үчүн тор системасы сыяктуу эле көрүү терезесинин кеңдигинин үзүлүү чекиттерин колдонгон жооп берүүчү класстар бар.

Текстти бардык көрүү терезесинин өлчөмдөрүндө баштаңыз.

Бардык көрүү терезесинин өлчөмдөрүндө ортого тегизделген текст.

Бардык көрүү терезесинин өлчөмдөрүндөгү тегизделген текстти аяктоо.

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-wrapword-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Көп колдонулган RTL тили болгон араб тилинде сөздөрдү бузуу мүмкүн эмес экенин эске алыңыз . Ошондуктан .text-break, биздин RTL компиляцияланган CSS алынып салынды.

Текстти трансформациялоо

Текстти баш тамгалар класстары менен компоненттерге которуу.

Кичирейтилген текст.

Чоң тамгалар менен жазылган текст.

Капитализацияланган текст.

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>

Sass картасын font-sizeөзгөртүү менен жеткиликтүү сиңизди ыңгайлаштырыңыз .$font-sizes

Ариптин салмагы жана курсив

Бул утилиталар менен текстти font-weightже текстти тез өзгөртүңүз . коммуналдык кызматтар деп кыскартылган жана коммуналдык кызматтар катары кыскартылган .font-stylefont-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>

Sass

Өзгөрмөлөр

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

Utilities API

Шрифт жана тексттин утилиталары биздин 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
    ),