Текст
Документация жана мисалдар жалпы текст утилиталары үчүн тегиздөө, таңуу, салмак жана башкалар.
Текстти тегиздөө
Текстти тегиздөө класстары менен компоненттерге текстти оңой кайра тегиздөө. Баштоо, аяктоо жана борборго тегиздөө үчүн, тор системасы сыяктуу эле көрүнүштүн кеңдигинин үзүлүү чекиттерин колдонгон жооп берүүчү класстар бар.
Текстти бардык көрүү терезесинин өлчөмдөрүндө баштаңыз.
Бардык көрүү терезесинин өлчөмдөрүндө ортого тегизделген текст.
Бардык көрүү терезесинин өлчөмдөрүндөгү тегизделген текстти аяктоо.
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
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<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>
Sass картасын 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-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>
Sass
Өзгөрмөлөр
// 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
);
Utilities 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
),