Stil Sayfaları (CSS) 21 - Resim Galerisi (Slider) ve İkon Sınıfları
4.4.3.15. Slider (Resim Galerisi) Sınıfı
Bootstrap Framework ile gelişmiş özellikleri olan ve çok kullanışlı resim galerisi yapılmaktadır. Galerinin düzgün çalışması için kullanılacak resimlerin boyutlarının birbiriyle uyumlu olması gerekir. Resim galerisinin etkileşimli üç farklı resim değiştirme noktası bulunmaktadır. Ayrıca her resim için başlık ve açıklama metni için bir bölüm de bulunmaktadır (Görsel 4.48).
 |
| Görsel 4.48: Resim galerisi |
<div id="galeri" class="carousel slide" data-ride="carousel">
<!-- <ul> elemanı resim geçişlerini yönetmek için çizgi şeklinde işaretçilerin eklenildiği
bölümdür. <li> elemanları ile çizgiler eklenir. Her resim için bir işaretçi eklenmelidir.-->
<ul class="carousel-indicators">
<li data-target="#galeri" data-slide-to="0" class="active"></li>
<li data-target="#galeri" data-slide-to="1"></li>
<!-- Galerideki resim sayısına göre <li> etiketi eklenmelidir.-->
</ul>
<div class="carousel-inner"><!-- Galeri resimlerinin ve metinlerinin eklendiği bölümdür. -->
<div class="carousel-item active"><!--İlk gösterilecek resim için active sınıfı eklenir.-->
<img src="SahilYolu.jpg" width="1100" height="500">
<div class="carousel-caption">
<h3>Türkiye</h3> <p>Karadeniz Bölgesi, Ordu Sahil Yolu</p>
</div>
</div>
<div class="carousel-item">
<img src="SaatKulesi.jpg" width="1100" height="500">
<div class="carousel-caption">
<h3>Türkiye</h3> <p>Ege Bölgesi, İzmir Saat Kulesi </p>
</div>
</div>
<-- Diğer eklenecek resimlerin kodları buraya yazılabilir.-->
</div>
<a class="carousel-control-prev" href="#galeri" data-slide="prev">
<span class="carousel-control-prev-icon"></span> <!-- Önceki resmi gösterme butonu -->
</a>
<a class="carousel-control-next" href="#galeri" data-slide="next">
<span class="carousel-control-next-icon"></span> <!-- Sonraki resmi gösterme butonu -->
</a>
</div>
4.4.3.17. İkon (İcon) Sınıfı
Web sitesine ikonlar eklemek için öncelikle HTML sayfasının <head> bölümüne aşağıdaki kodu
eklemek gerekmektedir.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >
HTML sayfasının <body> bölümünde “fa” sınıfı kullanarak ikon (icon) eklenebilir. Onlarca kategoride
yüzlerce ikon bulunmaktadır. İkonların kodlarına ve görsellerine internet üzerinden ulaşılabilir.
Aşağıda ikon sınıfı kullanımı için örnek kodlar verilmiştir. İkonlar Görsel 4.50’deki gibi görülmektedir.
<i class="fa fa-home"></i>
<i class="fa fa-phone"></i>
<i class="fa fa-star"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
 |
| Görsel 4.50: İkon sınıfı |
Sıra Sizde
Kendi ilgi alanınıza göre bir konu belirleyiniz. Belirlediğiniz konuya uygun en az yedi
sayfadan oluşan tüm çözünürlüklere uyumlu bir web sitesi tasarlayınız ve tasarladığınız
web sitesinin tanıtım sunumunu yapınız.
Hiç yorum yok