Embedded Files
Bootstarp ile Resim Ekleme ve Düzenleme Nasıl Yapılır ?
Hazırlayan: Halil İbrahim Kalabalık
Bootstrap ile resimlere stil vermek çok kolaydır örneğin resimleri responsive hale getirebilir, tam yuvarlak ya da köşelerde yuvarlatılmış şekle dönüştürebilirsiniz. Hem de hiç css kodu yazmadan yapmanız gereken tek şey resmin src konumuna kaynak yolunu yazmak ve bootstrap image classlarını kullanmak.
Öncelikle, sayfanızın içinde resim eklemek istediğiniz yere bir img etiketi eklemeniz gerekiyor.
<img src=" resim-yolu/resim-adı.jpg" alt="Resim açıklaması">
Burada src özelliği, resmin URL'sini belirtir. alt özelliği ise resmin yerini tutan bir metin tanımlar, bu sayede resim yüklenemezse kullanıcılar yerine bir alternatif metin görebilir.
Responsive images (Duyarlı Resim):
Duyarlı resimler otomatik olarak ekran boyutuna göre ayarlanır. Resim hangi boyutta yüklenirse yüklensin ekranın çözünürlüğüne göre boyutlanır bu şekilde sağa sola kaydırma çubukları olmaz şık ve düzenli bir görüntü el edilir telefon ve tabletlerde de bozulma olmaması için kullanılır.
Responsive imageler oluşturmak için img etiketi içine img-responsive classı kullanılır.
<img src="..." class="img-fluid" alt="Responsive image">
Responsive image telefon ve tabletlerde de bozulma olmaması için kullanılır. Yanda görüldüğü gibi ekran boyutuna göre düzeni korur kayma vs gibi durumların önüne geçer bu sayede daha düzenli ve şık bir görüntü elde ederiz.
Image thumbnails (Küçük Resim):
Küçük resimlere .img-thumbnail classı kullanılır. Bu class resime 1px kenarlık veriyor. Köşeler hafif yuvarlatılıyor ve kenarlık ve resim arasındaki mesafeyi arttırmak için padding değeri veriyor.
<img src="..." class="img-thumbnail" alt="...">
Resimlere yükseklik ve genişlik vermek için css dosyasına class açılır ve bu classlarda yükseklik ve genişlik değerleri belirlenir. Bu değerleri bootstrap ile kullanabilmek için bootstrap classına boşluk bırakılıp classın adı yazılır.
<img src="..." class="img-thumbnail (bu kısıma css class adı)" alt="...">
Rounded images (Köşelerden Yuvarlatılmış Resim):
Resimlerin köşesi yuvarlatılması için kullanılan classtır. Resmin yuvarlak az yuvarlatılmış şekilde siteye eklenmesi için "rounded-circle (Tam yuvarlak)" gibi bazı komutları da vardır.
<img src="..." class="rounded-circle" alt="...">
Bootstrap ile resmi ortalamanın başka bir yolu div içine almaktır. Mx-auto d-block kullanmadan div içine alınarak text-center ifadesi ile ortalanabilir
<div class="text-center">
<img src="..." class="img-fluid" alt="...">
</div>
Resimleri Hizalama:
Resimlerin sağa sola yaslanması ve ortaya hizalanması için img etiketinin içindeki classa float tagı yada mx-auto d-block kullanılır.
<img src="..." class="img-thumbnail float-left" alt="...">
Resmi sola yaslamak için kullanılır.
<img src="..." class="img-thumbnail float-right" alt="...">
Resmi sağa yaslamak için kullanılır.
<img src="..." class="img-thumbnail mx-auto d-block" alt="...">
Resmi ortaya hizalamak için kullanılır.
Page updated
Report abuse