Bootstrap ile Responsive Web Tasarımı Eğitimi

İrem Ocaklı tarafından hazırlanmıştır...


☛Temel Kartlar

➊<div class="container mt-3">
⭐➋<div class="card">
➊<h4 class="card-title m-3">Kart Başlığı</h4>
➌<div class="card-body">Temel bir kart</div>

Kart Başlığı

Temel bir kart

✎ Sınıf .card-header, karta bir başlık ekler ve .card-footer sınıf, karta bir alt bilgi ekler:
➊<div class="card">
➋<div class="card-header">Header</div>
➌<div class="card-body">Content</div>
➍<div class="card-footer">Footer</div>
Header
Content

☛Kart Rengi

➊<div class="container mt-3">
➋<div class="card bg-info">
➌<div class="card-body">bg-info ekleyerek arka plan açık mavi yapıldı. </div>
➍</div>
➎<br>
➏<div class="card bg-primary text-white">
➐<div class="card-body">bg-primary ile card arkaplan rengi mavi yapıldı.</div>
➑</div>
bg-info ekleyerek arka plan açık mavi yapıldı.

bg-primary ile card arkaplan rengi mavi yapıldı.

☛Kart Resimleri

➊<div class="card-group">
➋<div class="card">
➌<img src="img/ekip2.jpg" class="card-img-top" alt="...">
➍<div class="card-body">
➎<h5 class="card-title">Emily Davis</h5>
➏<p class="card-text">Buraya Karta yönelik içerik gelecek...</p>
➐</div></div>
➑<div class="card">
➒<img src="img/ekip4.jpg" class="card-img-top" alt="...">
➓<div class="card-body">
➊➊<h5 class="card-title">Jacob Cox</h5>
➊➋<p class="card-text">Buraya Karta yönelik içerik gelecek...</p>
➊➌</div></div>
➊➍<div class="card-group">
➊➎<div class="card">
➊➏<img src="img/ekip2.jpg" class="card-img-top" alt="...">
➊➐<div class="card-body">
➊➑<h5 class="card-title">Lily Clark</h5>
➊➒<p class="card-text">Buraya Karta yönelik içerik gelecek...</p>
...
Emily Davis

Buraya Karta yönelik içerik gelecek...

...
Jacob Cox

Buraya Karta yönelik içerik gelecek....

...
Lily Clark

Buraya Karta yönelik içerik gelecek...