Мәтін
Түзетуді, орауды, салмақты және т.б. басқаруға арналған жалпы мәтіндік утилиталарға арналған құжаттар мен мысалдар.
Мәтінді туралау
Мәтінді туралау сыныптары бар құрамдастарға мәтінді оңай қайта реттеңіз. Бастау, аяқтау және ортасына туралау үшін тор жүйесі сияқты бірдей көру алаңының енінің тоқтау нүктелерін пайдаланатын жауап беретін сыныптар қол жетімді.
Барлық көрініс өлшемдерінде тураланған мәтінді бастаңыз.
Барлық көріністер өлшемдерінде ортаға тураланған мәтін.
Барлық көрініс өлшемдерінде тураланған мәтінді аяқтаңыз.
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
ммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм
<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>
Сасс
Айнымалылар
// 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
),