Bootstrap Reboot ve Tipografi: Başlıklar, Display, Lead, Liste ve Alıntı Sınıfları

Reboot nedir, nasıl çalışır?

Reboot, Normalize üzerine kurulu ve yalnızca öğe seçicileri kullanan bir kural kümesidir. Belgelere göre bazı HTML öğelerine biraz "fikir sahibi" varsayılanlar verir; ek görünümler ise yalnızca sınıflarla gelir. Örneğin <table> için sade bir temel tanımlanır, kenarlıklı ve çizgili tablo görünümü ise .table ve .table-bordered gibi sınıflara bırakılır. Ekip, Reboot'ta neyi ezeceğine dört ilkeyle karar verir:

• Bazı tarayıcı varsayılanlarını em yerine ölçeklenebilir rem birimine çevirmek.
• margin-top kullanmamak: dikey boşluklar çakışabilir ve tek yönlü boşluk zihinsel olarak daha basittir.
• Cihaz boyutları arasında kolay ölçeklenmesi için blok öğelerin boşluklarında rem kullanmak.
• Yazı tipi özelliklerini en azda tutmak, mümkün olduğunda inherit kullanmak.

Sayfa geneli varsayılanlar

Reboot, *, *::before ve *::after dahil her öğede box-sizing: border-box uygular; böylece dolgu ve kenarlık bildirdiğiniz genişliği aşmaz. <html> öğesine taban yazı boyutu verilmez, tarayıcının varsayılanı olan 16px kabul edilir. <body> ise font-size: 1rem alır; belgelere göre bu, kullanıcının tarayıcı tercihine saygı gösteren ve medya sorgularıyla kolay ölçeklenen daha erişilebilir bir yaklaşımdır. Tarayıcı varsayılanını değiştirmek isterseniz $font-size-root değişkenini kullanırsınız. Gövde ayrıca genel yazı tipi ailesini, kalınlığı, satır yüksekliğini ve rengi belirler; bazı form öğeleri bunları sonradan devralır. Güvenlik için gövdeye varsayılanı #fff olan bir arka plan rengi de verilir. v5.0.2 derlenmiş CSS dosyasında gövde kuralı 16px tabanla font-size: 1rem, font-weight: 400, line-height: 1.5 ve color: #212529 değerlerini içerir.

Sistem yazı tipi yığını

Bootstrap, her cihazda ve işletim sisteminde iyi görüntülenmesi için "native font stack" denen bir sistem yazı tipi listesi kullanır. v5.0.2'deki $font-family-sans-serif değişkeni system-ui ile başlar; ardından Apple cihazları için -apple-system, Windows için "Segoe UI", Android için Roboto, genel yedekler olarak "Helvetica Neue" ve Arial, Linux için "Noto Sans" ve "Liberation Sans", en sonda da sans-serif ve emoji yazı tipleri gelir. Liste derlenmiş CSS'te --bs-font-sans-serif değişkenine yazılır ve gövde bu değişkeni kullanır.

Belgeler bir ayrıntıya dikkat çeker: yığında emoji yazı tipleri bulunduğu için bazı yaygın sembol karakterleri renkli resimcikler olarak görünebilir ve CSS color değerinden etkilenmez. Genel yazı tipini değiştirmek için $font-family-base değişkenini güncelleyip Bootstrap'i yeniden derlemeniz gerekir; yöntem Sass ile özelleştirme yazısında.

Başlıklar, paragraflar ve listeler

Tüm başlıkların ve paragrafların üst boşluğu kaldırılır. Başlıklara margin-bottom: .5rem, paragraflara margin-bottom: 1rem verilir. <ul>, <ol> ve <dl> listelerinin üst boşluğu sıfırlanır, alt boşluğu 1rem olur; iç içe listelerin alt boşluğu yoktur. Geçiş belgesine göre v5'te <ul> ve <ol> öğelerinin sol dolgusu tarayıcı varsayılanı olan 40px yerine 2rem yapıldı. Tanım listelerinde <dd> sol boşluğu 0 olur ve .5rem alt boşluk alır, <dt> ise kalın yazılır.

Kod, değişken, klavye ve örnek çıktı

Satır içi kod parçaları için <code>, çok satırlı kod için <pre> kullanılır; iki durumda da açılı ayraçları kaçışlamanız gerekir. <pre> öğesinin üst boşluğu kaldırılır ve alt boşluğu rem ile verilir. Matematiksel ya da programlama değişkenleri için <var>, klavyeden girilen metin için <kbd>, bir programın örnek çıktısı için <samp> önerilir. Derlenmiş CSS'te kbd koyu arka planlı ve beyaz yazılı küçük bir kutu olarak, code ise 0.875em boyutunda ve pembe tonlu bir renkle tanımlanır.

