текст
Документація та приклади типових текстових утиліт для керування вирівнюванням, обтіканням, вагою тощо.
Вирівнювання тексту
Легко переставте текст до компонентів за допомогою класів вирівнювання тексту. Для вирівнювання початку, кінця та центру доступні адаптивні класи, які використовують ті самі точки розриву ширини вікна перегляду, що й система сітки.
Почніть вирівнювати текст на всіх розмірах вікна перегляду.
Вирівняний по центру текст на всіх розмірах вікна перегляду.
Кінцевий вирівняний текст на всіх розмірах вікна перегляду.
Почніть вирівнювати текст у вікнах перегляду розміром 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
для встановлення word-wrap: break-word
та word-break: break-word
. Ми використовуємо word-wrap
замість більш поширеного overflow-wrap
для ширшої підтримки браузера та додаємо застарілий word-break: break-word
, щоб уникнути проблем із контейнерами flex.
мммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
видаляється з нашого скомпільованого CSS RTL.
Перетворення тексту
Перетворення тексту в компонентах за допомогою класів використання великих літер тексту.
Текст у нижньому регістрі.
Текст у верхньому регістрі.
Текст з великої літери.
<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
),