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. Ö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ığı |
<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. Bu başlıkların varsayılan olarak duyarlı olmadığını, ancak duyarlı yazı tipi boyutlarını etkinleştirmenin mümkün olduğunu unutmayı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.
<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.
<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.
<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ı yazı tipi boyutları
Bootstrap v4.3, duyarlı yazı tipi boyutlarını etkinleştirme seçeneğiyle birlikte gelir ve metnin aygıt ve görüntü alanı boyutları arasında daha doğal bir şekilde ölçeklenmesini sağlar. RFS$enable-responsive-font-sizes , Sass değişkeni olarak değiştirilerek trueve Bootstrap yeniden derlenerek etkinleştirilebilir .
RFS'yi desteklemek için normal font-sizeözelliklerimizi değiştirmek için bir Sass karışımı kullanıyoruz . Duyarlı yazı tipi boyutları , duyarlı ölçekleme davranışını etkinleştirmek için ve görünüm calc()alanı birimlerinin bir karışımıyla işlevler halinde derlenecektir . RFS ve yapılandırması remhakkında daha fazla bilgiyi GitHub deposunda bulabilirsiniz .