tipografi
Genel ayarlar, başlıklar, gövde metni, listeler ve daha fazlası dahil olmak üzere Bootstrap tipografisi için belgeler ve örnekler.
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-size
ziyaretç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) varsayıyoruz. - öğesine uygulanan tipografik tabanımız olarak
$font-family-base
,$font-size-base
ve niteliklerini kullanın .$line-height-base
<body>
- Genel bağlantı rengini aracılığıyla ayarlayın
$link-color
ve bağlantı alt çizgilerini yalnızca üzerinde uygulayın:hover
. - ( varsayılan olarak) üzerinde
$body-bg
bir ayarlamak için kullanın .background-color
<body>
#fff
Bu stiller içinde bulunabilir _reboot.scss
ve global değişkenler içinde tanımlanır _variables.scss
. $font-size-base
yerleştirdiğinizden emin olun rem
.
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
.h6
Bir 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ığı
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.
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 |
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.
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.
.mark
ve sınıflar , etiketlerin getireceği istenmeyen anlamsal çıkarımlardan kaçınırken ve .small
bunlarla 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ımız ve renk yardımcı programlarımızla metin hizalamasını, dönüştürmeyi, stili, ağırlığı ve rengi değiştirin .
<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.
.initialism
Biraz daha küçük yazı tipi boyutu için bir kısaltma ekleyin .
attr
HTML
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.
<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.
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.
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.
Liste öğelerindeki varsayılan list-style
ve 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
Bir listenin madde işaretlerini kaldırın ve margin
iki sınıfın bir kombinasyonu ile biraz ışık uygulayın .list-inline
ve .list-inline-item
.
- lorem ipsum
- Phasellus iaculis
- boş volutpat
Izgara sistemimizin önceden tanımlanmış sınıflarını (veya anlamsal karışımlarını) kullanarak terimleri ve açıklamaları yatay olarak hizalayın. .text-truncate
Daha 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.
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-size
s ve medya sorgularını seçin.