Stil Sayfaları (CSS) 18 - Buton, Badge ve Kart Sınıfları

 4.4.3.9. Buton Sınıfı

<button> , <input> ve <a> elemanları “btn” sınıfı eklenilerek özelleştirilmiş görünümlere sahip

butonlar hâline dönüştürülür. Tüm buton çeşitleri aşağıdaki örnek kodlarda, butonların görünümleri

de Görsel 4.43’te verilmiştir.

<button type="button" class="btn btn-primary">Buton elemanı</button>

<input type="button" class="btn btn-info" value="Input elemanı">

<a href="#" class="btn btn-warning">Link elemanı</a>

<button type="button" class="btn btn-outline-light">Çerçeveli</button>

<button type="button" class="btn btn-primary btn-lg">Geniş</button>

<button type="button" class="btn btn-primary">Normal</button>

<button type="button" class="btn btn-primary btn-sm">Küçük</button>

<button type="button" class="btn btn-success active">Aktif Buton</button>

<button type="button" class="btn btn-success" disabled>Pasif Buton</button>

<button type="button" class="btn btn-info btn-block">Blok Buton</button>

Not

Primary, success, info, warning, danger, secondary, dark, light arka plan renklerine

sahip butonlar tasarlanabilir.

Görsel 4.43: Buton çeşitleri

4.4.3.10. Badge Sınıfı

Web sayfasında dikkat çekmesi istenilen içeriği çeşitli renklerde işaretlemek için “badge” sınıfı

kullanılır (Görsel 4.44).

1.Soruya verdiğiniz cevap <span class="badge badge-success">Doğru</span> <br>

2.Soruya verdiğiniz cevap <span class="badge badge-danger">Yanlış</span> <br>

<button type="button" class="btn btn-primary">

Gelen Kutusu <span class="badge badge-light badge-pill">4</span>

</button>

Görsel 4.44: Badge çeşitleri

4.4.3.11. Kart Sınıfı

Kart sınıfı ile resim, başlık, içerik ve istenilen elemanların eklenebildiği özel kutular tasarlanabilir

(Görsel 4.45).

<div class="card" style="width:300px">

<img class="card-img-top" src="profilYeni.jpg">

<div class="card-body">

<h4 class="card-title">Kart Başlığı</h4>

<p class="card-text">Kart için gerekli içerik buraya yazılmaktadır. </p>

<a href="#" class="btn btn-primary">Detaylar</a>

</div>

</div>

Görsel 4.45: Kart sınıfı

Sıra Sizde

Altı adet kart tasarlayarak Türkiye’nin altı farklı iline ait turistlik yerlerin tanıtımını

yapınız (Tüm kartlar; ekranın en küçük boyutunda alt alta, küçük ve orta boyutlarında

dört kart yan yana, geniş ve en geniş boyutlarında altı kart yan yana olacaktır.).