Bootstrap 4 Resimler

Bootstrap 4 Responsive(Duyarlı) Resimler - img-fluid

Bootstrap 4'te resimler içinde hazırlanmış stil özellikleri bulunur. Bana göre bu özelliklerden en faydalı olanı .img-fluid'dir. Bu özellik ile resimlerin boyutları içinde bulundukları elemana göre otomatik değişir. Örneğin büyüklükleri ne olursa olsun 3 fotoğrafın yan yana gelmesini istiyorsak 3 farklı col içerisine resimleri yerleştirerek ve her fotoğrafın class özelliğine .img-fluid değeri vermemiz yeterlidir.

Çerçeve Şekilleri - img-rounded, img-rounded-circle, img-thumbnail

Bootstrap4'te eklenen resimlere göre çerçeve eklemek için aşağıdaki özellikler verilmelidir.
Yuvarlak kenarlı çerçeve için .rounded
dairesel fotoğraf için .rounded-circle
beyaz çerçeve için .img-thumbnail


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com