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 kapsamlı 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> - 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. 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.
Bu bir ana paragraftır. Normal paragraflardan sıyrılıyor.
<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ş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 .
Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</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>.
Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</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.
Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</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 acil çocuklar). Bu, yalnızca acil alt liste öğeleri için geçerlidir , yani tüm iç içe listeler için de sınıfı 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.
<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.
<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.
<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ı
v4.3.0'dan itibaren Bootstrap, duyarlı yazı tipi boyutlarını etkinleştirme seçeneğiyle birlikte gelir ve metnin aygıt ve görünüm 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 .