Текст
Документация и примеры для распространенных текстовых утилит для управления выравниванием, обтеканием, весом и т. д.
Выравнивание текста
Легко выравнивайте текст по компонентам с помощью классов выравнивания текста. Для выравнивания по началу, концу и центру доступны адаптивные классы, которые используют те же контрольные точки ширины области просмотра, что и система сетки.
Начать выровненный текст на всех размерах окна просмотра.
Выровненный по центру текст на всех размерах окна просмотра.
Выровненный по концу текст на всех размерах окна просмотра.
Начните выровненный текст на окнах просмотра размером SM (маленький) или шире.
Начните выровненный текст на окнах просмотра размером MD (средний) или шире.
Начинайте выравнивать текст на видовых экранах размером LG (большой) или шире.
Начинайте выровнять текст на окнах просмотра размером XL (очень большой) или шире.
<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 bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Разрыв слова
Чтобы длинные строки текста не нарушали компоновку компонентов, используйте .text-break
to set word-wrap: break-word
и word-break: break-word
. Мы используем word-wrap
вместо более распространенных overflow-wrap
для более широкой поддержки браузеров и добавляем устаревшие word-break: break-word
, чтобы избежать проблем с гибкими контейнерами.
мммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
он удален из нашего RTL-скомпилированного CSS.
Преобразование текста
Преобразование текста в компонентах с помощью классов капитализации текста.
Текст в нижнем регистре.
Текст в верхнем регистре.
Текст с заглавными буквами.
<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 текст
<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
s, изменив $font-sizes
карту Sass.
Вес шрифта и курсив
Быстро измените 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-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.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
<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", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif);
$font-family-code: var(--#{$variable-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-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(--#{$variable-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,
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
),