Bootstrap Kartlar

Bootstrap  Kartlar(Cards)

Bootstrap'te kartlar bir bütünlük içinde verileri saklamak için kullanılan, head, body ve footer bölümleri oluşturulabilen yapılardır. Yapının ismi card olduğu kişi bilgileri saklanıyor gibi görünse de akla gelen tüm veriler bu yapı içinde kullanılabilir(üye paneli vb.). Daha önceki bootstrap sürümlerinde bulunan panel, well ve thumbnail yapıları yerine bootstrap'te sadece card yapısı kullanılacaktır.

Kart yapısı basitçe aşağıdaki gibi oluşturulur. 

Örnek:

<div class="card"> 

            <div class="card-header">  

                        Kart Başlık 

            </div>  

            <div class="card-body">  

                        Kart Gövde  

           </div> 

           <div class="card-footer">  

                        Kart Alt 

           </div> 

</div> 

En dışta bulunup diğer elemanları kapsayan div card class özelliğini alır.

İçte bulunan divler ise sırasıyla

kart başlık bölümü için => card-header

kart gövde bölümü için => card-body

kart alt bölümü için => card-footer

özelliklerini alır.

İstenilen durumlarda başlık gövde ve alt kısımlarından bir veya birkaçı kullanılmayabilir. Yani yalnızca başlık ve gövde veya başlık ve alt kısımları kullanılarak da kart yapısı oluşturulabilir.

Ayrıca kartlar bulundukları yere göre genişlik değeri alırlar(aksi belirtilmedikçe tüm sayfayı kaplarlar). Daha küçük kartlar oluşturmak için grid yapısından faydalanılmalıdır.

Kart Başlıkları ve Kart Linkeri(card-title card-subtitle card-link)

Kart başlık yazıları genelde card-header divinin içinde yazılır. h etiketlerine card-title özelliği verilerek kullanılır. Aynı şekilde card-subtitle class özelliği verilerek alt başlık da oluşturulabilir.

kart linkleri ise card içinde kullanılan a etiketlerine card-link class özelliği verilerek oluşturulur. Aşağıda bu elemanların kullanımına örnek verilmiştir. 

<div class="card">

         <div class="card-header">

                              <h5class="card-title">Kart Başlık</h5> 

                            <p class="card-subtitle">Kart Alt başlık</p> 

         </div> 

         <div class="card-body">

                            <p class="card-text">Kart açıklam yazısı</p>

                              <a href="#"class="card-link">Card link</a> 

                            <a href="#"class="card-link">Another link</a>

             </div> 

</div> 

Kart Renkleri

Bootstrap'te var olan hazır renkler kullanılarak kartlarımıza renkli bir görünüm vermek mümkündür. Kartlara renk vermek için en dıştaki card özelliğine sahip div elemanına bg-* renk özelliğini vermek yeterlidir. Aynı div elemanına yazı rengi özelliği verilerek kart içindeki yazı rengi de değiştirilebilir.

Not: * işaretli yere renk özelliği gelecektir.

Örnek:

<div class="card bg-dark text-light">

               . . . . . . .

 </div> 

Kartlarda Resim Kullanma (card-img-top card-img-overlay)

Kartlarımıza fotoğraf ekleyerek görsel olarak daha şık kartlar hazırayabiliriz. Ekleyeceğimiz fotoğrafın konumuna göre img etiketimize card-img-top veya card-img-bottom class özellikleri eklenmelidir.

Fotoğrafı arka plan olarak kullanıp üzerine yazı yazma işlemine overlay(kaplama) adı verilir.Bu işlem için card-body class değeri almış olan div 'e card-img-overlay class değerini eklemek yeterlidir. 

Örnek:

 <div class="card "> 

               <img class="card-img-top img-fluid" src="https://c1.staticflickr.com/3/2819/10071092194_2e29426879_b.jpg" class="img-fluid card-img-top"> 

               <div class="card-img-overlay card-body"> 

                             <h4 class="card-title">John Doe</h4>  

                             <p class="card-text text-danger">Bilgisayar Mühendisi<br> 

                             Boş zamanlarında yürüyüş yapmayı sever. 

                             </p>   

                             <a href="#" class="btn btn-danger">Görüntüle</a> 

               </div>

 </div>