Bootstrap 3 Dersleri Ders 5 – Responsive Resimler

0
1447
görüntülenme

Merhaba, arkadaşlar bu dersimizde Bootstrap 3’de Responsive resimleri nasıl ekleyeceğimizi öğreneceğiz. O halde hemen başlayalım. 🙂

Dikkat!:

Bir resimin responsive olması için img etiketinin class kısmına “img-responsive” class’ını eklememiz yeterli olacaktır. Aksi taktirde resim responsive olmayacaktır. Yani şöyle olacak;

<img src="resim.jpg" class="img-responsive">

Dikkat bilgimizide verdikten sonra bootstrap’ın Resimler ile ilgili diğer class’larına geçebiliriz.

Resimin Köşelerini Kavisli Yapalım

Resimin köşelerini kavisli yapmak için “img-rounded” class’ını img tagının class kısmına ekleyelim.

Kodumuz şöyle olacak;

<img class="img-responsive img-rounded" src="resim.jpg" alt=""># Ben resimin responsive olabilmesi için ayriyeten img-responsive class'ını da ilave ettim.

Çıktımız ise şöyle olacak;

Bootstrap 3 Dersleri Ders 5 – Responsive Resimler (Resim 1)
Bootstrap 3 Dersleri Ders 5 – Responsive Resimler (Resim 1)

 

 

 

 

 

Resimi Oval Şeklinde Yapalım

Resimi oval şeklinde yapmak için “img-circle” class’ını img etiketinin class kısmına ekleyelim.

Kodumuz şöyle olacak;

<img class="img-responsive img-circle" src="resim.jpg" alt=""># Ben resimin responsive olabilmesi için ayriyeten img-responsive class'ını da ilave ettim.

Çıktı Şöyle Olacak;

Bootstrap 3 Dersleri Ders 5 – Responsive Resimler (Resim 2)
Bootstrap 3 Dersleri Ders 5 – Responsive Resimler (Resim 2)

 

 

 

 

 

Resime Çerçeve Eklemek İçin

Resime çerçeve eklemek için ise “img-thumbnail” class’ını img tagının class kısmına ekleyelim.

Kodumuz şöyle olacak;

<img class="img-responsive img-thumbnail" src="resim.jpg" alt=""># Ben resimin responsive olabilmesi için ayriyeten img-responsive class'ını da ilave ettim.

Çıktımız İse Şöyle Olacak;

Bootstrap 3 Dersleri Ders 5 – Responsive Resimler (Resim 3)
Bootstrap 3 Dersleri Ders 5 – Responsive Resimler (Resim 3)

 

 

 

 

 

Ben sadece resimi responsive (duyarlı) yapmak istiyorum diyorsanız yazımın en başındaki Dikkat kısmını okumanız yeterlidir.

Dersimizin sonuna geldik arkadaşlar kendinize iyi bakın. 🙂

Önceki İçerikHttp’yi Https’ye Yönlendirme (.htaccess ile)
Sonraki İçerikTax Free Nedir?
Merhaba bu alanda kısaca kendimden bahsedeceğim. Adım Tuğra, 19 yaşındayım. Ticaret lisesi mezunuyum şuan Afyon Kocatepe Üniversitesinde İşletme bölümü okuyorum. Aslen Konyalıyım Afyonkarahisar'da ailemle birlikte yaşıyorum. Yaklaşık 11 senedir bilgisayarlarla içli dışlıyım son 6 senedir kendimi internete 2 yıldır ise Web Programlamaya verdim ileri derece PHP ve HTML biliyorum CSS Javascript Jquery için kendimi geliştirmeye devam ediyorum.. Yakında yayına çıkaracağım yyazilim.com için projeler geliştiriyorum. İş çözümleriniz için mail (iletisim@tugrayaldiz.com) atabilirsiniz. Şimdilik benden bu kadar eğer sende aramıza gelmek istersen mail listemize katılman yeterli kendine iyi bak. :) Not: Web programlama dersleri için https://www.w3schools.com adresini kaynak alıyorum.
Paylaş

CEVAP VER

Lütfen yorum alanını boş bırakma.
Lütfen adını gir.

This site uses Akismet to reduce spam. Learn how your comment data is processed.