<p>Satır içi kod: <code>&lt;section&gt;</code> öğesini kaçışlayarak yazın.</p>
<pre><code>&lt;p&gt;Birinci satır&lt;/p&gt;
&lt;p&gt;İkinci satır&lt;/p&gt;
</code></pre>
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
<p>Ayarları açmak için <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> tuşlarına basın.</p>
<p><samp>Derleme tamamlandı.</samp></p>
<span role="button" tabindex="0">Düğme gibi davranan span</span>

Son satırdaki role="button", Reboot'un küçük bir eklentisini gösterir: bu rolü taşıyan öğelerde imleç pointer olur. <button> öğeleri için bu rol gerekmez, çünkü onlar imleç değişikliğini zaten alır. Rolün erişilebilirlik tarafı ARIA rolleri ve öznitelikleri yazısında.

Tablolar, formlar ve diğer öğeler

Tablolarda <caption> stillenir, kenarlıklar birleştirilir ve text-align tutarlı hâle getirilir; asıl tablo görünümü Bootstrap tablo sınıfları yazısındaki .table sınıfıyla gelir. Formlarda <fieldset> kenarlık, dolgu ve boşluktan arındırılır; <legend> bir tür başlık gibi gösterilir; <label> boşluk verilebilmesi için display: inline-block olur. <textarea> yatay boyutlandırma sayfa düzenini bozabildiği için yalnızca dikey yönde boyutlandırılabilir. <button> ve düğme türündeki <input> öğeleri devre dışı değilken cursor: pointer alır. Form denetimlerinin asıl stilleri form-control ve input stilleri yazısında.

<address> öğesinin italik varsayılanı normale çekilir ve 1rem alt boşluk alır. <blockquote> öğesinin tarayıcı varsayılanı olan 1em 40px boşluk, diğer öğelerle tutarlı olsun diye 0 0 1rem yapılır. <abbr> noktalı alt çizgi ve yardım imleci alır, <summary> ise tıklanabilir olduğunu belirtmek için pointer imleci kullanır.

hidden özniteliği

HTML'deki genel hidden özniteliği varsayılan olarak display: none ile gizlenir. Reboot bu kuralı [hidden] { display: none !important; } yaparak yanlışlıkla ezilmesini zorlaştırır. Belgeler bunun jQuery'nin .hide() ve .show() yöntemleriyle uyumsuz olduğunu not eder. Bir öğeyi düzende yerini koruyarak yalnızca görünmez yapmak istiyorsanız .invisible sınıfını kullanın; görünürlük sınıfları display ve visibility yazısında.

Başlıklar ve .h1 ile .h6 sınıfları

Tipografi sayfası <h1> ile <h6> arasındaki tüm başlıkları stiller. Bir öğenin görünüşünü başlık gibi yapmak ama ilgili başlık öğesini kullanamamak durumunda .h1 ile .h6 arasındaki sınıflar aynı yazı stilini verir. Bu ayrım önemlidir: başlık seviyesi belgenin yapısını, sınıf ise yalnızca görünüşü belirler. Bootstrap 3'teki küçük ikincil başlık metnini <small class="text-muted"> ile yeniden oluşturabilirsiniz.

<h1>h1. Bootstrap başlığı</h1>
<h2>h2. Bootstrap başlığı</h2>
<h3>
  Ürün kataloğu
  <small class="text-muted">2026 sonbahar</small>
</h3>
<p class="h4">Görünüşü h4, anlamı paragraf</p>

Başlık boyutları _variables.scss içinde $font-size-base ile orantılı tanımlanır: h1 için 2.5 kat, h2 için 2, h3 için 1.75, h4 için 1.5, h5 için 1.25 ve h6 için 1 kat. Bootstrap 5'te Duyarlı Yazı Boyutları (RFS) varsayılan olarak açık olduğu için büyük başlıklar dar ekranda küçülür. Bootstrap 5.0.2 derlenmiş CSS dosyasında başlık kuralları şöyle tanımlıdır:

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

1200px ve üstünde h1 tam 2.5rem olur; daha dar ekranlarda calc(1.375rem + 1.5vw) değeri ekran genişliğine göre küçülür. h5 ve h6 gibi küçük başlıklar sabit kalır, çünkü RFS yeterince küçük değerleri yeniden ölçeklemez. RFS'nin ayrıntıları ve kapatılması enable seçenekleri, CSS değişkenleri ve RFS yazısında.

Display başlıkları ve lead paragrafı

