Bootstrap ile Responsive Web Tasarımı Eğitimi
İrem Ocaklı tarafından hazırlanmıştır...
☛.img-fluid:
✶Fotoğraf çözünürlük arttıkça tüm sayfaya yayılır.Fotoğrafta bir bozulma görülmez.
➊<div class="container-fluid">
➋<img src="img/r6.jpg" ⭐class="img-fluid" alt="img-fluid resim" width="350px" height="350px">
</div>
➋<img src="img/r6.jpg" ⭐class="img-fluid" alt="img-fluid resim" width="350px" height="350px">
</div>
☛.rounded:
✶Bir fotoğrafa yuvarlatılmış köşeler ekler.
➊<div class="container-fluid text-center">
➋<img src="img/r6.jpg" ⭐class="rounded" alt="rounded resim" width="350px" height="240px">
</div>
➋<img src="img/r6.jpg" ⭐class="rounded" alt="rounded resim" width="350px" height="240px">
</div>
☛.rounded-circle:
✶Çerçeveyi daireye çevirir.
➊<div class="container-fluid text-center">
➋<img src="img/r6.jpg" ⭐class="rounded-circle" alt="rounded-circle resim" width="350px" height="240px">
</div>
➋<img src="img/r6.jpg" ⭐class="rounded-circle" alt="rounded-circle resim" width="350px" height="240px">
</div>
☛.img-thumbnail:
✶.img-thumbnail görüntüyü küçük resim (kenarlı) olarak şekillendirir
➊<div class="container-fluid text-center">
➋<img src="img/r6.jpg" ⭐class="img-thumbnail" alt="img-thumbnail resim" width="350px" height="240px">
</div>
➋<img src="img/r6.jpg" ⭐class="img-thumbnail" alt="img-thumbnail resim" width="350px" height="240px">
</div>
☛Resim Yerleşimleri
✶float-start ve float-end olarak ikiye ayrılır.
☛float-start ve float-end örneği:
✎float-start fotoğrafın yerleşimini en sola sabitler.
✎float-end fotoğrafın yerleşimini en sağa sabitler.
➊<div class="container-fluid text-center">
➋<img src="img/r6.jpg" ⭐class="rounded-circle float-start" alt="..." width="100px" height="100px">
</div>
➌<img src="img/r6.jpg" ⭐class="rounded-circle float-end" alt="..." width="100px" height="100px">
</div>
➋<img src="img/r6.jpg" ⭐class="rounded-circle float-start" alt="..." width="100px" height="100px">
</div>
➌<img src="img/r6.jpg" ⭐class="rounded-circle float-end" alt="..." width="100px" height="100px">
</div>