Teks
Dokumentasi dan contoh untuk utilitas teks umum untuk mengontrol perataan, pembungkusan, bobot, dan lainnya.
Perataan teks
Sejajarkan kembali teks dengan mudah ke komponen dengan kelas perataan teks. Untuk perataan awal, akhir, dan tengah, tersedia kelas responsif yang menggunakan titik putus lebar area pandang yang sama dengan sistem kisi.
Mulai teks rata pada semua ukuran viewport.
Teks rata tengah pada semua ukuran viewport.
Akhiri teks rata pada semua ukuran viewport.
Mulai teks rata pada area pandang berukuran SM (kecil) atau lebih lebar.
Mulai teks rata pada area pandang berukuran MD (sedang) atau lebih lebar.
Mulai teks rata pada area pandang berukuran LG (besar) atau lebih lebar.
Mulai teks rata pada area pandang berukuran XL (ekstra besar) atau lebih lebar.
<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>
Pembungkus dan luapan teks
Bungkus teks dengan .text-wrap
kelas.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Cegah teks agar tidak dibungkus dengan .text-nowrap
kelas.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Istirahat kata
Cegah string teks yang panjang agar tidak merusak tata letak komponen Anda dengan menggunakan .text-break
to set word-wrap: break-word
dan word-break: break-word
. Kami menggunakan word-wrap
alih-alih yang lebih umum overflow-wrap
untuk dukungan browser yang lebih luas, dan menambahkan yang tidak digunakan lagi word-break: break-word
untuk menghindari masalah dengan wadah fleksibel.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
itu dihapus dari CSS terkompilasi RTL kami.
Transformasi teks
Transformasi teks dalam komponen dengan kelas kapitalisasi teks.
Teks dengan huruf kecil.
Teks dengan huruf besar.
Teks CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Perhatikan bagaimana .text-capitalize
hanya mengubah huruf pertama dari setiap kata, membiarkan huruf besar dari huruf lain tidak terpengaruh.
Ukuran huruf
Cepat mengubah font-size
teks. Sementara kelas heading kami (misalnya, .h1
– .h6
) berlaku font-size
, font-weight
, dan line-height
, utilitas ini hanya berlaku font-size
. Ukuran untuk utilitas ini cocok dengan elemen heading HTML, sehingga saat jumlahnya bertambah, ukurannya berkurang.
.fs-1 teks
.fs-2 teks
teks .fs-3
teks .fs-4
.fs-5 teks
teks .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>
Sesuaikan font-size
s yang tersedia dengan memodifikasi $font-sizes
peta Sass.
Berat font dan miring
Ubah font-weight
atau font-style
teks dengan cepat dengan utilitas ini. font-style
utilitas disingkat sebagai .fst-*
dan font-weight
utilitas disingkat .fw-*
.
Teks tebal.
Teks dengan bobot lebih tebal (relatif terhadap elemen induk).
Teks berat normal.
Teks ringan.
Teks dengan bobot lebih ringan (relatif terhadap elemen induk).
Teks miring.
Teks dengan 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>
Tinggi garis
Ubah ketinggian garis dengan .lh-*
utilitas.
Ini adalah paragraf panjang yang ditulis untuk menunjukkan bagaimana tinggi garis suatu elemen dipengaruhi oleh utilitas kita. Kelas diterapkan pada elemen itu sendiri atau terkadang elemen induk. Kelas-kelas ini dapat dikustomisasi sesuai kebutuhan dengan API utilitas kami.
Ini adalah paragraf panjang yang ditulis untuk menunjukkan bagaimana tinggi garis suatu elemen dipengaruhi oleh utilitas kita. Kelas diterapkan pada elemen itu sendiri atau terkadang elemen induk. Kelas-kelas ini dapat dikustomisasi sesuai kebutuhan dengan API utilitas kami.
Ini adalah paragraf panjang yang ditulis untuk menunjukkan bagaimana tinggi garis suatu elemen dipengaruhi oleh utilitas kita. Kelas diterapkan pada elemen itu sendiri atau terkadang elemen induk. Kelas-kelas ini dapat dikustomisasi sesuai kebutuhan dengan API utilitas kami.
Ini adalah paragraf panjang yang ditulis untuk menunjukkan bagaimana tinggi garis suatu elemen dipengaruhi oleh utilitas kita. Kelas diterapkan pada elemen itu sendiri atau terkadang elemen induk. Kelas-kelas ini dapat dikustomisasi sesuai kebutuhan dengan API utilitas kami.
<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
Ubah pilihan ke tumpukan font monospace kami dengan .font-monospace
.
Ini di monospace
<p class="font-monospace">This is in monospace</p>
Setel ulang warna
Setel ulang teks atau warna tautan dengan .text-reset
, sehingga mewarisi warna dari induknya.
Teks yang dibisukan dengan tautan setel ulang .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Dekorasi teks
Hiasi teks dalam komponen dengan kelas dekorasi teks.
Teks ini memiliki garis di bawahnya.
Teks ini memiliki garis yang melewatinya.
Tautan ini menghapus dekorasi teksnya<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>
Kelancangan
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 dihasilkan dari peta ini, dikombinasikan dengan API utilitas kami.
$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 Utilitas
Utilitas font dan teks dideklarasikan di API utilitas kami di scss/_utilities.scss
. Pelajari cara menggunakan API utilitas.
"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
),