Текст
Документация и примери за общи текстови помощни програми за контролиране на подравняване, обвиване, тегло и др.
Подравняване на текст
Лесно подравнявайте текст към компоненти с класове за подравняване на текст. За начално, крайно и централно подравняване са налични адаптивни класове, които използват същите точки на прекъсване на ширината на прозореца за изглед като мрежовата система.
Започнете подравнен текст на всички размери на прозорците.
Централно подравнен текст на всички размери на прозорците.
Край на подравнения текст на всички размери на прозорците.
Започнете подравнен текст върху прозорци с размер 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
, за да избегнем проблеми с гъвкавите контейнери.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<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
),