Bootstrap'ta resim eklemek için img etiketi kullanılmaktadır. İmg etiketi ile kullanılan sınıflar ve bu sınıflar ile hangi özelliklerin kullanıldığını öğreneceksiniz.
Bootstrap resimler için kullanılan sınıflar:
Bootstrap'ta duyarlı yani responsive resimler için img-fluid sınıfı kullanılmaktadır.
<img src="resim_adresi.jpg" class="img-fluid" alt="Responsive Duyarlı Resim">
Bootstrap'ta resme 1 piksel kenarlık eklemek için .img-thumbnail sınıfı kullanılmaktadır.
<img src="resim_adresi" class="img-thumbnail" alt="Kenarlıklı Resim">
Bootstrap rounded sınıfı resimlerin köşelerini yuvarlaklaştırmak için kullanılır.
<img src="Resim_adresi.jpg" class="rounded" alt="Köşeleri Yuvarlaklaştırılmış Resim">
Bootstrap daire çerçeve içerisine resim eklemek için .rounded-circle sınıfı kullanılmaktadır.
<img src="resim_adresi" class="rounded-circle" alt="Bootstrap Daire Çerçeve">
Bootstrap'ta resmi sağa, sola ve ortalama işlemleri için kullanılan sınıflar bulunmaktadır. Bu sınıflar:
<img src="resim_adresi" class="float-right" alt="Bootstrap Resmi Sağa Hizalama">
<img src="resim_adresi" class="float-left" alt="Bootstrap Resmi Sola Hizalama">
<img src="resim_adresi" class="mx-auto d-block" alt="Bootstrap Resmi Ortalama">
| Önceki Ders: Bootstrap Tablolar | Sonraki Ders: Bootstrap Jumbotron |