1206

Komple Uygulamalı Web Geliştirme Eğitimi | 2019

Bootstrap Resimler

Bootsrap 4 Image sınıfları ile Resim Biçimlendirme İşlemleri


Bootstrap 4 image sınıflarını kullanarak resimlerimize çok daha güzel görüntü kazandırabiliriz.

Bootstrap 4 image sınıfları ile köşeleri yuvarlatılmış resimleri .rounded sınıfını kullanarak oluşturabiliriz.

<img class="rounded" src="" /> 

Örnek 1 için tıklayınız.

Bootstrap 4 image sınıfları ile köşeleri tam yuvarlatılmış resimleri .rounded-circle sınıfını kullanarak oluşturabiliriz.

<img class="rounded-circle" src="" /> 

Örnek 2 için tıklayınız.

Bootstrap 4 image sınıfları ile thumbnail resimleri .img-thumbnail sınıfını kullanarak oluşturabiliriz.

<img class="img-thumbnail​​​​" src="" /> 

Örnek 3 için tıklayınız.

Bootstrap 4 .float-left ve .float-right sınıfları ile resimleri sağa ya da sola hizalayabiliriz.

<img class="float-left" src="" />  
<img class="float-right" src="" />  

Örnek 4 için tıklayınız.

Bootstrap 4 ile resmi ortalamak için .mx-auto (sağ ve soldan margin) ve .d-block sınıflarını kullanabiliriz.

<img class="mx-auto d-block" src="" />  

Örnek 5 için tıklayınız.

Bootstrap 4 ile responsive bir resim oluşturmak için .img-fluid sınıfını kullanabiliriz.

Bir resme .img-fluid eklediğimizde width:100%; ve height:auto; özelliklerini uygulamış oluyoruz dolayısıyla resmin genişliği içinde bulunduğu etiketin genişliğine göre ayarlanmış oluyor.

<img class="img-fluid" src="" />  

Örnek 6 için tıklayınız.

 

Paylaş