BootStrap ile Metinlere Uygulanabilecek Tüm Stiller

BootStrap'ın bazı html etiketlerine stil uygulamakta olduğunu önceki konumuzda açıklamıştık. Bunun yanında isteğe bağlı olarak kullanılabilecek birçok css class'ı da mevcuttur.

Aşağıdaki örnekler sayesinde bootstrap ile bazı temel etiket ve sınıfların nasıl göründüğünü inceleyebilirsiniz.

- Metin Rengi İçin Kullanılabilecek Sınıflar: İsmi belirtilen class'ları istediğiniz elemanlara uygulayarak metin rengini değiştirebilirsiniz.

text-muted sınıfı uygulanmış metin.

text-primary sınıfı uygulanmış metin.

text-success sınıfı uygulanmış metin.

text-info sınıfı uygulanmış metin.

text-warning sınıfı uygulanmış metin.

text-danger sınıfı uygulanmış metin.

- Arka plan Rengi İçin Kullanılabilecek Sınıflar: İsmi belirtilen class'ları istediğiniz elemanlara uygulayarak arkaplan rengini değiştirebilirsiniz.

bg-primary sınıfı uygulanmış p etiketi

bg-success sınıfı uygulanmış p etiketi

bg-info sınıfı uygulanmış p etiketi

bg-warning sınıfı uygulanmış p etiketi

bg-danger sınıfı uygulanmış p etiketi

- Small Etiketi: Başlık etiketlerinin içinde kullanılarak ikincil bir metin eklememizi sağlar.

Başlık İkinci Metin

- Mark Etiketi: Metni dolgu rengi ile vurgulamakta kullanılır.

İstenilen metni vurgylayın.

- Blockquote ve Footer Etiketi: Blockquote bir içeriği alıntılayarak göstermekte kullanılır. Footer etiketi ile de kaynak belirtilebilir.

- Code Etiketi:

BootStrap ile code etiketi buradaki gibi görünecektir.

- Kbd Etiketi:

ctrl + alt + del ile çıkabilirsiniz.

- Pre Etiketi: Metni dolgu rengi ile vurgulamakta kullanılır.

Pre etiketleri arasındaki metin böyle görünecektir. 
Pre etiketleri arasındaki metin böyle görünecektir. 

- .small class: Uygulandığı metni normal halinden %85 daha küçük hale getirir.

Burası .small sınıfı uygulanmış bir p etiketi.

Bu ise normal bir p etiketi.

- Metin Hizalamada Kullanılan Sınıflar: Metinleri sağa, sola, ortaya ve iki yana hizalamak için kullanılan css class'ları:

Burası .text-center sınıfı uygulanmış bir p etiketi.

Burası .text-left sınıfı uygulanmış bir p etiketi.

Burası .text-right sınıfı uygulanmış bir p etiketi.

Burası .text-justify sınıfı uygulanmış bir p etiketi.

 .text-nowrap class: Metnin bulunduğu yere sığmadığında bile alta geçmesini engelleyerek, tek satır halinde kalmasını sağlar.

text.nowrap sınıfı uygulanmış bir paragraf. Ekranı küçülterek deneyebilirsiniz.

 Büyük-Küçük Harf Dönüşümleri: Metnin tamamının büyük, tamamının küçük ya da kelimelerin ilk harflerinin büyük görünmesini sağlayan sınıflar:

.text-lowercase sınıfı ile bu metindeki tüm harfler küçük harf olarak görünüyor.

.text-uppercase sınıfı ile bu metindeki tüm harfler büyük harf olarak görünüyor.

.text-capitalize sınıfı ile bu metindeki kelimelerin ilk harfleri büyük harf olarak görünüyor.

 .list-unstyled class: Ol ve ul etiketleri ile oluşturulan listelerde, satır başlarındaki numara - işaretleri ve sol margini kaldırır. Aşağıda bir ul listesi görüyorsunuz.

• Madde 1
• Madde 2
• Madde 3

 .list-inline class: Sıralı ve sırasız listelerde (ol-ul) tüm elemanların yan yana yerleşmesini sağlar. Aşağıda bir ul listesi bulunmakta ve tüm elemanları yan yana görünmektedir.

• Madde 1
• Madde 2
• Madde 3

KONU İLE İLGİLİ ÖRNEKLER