Bootstrap 3.3 | Tek Sayfalık Mini Fotoğraf Galerisi
Merhabalar,
Sizlere bugün Bootstrap kütüphanesi ile nasıl tek sayfalık mini fotoğraf galerisi oluşturabiliriz onu anlatmaya çalışacağım.
Başlangıç :
galeri.php dosyamızı oluşturuyoruz ve açıp ilk satıra
<!DOCTYPE html>
<html lang="tr">
<head>
</head>
<body>
</body>
</html>
kodlarını ekliyoruz.
Gerekli dosyaları (bootstrap css ve font) bootstrap ve google sunucusundan çağırıyoruz ve head taglarının arasına ekliyoruz.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
galeri.php'nin şuan ki hali şöyle olmalı;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Mini Fotoğraf Galerisi</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
</body>
</html>
Galerimiz 3 sütun ve 7 fotoğraftan oluşacak.Bu sayıyı arttırmak elbette mümkün.
Ayrıca sosyal medya hesapları için de bir alan oluşturacağız.
Fotoğraflar Bootstrap cardlarının içerisinde olacak ve CSS ile kenarlık şekillendirmesi yapacağız.
Style kodlarımız bu şekilde olacak;
Style kodlarımızı galeri.php'nin içerisine head tagları arasına ekliyoruz.
Gelelim body alanına:
Sitenin gövdesini oluşturacağımız alan body alanı.
Avatarımızı yada profil resmimizi body'nin ilk kısmına ekliyoruz.
<img class="resim" src="https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/U5ds3mk9vjckvr9YCmYyvpCL6WsZDRz_1680x8400"/>
Ardından İsim veya Logomuzu
Altına sloganımızı ekliyoruz
<p><h1><strong>WiseX</strong></h1></p>
<h1>Mini Fotoğraf Galerisi</h1>
Hemen alt kısma CSS de şekillendirdiğimiz ve font awesome iconlarıyla güzel bir görünüm kattığımız sosyal medya alanımızı ekliyoruz.
<div class="sosyalmedya">
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
Şimdi sıra geldi fotoğraf alanlarına;
İlk sütunumuz bu şekilde. Benzer 2 sütun daha ekliyoruz ve son hali şu şekilde oluyor;
İsim,slogan gibi alanları bölmek için hr kodunu kullanabilirsiniz.
Ufak bir copyright alanı ekleyelim.
<p class="footer" align="center">© 2018 WiseX | Coogger </p>
galeri.php'nin görüntüsü bu şekilde
Congratulations, your contribution has been approved.