in English

tipografi

Genel ayarlar, başlıklar, gövde metni, listeler ve daha fazlası dahil olmak üzere Bootstrap tipografisi için belgeler ve örnekler.

Bu sayfada

Genel Ayarlar

Bootstrap, temel genel görüntüleme, tipografi ve bağlantı stillerini ayarlar. Daha fazla kontrol gerektiğinde, metinsel yardımcı program sınıflarına bakın .

Her işletim sistemi ve cihaz için en iyisini seçen yerel bir yazı tipi yığını kullanın .font-family
Daha kapsayıcı ve erişilebilir bir tür ölçeği için, font-sizeziyaretçilerin tarayıcı varsayılanlarını gerektiği gibi özelleştirebilmeleri için tarayıcının varsayılan kökünü (genellikle 16 piksel) kullanırız.
öğesine uygulanan tipografik tabanımız olarak $font-family-base, $font-size-baseve niteliklerini kullanın .$line-height-base<body>
Global bağlantı rengini ile ayarlayın $link-color.
( varsayılan olarak) üzerinde $body-bgbir ayarlamak için kullanın .background-color<body>#fff

Bu stiller içinde bulunabilir _reboot.scssve genel değişkenler içinde tanımlanır _variables.scss. $font-size-baseyerleştirdiğinizden emin olun rem.

Başlıklar

Tüm HTML başlıkları, <h1>aracılığıyla <h6>kullanılabilir.

Başlık	Örnek
`<h1></h1>`	h1. Önyükleme başlığı
`<h2></h2>`	h2. Önyükleme başlığı
`<h3></h3>`	h3. Önyükleme başlığı
`<h4></h4>`	h4. Önyükleme başlığı
`<h5></h5>`	h5. Önyükleme başlığı
`<h6></h6>`	h6. Önyükleme başlığı

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1.h6Bir başlığın yazı tipi stilini eşleştirmek istediğiniz ancak ilişkili HTML öğesini kullanamadığınız durumlar için sınıflar aracılığıyla da mevcuttur.

h1. Önyükleme başlığı

h2. Önyükleme başlığı

h3. Önyükleme başlığı

h4. Önyükleme başlığı

h5. Önyükleme başlığı

h6. Önyükleme başlığı

html

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Başlıkları özelleştirme

Bootstrap 3'ten küçük ikincil başlık metnini yeniden oluşturmak için dahil edilen yardımcı program sınıflarını kullanın.

Süslü ekran başlığı Soluk ikincil metinle

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Başlıkları göster

Geleneksel başlık öğeleri, sayfa içeriğinizin özünde en iyi sonucu verecek şekilde tasarlanmıştır. Öne çıkmak için bir başlığa ihtiyacınız olduğunda , daha büyük, biraz daha fazla düşünülmüş bir başlık stili olan bir ekran başlığı kullanmayı düşünün.

Ekran 1

Ekran 2

Ekran 3

Ekran 4

Ekran 5

Ekran 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

$display-font-sizesGörüntü başlıkları, Sass haritası ve iki değişken aracılığıyla yapılandırılır $display-font-weightve $display-line-height.

Görüntü başlıkları iki değişken aracılığıyla özelleştirilebilir $display-font-familyve $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Öncülük etmek

Ekleyerek bir paragrafın öne çıkmasını sağlayın .lead.

Bu bir ana paragraftır. Normal paragraflardan sıyrılıyor.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Satır içi metin öğeleri

Ortak satır içi HTML5 öğeleri için stil.

için işaret etiketini kullanabilirsiniz.vurgulamakMetin.

~~Bu metin satırının silinmiş metin olarak ele alınması amaçlanmıştır.~~

~~Bu metin satırının artık doğru olmadığı kabul edilmelidir.~~

Bu metin satırı, belgeye ek olarak ele alınmalıdır.

Bu metin satırı altı çizili olarak işlenecektir.

Bu metin satırı, ince baskı olarak ele alınmalıdır.

Bu satır kalın metin olarak işlendi.

Bu satır italik metin olarak işlendi.

html

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Bu etiketlerin anlamsal amaç için kullanılması gerektiğine dikkat edin:

referans veya gösterim amacıyla işaretlenmiş veya vurgulanmış metni temsil eder.
telif hakkı ve yasal metin gibi yan yorumları ve küçük yazıları temsil eder.
<s>artık alakalı olmayan veya artık doğru olmayan öğeyi temsil eder.
metinsel olmayan bir ek açıklamaya sahip olduğunu gösterecek şekilde işlenmesi gereken bir satır içi metin aralığını temsil eder.

Metninize stil vermek istiyorsanız, bunun yerine aşağıdaki sınıfları kullanmalısınız:

