Metin
Hizalama, sarma, ağırlık ve daha fazlasını denetlemek için yaygın metin yardımcı programlarına ilişkin belgeler ve örnekler.
Metin hizalama
Metin hizalama sınıflarıyla metni bileşenlere kolayca yeniden hizalayın. Başlangıç, bitiş ve merkez hizalaması için, ızgara sistemiyle aynı görünüm alanı genişliği kesme noktalarını kullanan duyarlı sınıflar mevcuttur.
Tüm görüntü alanı boyutlarında hizalanmış metni başlatın.
Tüm görüntü alanı boyutlarında ortalanmış metin.
Tüm görüntü alanı boyutlarında hizalanmış metni sonlandırın.
SM (küçük) veya daha geniş görünüm alanlarında hizalanmış metni başlatın.
MD (orta) veya daha geniş görünüm pencerelerinde hizalanmış metni başlatın.
LG (büyük) veya daha geniş görünüm pencerelerinde hizalanmış metni başlatın.
XL (ekstra büyük) veya daha geniş görünüm pencerelerinde hizalanmış metni başlatın.
<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>Metin kaydırma ve taşma
Metni bir .text-wrapsınıfla sarın.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Metnin bir .text-nowrapsınıfla sarılmasını önleyin.
<div class="text-nowrap bg-light border" style="width: 8rem;">
This text should overflow the parent.
</div>kelime sonu
Uzun metin dizelerinin bileşenlerinizin düzenini bozmasını .text-breakto set word-wrap: break-wordve kullanarak önleyin word-break: break-word. Daha geniş tarayıcı desteği için word-wrapdaha yaygın olanı yerine kullanıyoruz ve esnek kapsayıcılarla ilgili sorunları önlemek için kullanımdan kaldırılanları ekledik.overflow-wrapword-break: break-word
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-break, RTL derlenmiş CSS'mizden kaldırılmıştır.
Metin dönüştürme
Metin büyük harf sınıfları ile bileşenlerdeki metni dönüştürün.
Küçük harfli metin.
Büyük harfli metin.
CapiTaliZed metin.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>.text-capitalizeHer kelimenin yalnızca ilk harfinin nasıl değiştirildiğini ve diğer harflerin etkilenmediğini unutmayın.
Yazı Boyutu
font-sizeMetni hızla değiştirin . Başlık sınıflarımız (örneğin, .h1– .h6) uygulanırken font-size, font-weightve line-height, bu yardımcı programlar yalnızca geçerlidir font-size. Bu yardımcı programlar için boyutlandırma, HTML'nin başlık öğeleriyle eşleşir, bu nedenle sayı arttıkça boyutları küçülür.
.fs-1 metni
.fs-2 metni
.fs-3 metni
.fs-4 metni
.fs-5 metni
.fs-6 metni
<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 haritasını font-sizedeğiştirerek mevcut s'lerinizi özelleştirin .$font-sizes
Yazı tipi ağırlığı ve italik
Bu yardımcı programlarla metnin font-weightveya metnini hızla değiştirin . yardımcı programlar olarak kısaltılır ve yardımcı programlar olarak kısaltılır .font-stylefont-style.fst-*font-weight.fw-*
Kalın yazı.
Daha kalın ağırlıklı metin (ana öğeye göre).
Yarım kalın ağırlık metni.
Normal ağırlık metni.
Hafif metin.
Daha hafif metin (ana öğeye göre).
İtalik metin.
Normal yazı tipi stiline sahip metin
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</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>Satır yüksekliği
.lh-*Yardımcı programlarla satır yüksekliğini değiştirin .
Bu, bir öğenin satır yüksekliğinin yardımcı programlarımızdan nasıl etkilendiğini göstermek için yazılmış uzun bir paragraftır. Sınıflar, öğenin kendisine veya bazen ana öğeye uygulanır. Bu sınıflar, yardımcı program API'mızla gerektiği gibi özelleştirilebilir.
Bu, bir öğenin satır yüksekliğinin yardımcı programlarımızdan nasıl etkilendiğini göstermek için yazılmış uzun bir paragraftır. Sınıflar, öğenin kendisine veya bazen ana öğeye uygulanır. Bu sınıflar, yardımcı program API'mızla gerektiği gibi özelleştirilebilir.
Bu, bir öğenin satır yüksekliğinin yardımcı programlarımızdan nasıl etkilendiğini göstermek için yazılmış uzun bir paragraftır. Sınıflar, öğenin kendisine veya bazen ana öğeye uygulanır. Bu sınıflar, yardımcı program API'mızla gerektiği gibi özelleştirilebilir.
Bu, bir öğenin satır yüksekliğinin yardımcı programlarımızdan nasıl etkilendiğini göstermek için yazılmış uzun bir paragraftır. Sınıflar, öğenin kendisine veya bazen ana öğeye uygulanır. Bu sınıflar, yardımcı program API'mızla gerektiği gibi özelleştirilebilir.
<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
Bir seçimi tek aralıklı yazı tipi yığınımıza ile değiştirin .font-monospace.
Bu tek uzayda
<p class="font-monospace">This is in monospace</p>Rengi sıfırla
Bir metnin veya bağlantının rengini ile sıfırlayın .text-reset, böylece rengi üst öğesinden devralır.
Sıfırlama bağlantısı olan sessiz metin .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Metin dekorasyonu
Metin dekorasyon sınıfları ile bileşenlerdeki metni süsleyin.
Bu metnin altında bir satır var.
Bu metnin içinden geçen bir çizgi var.
Bu bağlantının metin dekorasyonu kaldırıldı<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>küstah
Değişkenler
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, 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(--#{$prefix}font-sans-serif);
$font-family-code: var(--#{$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-semibold: 600;
$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;
Haritalar
Yazı tipi boyutu yardımcı programları, yardımcı program API'mızla birlikte bu haritadan oluşturulur.
$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
);
Yardımcı Programlar API'sı
Yazı tipi ve metin yardımcı programları, yardımcı program API'mizde scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$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,
semibold: $font-weight-semibold,
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
),