Source

tipografi

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

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ı varsayılan kökünü (genellikle 16 piksel) varsayıyoruz.
öğesine uygulanan tipografik tabanımız olarak $font-family-base, $font-size-baseve niteliklerini kullanın .$line-height-base<body>
Genel bağlantı rengini şu şekilde ayarlayın $link-colorve bağlantı alt çizgilerini yalnızca üzerinde uygulayın :hover.
( 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ığı

<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

<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

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

Öncülük etmek

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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şlenecek

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.

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

.markve sınıflar , etiketlerin getireceği istenmeyen anlamsal çıkarımlardan kaçınırken ve .smallbunlarla aynı stilleri uygulamak için de mevcuttur .<mark><small>

<b>Yukarıda gösterilmese de <i>HTML5'te kullanmaktan çekinmeyin . çoğunlukla ses, teknik terimler vb. için <b>ek bir önem taşımadan kelimeleri veya cümleleri vurgulamak içindir .<i>

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ığı 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

<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. Alıntı olarak <blockquote class="blockquote">herhangi bir HTML'yi sarın .

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Bir kaynağı adlandırma

<footer class="blockquote-footer">Kaynağı tanımlamak için bir ekleyin . Kaynak çalışmanın adını içine sarın <cite>.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

hizalama

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

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa'da tamsayı molestie lorem
Pretium nisl aliquet'te facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor ilmi

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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.

lorem ipsum
Phasellus iaculis
boş volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id, eget metus'ta elit olmayan porta gravida.

Malesuada limanı

Etiam porta sem maleuada magna mollis euismod.

Kesilen terim kısaltılır

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

yuvalama

İç içe tanım listesi: Aenean pozu, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Duyarlı tipografi

Duyarlı tipografifont-size , bir dizi medya sorgusu içindeki kök öğeyi basitçe ayarlayarak metni ve bileşenleri ölçeklendirmeyi ifade eder . Bootstrap bunu sizin için yapmaz, ancak ihtiyacınız olursa eklemek oldukça kolaydır.

İşte pratikte bir örneği. Dilediğiniz font-sizes ve medya sorgularını seçin.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}