Текст

Документација и примери за вообичаени текстуални алатки за контрола на усогласувањето, завиткувањето, тежината и многу повеќе.

На оваа страница

Порамнување на текстот

Лесно порамнете го текстот со компонентите со класи на порамнување текст. За почеток, крај и централно порамнување, достапни се респонзивни класи кои ги користат истите точки на прекин на ширината на погледот како и системот на мрежата.

Започнете го порамнетиот текст на сите големини на пристаништа за гледање.

Текст подреден во центарот на сите големини на приказните пристаништа.

Завршете го порамнетиот текст на сите големини на пристаништа за гледање.

Започнете го порамнетиот текст на пристаништа за гледање со големина 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за да избегнеме проблеми со флексибилните контејнери.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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>

Приспособете ги вашите достапни 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>

Монопростор

Променете го изборот на нашиот куп фонтови monospace со .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;

Карти

Услужните програми со големина на фонт се генерираат од оваа карта, во комбинација со нашите Utilities 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

Услужните алатки за фонт и текст се декларирани во нашите Utilities API во scss/_utilities.scss. Научете како да ги користите Utilities 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
    ),