Текст

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

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

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

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

Почните поравнати текст на свим величинама прозора.

Центрирано поравнат текст на свим величинама прозора.

Крај поравнати текст на свим величинама прозора.

Почните поравнати текст на оквирима за приказ величине СМ (мали) или шири.

Почните поравнати текст на оквирима за приказ величине МД (средњи) или шире.

Почните поравнати текст на прозорима величине ЛГ (велики) или ширим.

Почните поравнати текст на прозорима величине КСЛ (екстра-велики) или шири.

хтмл

<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класом.

Овај текст би требало да се умота.

хтмл

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

Спречите преламање текста .text-nowrapкласом.

Овај текст би требало да пређе надређени.

хтмл

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

мммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм

хтмл

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

Имајте на уму да разбијање речи није могуће на арапском , који је најчешће коришћени РТЛ језик. Због тога .text-breakје уклоњен из нашег РТЛ компајлираног ЦСС-а.

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

Трансформишите текст у компоненте са класама великих слова.

Текст малим словима.

Текст великим словима.

Велики текст.

хтмл

<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 . Величина ових услужних програма одговара елементима заглавља ХТМЛ-а, тако да како се број повећава, њихова величина се смањује.

.фс-1 текст

.фс-2 текст

.фс-3 текст

.фс-4 текст

.фс-5 текст

.фс-6 текст

хтмл

<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Сасс мапе.

Тежина фонта и курзив

Брзо промените font-weightили font-styleтекста помоћу ових услужних програма. font-styleкомуналне услуге су скраћене као .fst-*, а font-weightкомуналне услуге су скраћене као .fw-*.

Задебљани текст.

Подебљани текст тежине (у односу на родитељски елемент).

Полудебљани текст тежине.

Текст нормалне тежине.

Лагани текст.

Лакши текст (у односу на родитељски елемент).

Курзив текст.

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

хтмл

<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-*услужних програма.

Ово је дугачак пасус написан да покаже како наши услужни програми утичу на висину линије елемента. Класе се примењују на сам елемент или понекад на родитељски елемент. Ове класе се могу прилагодити по потреби помоћу нашег услужног АПИ-ја.

хтмл

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

Ово је у монопростору

хтмл

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

Ресетуј боју

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

Искључен текст са везом за ресетовање .

хтмл

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

Декорација текста

Украсите текст у компонентама са класама декорације текста.

Овај текст има линију испод.

Овај текст има линију која пролази кроз њега.

Са ове везе је уклоњен текстуални украс

хтмл

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

Мапс

Помоћни програми величине фонта се генеришу из ове мапе, у комбинацији са нашим услужним АПИ-јем.

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

Утилитиес АПИ

Услужни програми за фонт и текст су декларисани у нашем АПИ-ју за услужне програме у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.

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