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. 

 ⇒  Eğer img etiketinin class’ına rounded-circle yazarsak, resmimiz yuvarlak hale gelir. Resmin genişlik ve yükseklik değeri eşitse, tam yuvarlak olur. Genişlik ve yükseklik değeri farklı ise elips şeklinde olur.

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.

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +