Teks
Dokumentasi lan conto kanggo keperluan teks umum kanggo ngontrol keselarasan, bungkus, bobot, lan liya-liyane.
alignment teks
Gampang nyelarasake teks menyang komponen kanthi kelas keselarasan teks. Kanggo wiwitan, pungkasan, lan alignment tengah, kasedhiya kelas responsif sing nggunakake breakpoints jembaré viewport padha karo sistem kothak.
Mulai teks selaras ing kabeh ukuran viewport.
Teks selaras tengah ing kabeh ukuran viewport.
Pungkasi teks selaras ing kabeh ukuran viewport.
Miwiti teks selaras ing viewports ukuran SM (cilik) utawa luwih amba.
Miwiti teks selaras ing viewports ukuran MD (sedheng) utawa luwih amba.
Miwiti teks selaras ing viewport ukuran LG (gedhe) utawa luwih amba.
Miwiti teks selaras ing viewports ukuran XL (ekstra-gedhe) utawa luwih amba.
<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>
Pambungkus teks lan kebanjiran
Bungkus teks karo .text-wrap
kelas.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Nyegah teks saka mbungkus karo .text-nowrap
kelas.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Pecah tembung
Nyegah strings teks sing dawa supaya ora ngrusak tata letak komponen kanthi nggunakake .text-break
nyetel word-wrap: break-word
lan word-break: break-word
. Kita nggunakake word-wrap
tinimbang sing luwih umum overflow-wrap
kanggo dhukungan browser sing luwih akeh, lan nambah sing ora digunakake word-break: break-word
kanggo ngindhari masalah karo wadhah fleksibel.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
dibusak saka CSS kompilasi RTL kita.
Transformasi teks
Ngowahi teks dadi komponen kanthi kelas kapitalisasi teks.
Aksara cilik.
Tulisan gedhe.
Teks kapital.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Elinga carane .text-capitalize
mung ngganti huruf pisanan saben tembung, ninggalake cilik huruf liyane ora kena pengaruh.
Gedene tulisan
Ganti font-size
teks kanthi cepet. Nalika kelas judhul kita (contone, .h1
– .h6
) ditrapake font-size
, font-weight
, lan line-height
, utilitas iki mung ditrapake font-size
. Ukuran kanggo utilitas iki cocog karo unsur judhul HTML, dadi yen jumlahe mundhak, ukurane bakal suda.
.fs-1 teks
.fs-2 teks
.fs-3 teks
.fs-4 teks
.fs-5 teks
.fs-6 teks
<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>
Ngatur font-size
s kasedhiya dening ngowahi $font-sizes
peta Sass.
Bobot huruf lan miring
Ganti teks font-weight
utawa font-style
teks kanthi cepet nganggo utilitas kasebut. font-style
utilitas dicekak .fst-*
lan font-weight
utilitas disingkat .fw-*
.
Teks kandel.
Teks bobot luwih kandel (relatif karo unsur induk).
Teks bobot normal.
Teks entheng.
Teks bobot entheng (relatif karo unsur induk).
Teks miring.
Teks nganggo gaya font normal
<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>
Dhuwur garis
Ngganti dhuwur baris karo .lh-*
keperluan.
Iki minangka paragraf dawa sing ditulis kanggo nuduhake carane dhuwur garis saka unsur dipengaruhi dening keperluan kita. Kelas ditrapake kanggo unsur kasebut dhewe utawa kadhangkala unsur induk. Kelas kasebut bisa disesuaikan kaya sing dibutuhake karo API utilitas.
Iki minangka paragraf dawa sing ditulis kanggo nuduhake carane dhuwur garis saka unsur dipengaruhi dening keperluan kita. Kelas ditrapake kanggo unsur kasebut dhewe utawa kadhangkala unsur induk. Kelas kasebut bisa disesuaikan kaya sing dibutuhake karo API utilitas.
Iki minangka paragraf dawa sing ditulis kanggo nuduhake carane dhuwur garis saka unsur dipengaruhi dening keperluan kita. Kelas ditrapake kanggo unsur kasebut dhewe utawa kadhangkala unsur induk. Kelas kasebut bisa disesuaikan kaya sing dibutuhake karo API utilitas.
Iki minangka paragraf dawa sing ditulis kanggo nuduhake carane dhuwur garis saka unsur dipengaruhi dening keperluan kita. Kelas ditrapake kanggo unsur kasebut dhewe utawa kadhangkala unsur induk. Kelas kasebut bisa disesuaikan kaya sing dibutuhake karo API utilitas.
<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>
Monospace
Ganti pilihan menyang tumpukan font monospace kita nganggo .font-monospace
.
Iki ing monospace
<p class="font-monospace">This is in monospace</p>
Reset werna
Reset warna teks utawa link nganggo .text-reset
, supaya warna kasebut diwenehi warisan saka wong tuwa.
Teks bisu kanthi link reset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Dekorasi teks
Dekorasi teks ing komponen kanthi kelas dekorasi teks.
Teks iki ana garis ing ngisore.
Teks iki nduweni garis sing ngliwati.
Link iki wis dibusak dekorasi teks<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
Variabel
// 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;
Peta
Utilitas ukuran font digawe saka peta iki, kanthi kombinasi karo API utilitas.
$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
Utilitas font lan teks diumumake ing API utilitas ing scss/_utilities.scss
. Sinau carane nggunakake API keperluan.
"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
),