BOOTSTRAP 4 – IMAGES (RESİMLER)

Bootstrap 4 ile resimlerimize stil vermek artık çok kolay. Örneğin bir resmi responsive hale getirebilir, tam yuvarlak veya köşelerden yuvarlatılmış bir şekle dönüştürebiliriz. Hem de hiç Css kodu yazmadan. Yapmamız gereken tek şey, resmin src attribute‘una resmin kaynak yolunu yazmak ve bootstrap image class’larını kullanmak. Şimdi bootstrap image class’larının neler olduğuna bakalım. 

 ⇒  Eğer img etiketinin class’ına rounded yazarsak, resmimiz köşelerinden yuvarlatılmış hale gelir. 

Resmimizin görünümü;

bootstrap-image-rounded-kullanimi

Not : Bu class’ı yazdığımızda, aslında resme border-radius : .25rem; değeri uygulanıyor. 

Resmimizin görünümü;

bootstrap-image-rounded-circle-kullanimi

Not : Bu class’ı yazdığımızda, aslında resme border-radius:50%; değeri uygulanıyor.

 ⇒  Eğer img etiketinin class’ına img-thumbnail yazarsak, resmimiz thumbnail hale gelir. 

Resmimizin görünümü;

bootstrap-image-thumbnail-kullanimi

Not : Burda resme şu özellikler kazandırılıyor:

  • 1px’lik kenarlık veriliyor.
  • Köşeler hafif yuvarlatılmış hale geliyor.
  • Kenarlıklar ile resim arasında mesafe olması için padding (iç boşluk) değeri veriliyor.

Bootstrap 4 ile Responsive Resim Nasıl Yapılır?

 ⇒  Responsive bir resim elde etmek için yapmamız gereken tek şey, img etiketinin class’ına img-fluid yazmak.

Şimdi tarayıcı boyutunu küçültüp tekrar genişleteceğim.

bootstrap-responsive-image

Gördüğünüz gibi tarayıcı boyutuna göre resmimizin boyutuda değişiyor. Yani img-fluid class’ı ile resmimize responsive özellik kazandırmış oluyoruz.

Responsive tasarım hakkında daha fazla bilgi almak isterseniz Css Dersleri 37 – Responsive Web Tasarım Nedir? yazımı okuyabilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.  

Farklı bir yazımda görüşmek üzere.

6 Yorum

  1. blank mesut Temmuz 30, 2019 Cevapla
    • blank admin Ağustos 2, 2019
  2. blank kemal rahmi şener Şubat 12, 2020 Cevapla
    • blank admin Şubat 12, 2020
  3. blank Sedat Mart 26, 2020 Cevapla
    • blank admin Mart 27, 2020

Yorum Yazın