Bootstrap Typography 1.Bölüm

Evet arkadaşlar. Biraz önceki konumuz biraz daha uzundu hizalama konusu fakat temel olarak yeterli olarak düşünüyorum. Eğer ileri konulara da gerekli olursa anlatırım.

Evet girelim bakalım typography konusunda. Css de .h1,.h2,.h3,.h4,.h5,.h6 olarak tanımlanmıştır. yazı boyutları olarak hazır hızlı değişimi sağlarız. H1 en büyük, H6 da en küçük tagdır. Class olarak tanımlanmaz. Direk "<h1></h1>,<h6></h6>" olarak tanımlanır.



Örnek olarak:

h1. Bootstrap tagı	Semibold 36px
h2. Bootstrap tagı	Semibold 30px
h3. Bootstrap tagı	Semibold 24px
h4. Bootstrap tagı	Semibold 18px
h5. Bootstrap tagı	Semibold 14px
h6. Bootstrap tagı	Semibold 12px

boyutlarıyla söyliyebiliriz. Kodlama şeklide şöyledir;

<h1>h1. Bootstrap tagı</h1>
<h2>h2. Bootstrap tagı</h2>
<h3>h3. Bootstrap tagı</h3>
<h4>h4. Bootstrap tagı</h4>
<h5>h5. Bootstrap tagı</h5>
<h6>h6. Bootstrap tagı</h6>

"h" taglarını öğrendikten sonra ufak tefek taglara geçebiliriz.

--------------------------------------------------------------------------------------------------------------------------

Sıradaki tag "small" tagı. Hemen örneği yazalım anlamak için.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Kodlama şeklide şöyledir;

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Yani <small> küçük yazı </small> olarak gösterilir.

--------------------------------------------------------------------------------------------------------------------------

Arkadaşlar şimdi son olarak bu konuyla ilgili anlatmak istediğim yazının altını, üzerini çizmek gibi ufak tefek şeyler.

1.Altını çizmek için 2 yöntem var. Aslında açıklaması farklı ama benim anladığım kadarıyla sonuç aynı. Yine de farklılık varsa sizde yoruma yazabilirisiniz.

İnserted Text, Underlined Text altını çizer. Hiç kullanmadım. Yinede not almak isterim.

Kullanımı:
İnserted Text: <ins>Yazının Altı Çizili</ins>
Underlined Text: <u>Yazının Altı Çizili</u>

Görünümü:
Yazının Altı Çizili

2.Deleted Text, Strikethrough Text yazının üzerini çizer. Bunuda kullanmadım.

Kullanımı:
Deteted Text: <del>Yazının Üzerini Çizer</del>
Strikethrough Text: <s>Yazının Üzerini Çizer</s>

Görünümü:
Yazının Üzerini Çizer

3.Bold Text yazıyı kalınlaştırır. Html tagıyla aynı. Çok kullandım.

Kullanımı:
Bold Text: <strong>Yazıyı Normalden Kalınlaştırır</strong>

Görünümü:
Yazıyı Normalden Kalınlaştırır

4.İtalik text bildiginiz gibi yazıyı yan yatırma olayı.

Kullanımı:
<em>Yazıyı Yan Yatırır</em>

Görünümü:
Yazıyı Yan Yatırır

Yazının devamını 2. bölümmde yazacağım. Bu bölüm düşündüğümdende uzun ve sıkıcı oldu. İkince Bölümde daha zevkli şeyler var ;)