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.

Bu sayfada

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>

Yaslanmış metin için yardımcı program sınıfları sağlamadığımızı unutmayın. Estetik olarak iki yana yaslanmış metin daha çekici görünse de, sözcük aralığını daha rastgele ve dolayısıyla okumayı zorlaştırır.

Metin kaydırma ve taşma

Metni bir .text-wrapsınıfla sarın.

Bu metin sarılmalıdır.

<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.

Bu metin ebeveyni taşmalıdır.

<div class="text-nowrap bd-highlight" 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>

En çok kullanılan RTL dili olan Arapça'da kelimeleri kırmanın mümkün olmadığını unutmayın . Bu nedenle .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).

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-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.

<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", 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;

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(--#{$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
    ),