.markile aynı stilleri uygulayacaktır .
.smallile aynı stilleri uygulayacaktır .
.text-decoration-underlineile aynı stilleri uygulayacaktır .
.text-decoration-line-throughile aynı stilleri uygulayacaktır <s>.

Yukarıda gösterilmese de HTML5'te kullanmaktan çekinmeyin . çoğunlukla ses, teknik terimler vb .

Metin yardımcı programları

Metin yardımcı programlarımız ve renk yardımcı programlarımızla metin hizalamasını, dönüştürmeyi, stili, ağırlığı, çizgi yüksekliğini, dekorasyonu ve rengi değiştirin .

Kısaltmalar

<abbr>Fareyle üzerine gelindiğinde genişletilmiş sürümü göstermek için kısaltmalar ve kısaltmalar için HTML öğesinin stilize uygulaması . Kısaltmaların varsayılan bir altı çizili vardır ve vurgulu ve yardımcı teknolojilerin kullanıcılarına ek bağlam sağlamak için bir yardım imleci kazanır.

.initialismBiraz daha küçük yazı tipi boyutu için bir kısaltma ekleyin .

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

blok alıntılar

Belgenizdeki başka bir kaynaktan içerik bloklarını alıntılamak için. <blockquote class="blockquote">Alıntı olarak herhangi bir HTML'yi sarın .

Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Bir kaynağı adlandırma

HTML özelliği, blok alıntı özniteliğinin <blockquote>. Öznitelik sağlarken, kendinizi a'ya sarın <blockquote>ve sınıfla birlikte <figure>a <figcaption>veya blok düzeyinde bir öğe (örn . ) kullanın. Kaynak çalışmanın adını da sardığınızdan emin olun ..blockquote-footer<cite>

Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

hizalama

Blok alıntınızın hizalamasını değiştirmek için metin yardımcı programlarını gerektiği gibi kullanın.

Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Listeler

tarzsız

Liste öğelerindeki varsayılan list-styleve sol kenar boşluğunu kaldırın (yalnızca anlık çocuklar). Bu, yalnızca acil alt liste öğeleri için geçerlidir , yani sınıfı iç içe geçmiş listeler için de eklemeniz gerekir.

Bu bir liste.
Tamamen stilsiz görünüyor.
Yapısal olarak, hala bir liste.
Ancak, bu stil yalnızca doğrudan alt öğeler için geçerlidir.
İç içe listeler:
- bu tarzdan etkilenmez
- hala bir mermi gösterecek
- ve uygun sol kenar boşluğuna sahip
Bu, bazı durumlarda hala kullanışlı olabilir.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Çizgide

Bir listenin madde işaretlerini kaldırın ve marginiki sınıfın bir kombinasyonu ile biraz ışık uygulayın .list-inlineve .list-inline-item.

Bu bir liste öğesidir.
Ve bir tane daha.
Ancak satır içi olarak görüntülenirler.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Açıklama listesi hizalaması

Izgara sistemimizin önceden tanımlanmış sınıflarını (veya anlamsal karışımlarını) kullanarak terimleri ve açıklamaları yatay olarak hizalayın. .text-truncateDaha uzun terimler için, metni üç nokta ile kısaltmak için isteğe bağlı olarak bir sınıf ekleyebilirsiniz .

Açıklama listeleri

Bir açıklama listesi, terimleri tanımlamak için mükemmeldir.

Terim

Terimin tanımı.

Ve biraz daha yer tutucu tanım metni.

Başka bir terim

Bu tanım kısadır, bu nedenle fazladan paragraf veya başka bir şey yoktur.

Kesilen terim kısaltılır

Alan dar olduğunda bu yararlı olabilir. Sonuna bir üç nokta ekler.

yuvalama

İç içe tanım listesi: Tanım listelerini sevdiğini duydum. Tanım listenizin içine bir tanım listesi koyayım.

html

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Duyarlı yazı tipi boyutları

Bootstrap 5'te, varsayılan olarak duyarlı yazı tipi boyutlarını etkinleştirdik ve metnin aygıt ve görüntü alanı boyutları arasında daha doğal bir şekilde ölçeklenmesini sağladık. Bunun nasıl çalıştığını öğrenmek için RFS sayfasına bakın .

küstah

Değişkenler

Başlıklar, boyutlandırma ve aralık için bazı özel değişkenlere sahiptir.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Burada ve Yeniden Başlatma'da ele alınan çeşitli tipografi öğelerinin de özel değişkenleri vardır.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

karışımlar

Tipografi için özel bir karışım yoktur, ancak Bootstrap Duyarlı Yazı Tipi Boyutlandırma (RFS) kullanır .