Bootstrap Typography 2.Bölüm

Evet arkadaşlar. Şimdi neden 2.bölüm yaptığımızı anlatayım. 2. bölüm bana daha eğlenceli geldi aslında. Hatta bütün yazı bittikten sonrada örnekleme yapabiliriz.

1.Yazılı Hizalama



Yazacağınız yazıyı sola, sağa, ortaya hizalamaya yarar. Yani Align olayı.

Kod:

<p class="text-left">Yazılı Sola Yasla.</p>
<p class="text-center">Yazılı Ortala Yasla.</p>
<p class="text-right">Yazılı Sağa Yasla.</p>

Görünümü:

Yazılı Sola Yasla.

                                                    Yazılı Ortala Yasla.
                                         
                                                                                                                  Yazılı Sağa Yasla.    

2.Dönüşüm Sınıfları 

Yani açıklamak gerekirse tamamını küçük yazı veya tamamını büyük yazı yapabiliriz bu sınıfla.

Kod:

<p class="text-lowercase">1.KÜÇÜK YAZI</p> 

<p class="text-uppercase">2.büyük yazı</p>

Görünümü: 

l.küçük yazı. 

2.BÜYÜK YAZI.

3.Kısaltma

Olay fare üzerine geldiğinde soru işaretli fareye dönüştürme. Örneğin "tel:" yazısı yazıp üzerine geldiğinde "Telefon" yazısını çıkarma. Yani o da "title" olayı.

Kod:

<abbr title="Telefon">tel:</abbr>

Görünüm:
Tel:


2.Bölüm buraya kadardı. Birde küçük bir örnek yapalım hadi. Hatta kullandığım sayfanın örneği güzel. Bunu uygulayabiliriz.

Örnek Proje:

Görünümü:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

Kodlaması:

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Kopyala yapıştır yaptım. Aynısını kendime göre dizayn yapabilirdim fakat ne gerek var değil mi? :)
Bu konuyla ilgili bir kaç şey daha var. Onuda yarın yazarım arkadaşlar. Gerekirse 3.bölüm olarak oluştururuz gerekirse..