Normal başlıklar sayfa içeriğinin içinde iyi çalışacak şekilde tasarlanmıştır. Bir başlığın gerçekten öne çıkması gerektiğinde daha büyük ve daha ince olan display başlıklarını kullanırsınız. Altı boyut vardır: .display-1 için 5rem, .display-2 için 4.5rem, sırasıyla 4rem, 3.5rem, 3rem ve .display-6 için 2.5rem. Hepsi 300 kalınlığında ve başlıklarla aynı 1.2 satır yüksekliğindedir; bu boyutlara da RFS uygulanır, örneğin .display-1 1200px altında calc(1.625rem + 4.5vw) olur. Geçiş belgesine göre .display-5 ve .display-6 v5'te eklendi ve display değişkenleri tek bir $display-font-sizes map'inde toplandı.

Bir paragrafı çevresindekilerden ayırmak için .lead sınıfı yeterlidir. Derlenmiş CSS'te bu sınıf font-size: 1.25rem ve font-weight: 300 değerlerinden ibarettir; giriş metinleri ve sayfa özetleri için uygundur.

<h1 class="display-4">Kampanya başlığı</h1>
<p class="lead">
  Lead paragrafı, normal paragraflardan daha büyük ve daha ince yazılır.
</p>
<p>Bu ise sıradan bir paragraf.</p>

Satır içi metin öğeleri

Tipografi sayfası yaygın HTML5 satır içi öğelerini bir arada gösterir: <mark>, <del>, <s>, <ins>, <u>, <small> ve <strong>. Derlenmiş CSS'te mark 0.2em dolgu ve #fcf8e3 açık sarı arka plan alır, small ise metni 0.875em boyutuna indirir. Belgeler bu öğelerin anlam için kullanılması gerektiğini vurgular: <mark> başvuru amacıyla işaretlenmiş metni, <small> telif ve yasal metin gibi yan notları, <s> artık geçerli olmayan bilgiyi, <u> ise metin dışı bir açıklaması olan bir aralığı temsil eder.

Yalnızca görünüşü istiyorsanız anlam taşımayan sınıfları kullanın: .mark mark görünümünü, .small small görünümünü, .text-decoration-underline altı çizili görünümü, .text-decoration-line-through ise üstü çizili görünümü verir. HTML5'te <b> ek önem taşımadan sözcükleri öne çıkarmak, <i> ise ses tonu ve teknik terimler gibi durumlar içindir. Kısaltmalar için <abbr> ve title özniteliği, fareyle üzerine gelindiğinde açık hâli gösterir; .initialism sınıfı yazıyı biraz küçültür ve büyük harfe çevirir.

<p>Aradığınız sözcüğü <mark>vurgulamak</mark> için mark kullanın.</p>
<p><del>Bu satır silinmiş metin olarak işaretlendi.</del></p>
<p><s>Bu bilgi artık geçerli değil.</s></p>
<p><ins>Bu satır belgeye sonradan eklendi.</ins></p>
<p><small>Bu satır dipnot ya da küçük yazı niteliğinde.</small></p>
<p><strong>Bu satır önemli.</strong></p>
<p class="mark">Anlam katmadan mark görünümü.</p>
<p class="small">Anlam katmadan small görünümü.</p>
<p class="text-decoration-line-through">Anlam katmadan üstü çizili görünüm.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> ve <abbr title="Cascading Style Sheets">CSS</abbr></p>

Alıntılar

Başka bir kaynaktan alınan içerik blokları için <blockquote class="blockquote"> kullanılır; sınıf yazı boyutunu 1.25rem yapar ve alt boşluk ekler. Belgelere göre HTML belirtimi, alıntının sahibinin <blockquote> dışında belirtilmesini ister. Bu yüzden alıntıyı bir <figure> içine alır, kaynağı <figcaption class="blockquote-footer"> ile yazar ve eserin adını <cite> içine koyarsınız. .blockquote-footer küçük ve gri yazılır, derlenmiş CSS de önüne bir uzun tire ekler. Hizalamayı text-center veya text-end gibi metin yardımcılarıyla değiştirirsiniz.

<figure class="text-center">
  <blockquote class="blockquote">
    <p>İyi bir arayüz, kullanıcının ne yapacağını düşünmesine gerek bırakmaz.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Bir tasarımcı, <cite title="Kaynak eser">Kaynak eser</cite>
  </figcaption>
</figure>

Liste sınıfları

.list-unstyled, listenin madde işaretlerini ve sol dolgusunu kaldırır. Belgelerin vurguladığı kritik nokta, bu sınıfın yalnızca doğrudan alt öğelere etki etmesidir; iç içe listede alt listeye de sınıfı eklemeniz gerekir. .list-inline ile .list-inline-item birlikte kullanıldığında öğeler yan yana dizilir; derlenmiş CSS'te son öğe hariç her öğeye margin-right: 0.5rem verilir. Tanım listelerinde terim ve açıklamayı yan yana hizalamak için grid sınıflarını kullanabilirsiniz; uzun terimleri .text-truncate ile üç noktayla kırpabilirsiniz. Grid sınıflarının kendisi grid sistemi yazısında.

