Текст

Тигезләнүне, төрүне, авырлыкны һәм башкаларны контрольдә тоту өчен гомуми текст ярдәмендә документлар һәм мисаллар.

Бу биттә

Текстны тигезләү

Текстны тигезләү класслары булган компонентларга җиңел итеп күчерегез. Старт, ахыр һәм үзәк тигезләү өчен, челтәр системасы белән бер үк күренеш киңлеген кулланган җаваплы класслар бар.

Барлык күренеш зурлыкларында тигезләнгән текстны башлау.

Viewзәк барлык күренеш үлчәмнәрендә тигезләнгән текст.

Барлык күренеш зурлыкларында тигезләнгән текстны тәмамлагыз.

SM (кечкенә) яки киңрәк күренешләрдә тигезләнгән текстны башлау.

МД (урта) яки киңрәк күренешләрдә тигезләнгән текстны башлау.

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

мммммамммамммамммамммамммамммаммммаммммаммммамммамммммммммммммммммммммммммм

html

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

Игътибар итегез, сүзләрне бозу гарәп телендә мөмкин түгел , бу иң күп кулланылган RTL теле. Шуңа күрә .text-breakбезнең RTL тупланган CSS-тан алынды.

Текстны үзгәртү

Текстны капитализация класслары белән компонентларда үзгәртү.

Түбән текст.

Upperгары текст.

CapiTaliZed тексты.

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-style. font-styleкоммуналь хезмәтләр кыскартылган, .fst-*коммуналь font-weightхезмәтләр шулай кыскартылган .fw-*.

Калын текст.

Калын авырлык тексты (төп элементка карата).

Ярым авырлык тексты.

Нормаль авырлык тексты.

Lightиңел авырлык тексты.

Ighterиңел авырлык тексты (төп элемент белән чагыштырганда).

Италия тексты.

Нормаль шрифт стиле белән текст

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>

Сасс

Variзгәрешләр

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

Шрифт һәм текст ярдәмендә безнең коммуналь хезмәтләр 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
    ),