<ul class="list-unstyled">
  <li>Madde işareti olmayan liste</li>
  <li>İç içe liste:
    <ul>
      <li>bu alt liste etkilenmez, madde işareti görünür</li>
    </ul>
  </li>
</ul>
<ul class="list-inline">
  <li class="list-inline-item">Ana sayfa</li>
  <li class="list-inline-item">Ürünler</li>
  <li class="list-inline-item">İletişim</li>
</ul>
<dl class="row">
  <dt class="col-sm-3">Teslimat</dt>
  <dd class="col-sm-9">Siparişten sonraki iş günü kargoya verilir.</dd>
  <dt class="col-sm-3 text-truncate">Uzun bir terim adı kırpılarak gösterilir</dt>
  <dd class="col-sm-9">text-truncate sığmayan metni üç noktayla bitirir.</dd>
</dl>

Tipografi Sass değişkenleri

Tipografinin temel ayarları _variables.scss dosyasındadır, kuralların kendisi _reboot.scss ve _type.scss dosyalarında. Belgeler $font-size-base değerini rem cinsinden tanımlamanızı ister. İlgili değişkenlerin v5.0.2'deki varsayılan hâli şöyledir:

$font-size-base:              1rem !default; // Tarayıcı varsayılanını, genellikle 16px, varsayar
$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;

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

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

Başlıkların kalınlığı $headings-font-weight (500), satır yüksekliği $headings-line-height (1.2) ve alt boşluğu $headings-margin-bottom ile ayarlanır. Genel bağlantı rengi $link-color, gövde arka planı $body-bg ile değişir. Tipografi için ayrı mixin yoktur, ancak boyutlar RFS mixin'i üzerinden üretilir. Bu değişkenleri kendi dosyanızda nasıl ezeceğiniz Sass ile özelleştirme yazısında anlatılıyor.

Sık yapılan hatalar

• Görünüş için başlık seviyesi seçmek: Küçük görünsün diye <h4> kullanmak belgenin yapısını bozar. Doğru seviyeyi kullanıp görünüşü .h4 gibi bir sınıfla ayarlayın.
• list-unstyled'ın iç listeleri de etkileyeceğini sanmak: Sınıf yalnızca doğrudan alt öğeleri etkiler.
• Paragraflar arasına üst boşluk eklemeye çalışmak: Reboot tek yönlü boşluk kullanır; boşluğu alt tarafta düşünün ya da margin ve padding sınıflarını kullanın.
• Kaynağı blockquote içine yazmak: Belgeler kaynağın alıntı öğesinin dışında, figcaption ile verilmesini önerir.
• Yazı tipini her öğede ayrı ayrı değiştirmek: Genel yazı tipi gövdeden devralınır; Sass kullanıyorsanız $font-family-base değişkenini değiştirin.
• Display ve başlıkların her ekranda aynı boyutta olmasını beklemek: RFS açık olduğu için 1200px altında boyutlar küçülür.

Sık Sorulan Sorular

Reboot ile Normalize arasındaki fark nedir?

Reboot, Normalize'ın üzerine kuruludur. Tarayıcı farklarını gidermenin yanında başlık ve paragraf boşlukları, yazı tipi yığını ve form öğeleri için biraz daha kişisel varsayılanlar ekler. Yalnızca öğe seçicileri kullanır, ek görünümleri sınıflara bırakır.

Yalnızca Reboot'u kullanabilir miyim?

Evet. Derlenmiş paketteki bootstrap-reboot.css yalnızca Reboot kurallarını içerir. Grid, bileşen ve yardımcı sınıflar bu dosyada yoktur.

Display başlıkları hangi öğeye eklenmeli?

Belgelerdeki örnekler .display-* sınıflarını <h1> öğelerine ekler, ancak sınıf her öğeye eklenebilir. Anlam açısından öğeyi belgenin yapısına göre, sınıfı görünüşe göre seçin.

Taban yazı boyutunu nasıl değiştiririm?

Sass ile $font-size-root kökteki boyutu, dolayısıyla tüm rem değerlerini; $font-size-base ise gövde metninin boyutunu etkiler. Derlenmiş CSS kullanıyorsanız kendi stil dosyanızda body kuralını ezebilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap text sınıfları · Bootstrap CSS değişkenleri ve RFS · Bootstrap CDN kurulumu · HTML öğrenme rehberi