İletişim Bilgilerinin Paylaşılması
Sanatçıların Fotoğraflarını ve Alanlarını Sergilemek
Tüm Hakkı Saklıdır @ web tasarım, seo, reklam ve sosyal medya ajansı web-tasarimci.com
Bootstrap ile web site yapımı, Bootstrap zamanı kısıtlı olan ve direkt konuya geçmek isteyenler için hayat kurtaran kütüphanelerdendir. CSS Kütüphanesi olan Bootstrap ile site yapımı HTML ve CSS kullanarak web sitesi yapmaktan çok daha kolaydır. Bootstrap açık kaynak kodlu olduğu için, kendi dosyaları üzerinden de değişikliğe izin verir. 18 Ağustos 2011’den bu yana Twitter tarafından geliştirilmeye devam eden Bootstrap; HTML, CSS ve JavaScript ile harmanlanmış kodlardan oluşan bir frameworktür. Kullanıcının işlerini kolaylaştırmasıyla ünlenip aynı zamanda hazır şablonlar sunmasıyla da yazılım dünyasında adından çokça söz ettirmiştir. Kolay anlaşılır ve dinamik özelliklere sahip olan Bootstrap; mobil öncelikli siteler oluşturmak isteyenler için de biçilmiş bir kaftandır. Bootstrap ile web site yapımı için temel düzeyde HTML bilgisine sahip olmak yeterlidir. Temel bir HTML bilgisine sahip olmak için ise HTML’in çalışma prensibini anlamak gerekir. HTML nedir, çalışma mantığı nasıldır, buyurun beraber öğrenelim:
Verilen bağlantılar görselde ki gibi HTML’intagleri içine dahil ettikten sonra, jQuery’i projeye dahil etme aşamasına rahatlıkla geçebilirsiniz.Örnek Görsel 2: (Gerekli Bootstrap Dosyaları indirilip, karmaşa yaratmaması için klasörlere dağıtıldıktan sonra projeye dahil edilmiştir.)
İndirilen bir çok css ve javascript dosyasından yapacağınız proje için ihtiyacınız olanları almanız yeterlidir. Şuan için bize sadece bootstrap.min.css ve bootstrap.min.js dosyaları lazım. Bu iki dosya projemizi hayata geçirmek için fazlasıyla yeterlidir. Projenizde ki dosya yollarını görselde ki gibi HTML’in;etiketleri içine dahil ettikten sonra, jQuery’i projeye dahil etme aşamasına rahatlıkla geçebilirsiniz.
jQuery dosyasını Bootstrap.min.js’in üstüne yazmazsanız, Bootstrap JavaScript’in de bir çok özelliği çalışmayacaktır. Bootstrap.js, jQuery ile entegre olarak çalışmaktadır. jQuery javascript ile web sitesi yapımında da bizlere çok büyük kolaylıklar sağlamaktadır.
Bu kod sonucunda html web sitesi kodlarından aldığımız çıktı bu şekildedir:
Bootstrap ile Web Sitesi Yapımı Navbar Class Düzenleme
Burada Bootstrap’in bize verdiği navbar classından yararlanıyor ve navbarımızı dark (karanlık) tema yapmak için navbar-dark ve bg-dark classlarını birlikte kullanıyoruz. Bu classların sağladığı özellikleri görmek için bootstrap.css dosyasını açıp inceleyebilirsiniz. Örnek olarak navbar classının sağladığı özelliklere birlikte bakalım:
Navbar classının sağladığı temel özellikler burada yer almakta biz class olarak navbarı belirttiğimizde otomatik olarak bu özellikler bizim tanımladığımız div, input veya herhangi bir elemente gelmektedir. Bootstrap en temelinde aslında hazır classlar ile bize bu özellikleri sağlamaktadır. Bootstrap bizi css yazma derdinden de kurtarır. Aslında sadece Bootstrap değil, neredeyse tüm kütüphanelerin başlıca amacı budur.Menümüz de “Hoş Geldiniz” yazısını menünün başlığı olarak kabul edebiliriz. Genel olarak web site sahipleri buralara firma ismi veya logosu koyarlar. Buraya minik düzenlemeler ile sizde firma ismi, veya logosu koyabilirsiniz. Hoş Geldiniz yazısını özel kılmak ve menü bağlantılarının yan yana olmasını engellemek için navbar-nav class’ının yanına “mx-auto” adında bir class daha ekliyoruz. Bu classın kod çıktısı:
Bu kod sonucunda aldığımız çıktı bu şekildedir:
Navbarımızı yaptıktan sonra aşağı doğru sitemizi oluşturmaya devam edelim.
Bootstrap ile web sitesi yapımı konusunda slider oluşturmaya da değinelim. Bu noktada Bootstrap’in yine bizim için oluşturduğu carousel ve slide classlarından yararlanabiliriz. Yapmamız gereken Carousel-item classını kullanarak sliderın içerisinde göstereceğimiz resimleri eklemek. Carousel’ımıza istediğimiz kadar carousel-item ekleyip, fotoğraf yolunu belirtebiliriz. Ne kadar ekleme yaparsak o kadar fotoğrafı sıraya alırız. Bu fotoğrafları sistem ekleme sırasına göre gösterir. Kullanıcılara fotoğrafın sağında görünen ileri ve geri butonlarını carousel-control-prev ve carousel-control-next sınıfları ile hazır olarak sunabiliriz. Bu sunum kullanıcı deneyimini de yüksek oranda etkiler.Bu kod sonunda aldığımız çıktı şu şekildedir:
Şimdi ise yaptığımız işi pazarlamak adına birkaç özelliğimizi sunabileceğimiz bir alan yaratalım.
Bu alanda Bootstrap’in bizim için sağlamış olduğu container ve row classlarından yararlanıyoruz. Bu classları birçok alanda istediğiniz görünümü elde etmek için kullanabilirsiniz.
Şimdi basit bir container oluşturup içerisine başlık, metin ve bir buton ekleyeceğiz.
Container oluşturup burada ki container’ı kapatmamaya dikkat etmeliyiz. Container’ı kapatırsak aşağıya gelecek elementleri container, kendi içine alamaz. Bir diğer Bootstrap özelliği olan card-header ve card-body classlarını kullanıp bilgilerimizi bir card içine alıyoruz. Card-body içerisine başlığımızı, metnimizi ve butonumuzu koyup aşağıdaki çıktıyı elde ediyoruz:
Sıra fotoğrafını çektiğimiz sanat eserlerini sergileyeceğimiz bölüme geldi.
Bootstrap içerisinde birden fazla card yapıları mevcuttur. Burada yine Bootstrap’de ki mevcut card yapılarından birini kullanıyoruz. Card kısmına fotoğraf uzantısı belirttikten sonra card-body içerisine başlık ve metin girişi yapabiliriz. Card-footer kısmına en aşağıda olmasını istediğimiz metni yazabiliriz. Ben projem için çekim tarihi yazacağım. Card-group classının içine 3 adet card aldığımız zaman card’lar yan yana gelecek ve düzenli bir görünüm oluşturacaktır. 3 Adet almak zorunlu değil, card-group içine ne kadar card eklerseniz o kadar card yan yana gelir.Yazdığımız kodun çıktısı da bu şekildedir:
Sitemizin son kısımlarına yaklaştık. Şimdi yapacağımız işlem ise isimlerini duyurmak adına resimleri çeken sanatçıları göstermek ve listelemek. Fotoğrafları çeken sanatçıların profil fotoğraflarını, yuvarlak çerçevede profil fotoğrafı görünümü ile gösterecek ve hakkında yazılar yazacağız.Yukarıda gösterdiğimiz grid sistemine dayalı 3 adet col-lg-4 adında sınıf oluşturuyorduk. Oluşturduğumuz sınıfların içerisine fotoğraf, başlık ve içerik girişi yaptık. Daha fazla detay göstermek için de temsili bir “detayları gör” butonu ekledik. Ancak bu butonların yönlendirme kısmı boş. Yönlendirmeye istediğiniz site adresini ekleyebilir veya mail, telefonla arama gibi seçenekleri tercih edebilirsiniz. Tamamen sizin hayal gücünüze kalmıştır. img elementine verdiğimiz img-circle sınıfı sayesinde yüklediğimiz fotoğrafların yuvarlak bir biçimde olmasını sağladık. Width ve height değerlerini de manuel olarak vererek fotoğrafların önerilen boyutunu aşmasını engelledik.
Bu kodun çıktısı da burada mevcut.
· kodu ile küçük bir nokta ekleyebiliriz. Ana Sayfaya geri dön kodunun yönlendirmesine # eklediğimiz için otomatik olarak bizi bulunduğumuz sayfanın en üstüne atacaktır.
HTML Nedir?
Web dünyasının en önemli betimleme dillerinden biri olan ve şu an için internet dünyasının vazgeçilmezi olarak lanse edebileceğimiz HTML; internet siteleri üzerinde kullanıcıların siteye giriş yapmalarını sağlamak amacıyla oluşturulur. Anlamı ‘Hyper Text Markup Language’ olan HTML; Türkçeye ‘Hiper Metin İşaretleme Dili’ olarak çevrilir. Web siteleri oluşturmak için standart ve en çok kullanılan biçimlendirme dilidir. Bir dizi öğeden oluşur. HTML ögeleri, tarayıcı ile haberleşip, içeriğin nasıl görüntüleneceğini iletir. Ögelerinin asıl amacı “bu bir başlıktır”, “bu bir paragraftır”, “bu bir bağlantıdır” gibi içerik parçalarını tarayıcıya düzgün bir şekilde aktarmasıdır.Web siteleri için çokça kullanılan bir HTML, sayfası bulunduğu sunucularda ‘.html‘ veya ‘.htm‘ uzantılarıyla tutulur. Sırf HTML kodlarıyla yazılmış bir program oluşturulamayacağı için programlama dillerinden sayılmamaktadır. Yazı, video gibi çeşitli verileri ve bunlardan meydana gelen sayfaları basit ve yalın bir biçimde bağlamayı ve konumlandırmayı sağlar. Web tarayıcısı yazılımları tarafından sayfaların doğru bir şekilde okunabilmesi ve düzgün bir biçimde görüntülenebilmesi için genel kaideleri oluşturur.Her web tarayıcısı HTML kodunu farklı şekilde okuyup, yorumlayabilir ve ardından görsel bir hale getirir; bunun sonucunda tarayıcılar arasında sayfalar farklı olarak görüntülenebilir. Bu farklılığı önlemek, web sitelerini tarayıcılara uyumlu bir hale getirmek için, tarayıcılara özel bazı CSS kodlarını kullanmak gerekir. HTML, CSS ve JavaScript kullanılarak dinamik web siteleri oluşturmak çok kolaydır.HTML için Yararlanılacak KaynaklarWeb odaklı yazılım geliştirmeye yönelmek istiyorsanız, öncelikli olarak HTML öğrenmelisiniz. HTML ile bazı kütüphaneleri kullanarak uygulama geliştirebilirsiniz. Mesela mobil uygulama için “ionic”, masaüstü uygulama için ise “electronJS” gibi. W3schools gibi kaynaklardan HTML öğrenmek için yararlanabilirsiniz. HTML ve CSS öğrenmek için W3schools birebirdir. GitHub ile başka geliştiricilerin kullanım stillerini görebilir, projelerine göz atarak kendinizi geliştirebilirsiniz. CodePen aracılığıyla HTML kod denemelerinizi yapabilirsiniz.HTML ile Nasıl Web Sitesi Yapılır?
HTML ile web sitesi yapabilmek için temel seviyede HTML bilgisine sahip olmak gerekir. Lakin web sitelerine tasarım giydirebilmek için ise CSS bilgisi lazımdır. Hareketli nesneler yapmak için JavaScript bilgisi de zorunludur. Öte yandan Bootstrap kütüphanesini kullanarak bilmeniz gereken CSS ve JavaScript kodlarını minimum düzeye indirebilirsiniz. Ancak her türlü yapacağınız web sitesi için temel HTML bilgisi zorunludur. HTML ile ilgili ayrıntılı makalemize buradan ulaşabilirsiniz.HTML ile tek başına site tasarlamak mümkün olsa da göze hoş gelen yapıda, kullanışlı ve güvenlikli siteler oluşturmak için yeterli değildir. Sayfaları renklendirmek ve stil belirlemek adına CSS kullanmak gerekir. Animasyonlar için ise JavaScript’ten faydalanmak icap eder. Dinamik hale büründürmek ve profesyonel bir hale getirmek için ise PHP, ASP.NET, Python gibi programlama dillerini kullanmak lazımdır.Bootstrap ile Web Sitesi Yapımı için Gerekenler
Tasarım konusu ile uğraşmak istemiyor ve responsive olacak şekilde siteleri hızlıca inşa etmek istiyorsanız, Bootstrap kullanmanızı öneririz. Peki, Bootstrap ile web sitesi nasıl yapılır? Buyurun adım adım öğrenelim…Bootstrap’i Projemize Dahil EtmekBootstrap ile web site kurmak için bu adresten (https://getbootstrap.com) Bootstrap’in son sürümü olan gerekli CSS ve JavaScript dosyalarını indirebilir veya aşağıda vereceğimiz hazır bağlantıları projenize dahil edebilirsiniz:CSS; href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
JS;Adreslerinden CSS ve JavaScript dosyalarını projenize dahil ettikten sonra Bootstrap’in neredeyse tüm özelliklerini kullanabiliyor olacaksınız.Dipnot: Ekran görüntülerinde “Visual Studio Code” kod editörü kullanılmıştır.Örnek Görsel: (Hazır bağlantılar projeye dahil edilmiştir.)
Verilen bağlantılar görselde ki gibi HTML’intagleri içine dahil ettikten sonra, jQuery’i projeye dahil etme aşamasına rahatlıkla geçebilirsiniz.Örnek Görsel 2: (Gerekli Bootstrap Dosyaları indirilip, karmaşa yaratmaması için klasörlere dağıtıldıktan sonra projeye dahil edilmiştir.)
İndirilen bir çok css ve javascript dosyasından yapacağınız proje için ihtiyacınız olanları almanız yeterlidir. Şuan için bize sadece bootstrap.min.css ve bootstrap.min.js dosyaları lazım. Bu iki dosya projemizi hayata geçirmek için fazlasıyla yeterlidir. Projenizde ki dosya yollarını görselde ki gibi HTML’in;etiketleri içine dahil ettikten sonra, jQuery’i projeye dahil etme aşamasına rahatlıkla geçebilirsiniz.Bootstrap Hazır Site Kodları Nereden Bulunabilir ve Nasıl Kullanılır?
Bootstrap 5 ile web sitesi yapımı için gerekli belgeler Bootstrap’in kendi sitesi (getbootstrap.com) de dahil olmak üzere bir çok sitede de mevcuttur. Hazır site indirmek için de Bootstrap hazır site kodları burada mevcuttur (startbootstrap.com). Yaptığımız html web sitesi kodları da proje bitiminde paylaşılacaktır. Bootstrap yardımı ile html web sitesi kodlarının yazımına geçelim.Dosyaları Sıkıştırarak Kullanmanın Artıları Nelerdir?
JavaScript ve CSS’in sıkıştırılmış hallerini aldığımız için Web Sitemiz daha performanslı çalışacak ve bizlere avantaj kazandıracaktır. Ancak Bootstrap belgelerinin sıkıştırılmış hallerini alıp almamak sizin tercihinize kalmıştır. Dilerseniz normal css ve js dosyalarını da alabilirsiniz. Düzenlenmesi mümkün ve düzenlenmesi daha basit olan sıkıştırılmamış kodların tek eksiği site hızını etkilemesidir. Lakin normal css dosyalarını düzenledikten sonra tekrar sıkıştırmak mümkündür. CSS Dosyalarını sıkıştırmak için Google’a minify css; JavaScript dosyalarını sıkıştırmak için ise minify JavaScript yazmanız yeterlidir.Bootstrap ile Web Sitesi Yapımı için Dosyalar İndirilmeli mi Yoksa Bağlanmalı mı?
Dosyaları paylaştığımız bağlantı adresleri ile projemize dahil edebiliriz. Ancak sayfamız uzak sunucuya veri isteği gönderecek ve bu sebeple belgeler daha geç etkinleşecektir. Belgelerde herhangi bir değişiklik yapma imkanımız da bulunmayacaktır. Şuan tasarlayacağımız web sitesini, tasarlamak için Bootstrap dosyalarında herhangi bir değişiklik yapmaya ihtiyaç yoktur. Bu yüzden dosyaları uzak bağlantı yolu ile projeye bağlamak sizin için bir sorun teşkil etmeyecektir. Lakin dosyaları indirirseniz, ilerleyen zamanlarda projeyi revize etmek isterseniz Bootstrap dosyasında rahatlıkla değişiklik yapabilirsiniz.Bootstrap ile Web Sitesi Kurma Proje Bağlama Kısmı
İlk olarak indirdiğimiz Bootstrap dosyasının içindeki gerekli olan CSS ve JS dosyalarını projemizinetiketi içine dahil ediyoruz ve projemizi Bootstrap kodlarını kullanmaya uygun hale getiriyoruz.Şimdi ise jQuery’i projemize bağlamayı görelim:rel="stylesheet" href="css/bootstrap.min.css">
jQuery Nedir?
jQuery, 2006 yılında John Resig tarafından “Daha az yaz, daha çok iş yap” sloganıyla oluşturulan hızlı ve özlü bir JavaScript kütüphanesidir. 2006 Yılından bu yana geliştirilmeye devam eden jQuery kütüphanesi, JavaScript içinde yapılabilecek birçok şeyi kullanıcısına kısa ve basit fonksiyonlar ile sunmasından ötürü de tercih edilir. Kendisi bir dil değil, zengin özelliklere sahip kütüphanedir. Genel olarak Slider, Animasyon Efektleri ve görselleştirme gibi alanlarda kullanılır. jQuery aynı Bootstrap kütüphanesi gibi bir kütüphanedir. Bootstrap CSS kütüphanesi iken; jQuery JavaScript kütüphanesidir. JavaScript ile web sitesi yapımından ziyade jQuery yardımı ile web sitesi kurmak çok daha pratik olacaktır. Projemizde mevcut olan Carousel (Slider) gibi nesnelerde de hareket, geçiş gibi özellikleri daha kısa bir şekilde tanımlayabilmek için jQuery kullanacağız.jQuery’i Projeye Dahil Etmek
jQuery’i projenize aşağıda bulunan görselde ki gibi dahil edebilirsiniz.İndirme yoluyla da projemize dahil edebileceğimiz jQuery’i içerisinde herhangi bir değişiklik yapmayacağımız için projemize internet üzerinden dahil ediyoruz.etiketimizin son hali bu şekilde oluyor:
jQuery dosyasını Bootstrap.min.js’in üstüne yazmazsanız, Bootstrap JavaScript’in de bir çok özelliği çalışmayacaktır. Bootstrap.js, jQuery ile entegre olarak çalışmaktadır. jQuery javascript ile web sitesi yapımında da bizlere çok büyük kolaylıklar sağlamaktadır.Bootstrap ile Tek Sayfa Web Sitesi Yapımı
Bağlanacak dosyaları da bitirdiğimiz için artık sitemizi tasarlayacak kodları yazmaya başlayabiliriz. Sayfamızın içerik girilecek alanı olanetiketinin içine html web sitesi kodlarını doldurmaya geçiyoruz. Örnek olarak tek sayfa html ile web sitesi yapımını göreceğiz. Sitemiz basit bir fotoğrafçı sitesi olacak. Sitemizde çektiğimiz fotoğrafları sergileyerek telif hakkını almak isteyen müşterilerin bize arama yöntemi ile ulaşmasını sağlayacağız. Bootstrap ile menu yapımından başlayalım.Bootstrap ile Nasıl Menu Yapılır?
Navbar (Menu) Web Sitesinin orta ve üst kısımlarında yer alan, genellikle grafiklerle süslenen ve Web Sitesinin ana geçiş sayfalarına ulaşılabilen navigasyon menüsüdür. Yapımı Bootstrap ile fazlasıyla basit. Menü sayfaya giren kullanıcıları, web sitesinin en önemli bölümleri arasında kolayca geçiş yapabilmeleri için de kullanılır. Html kodları bu şekildedir:
Bu kod sonucunda html web sitesi kodlarından aldığımız çıktı bu şekildedir:
Bootstrap ile Web Sitesi Yapımı Navbar Class Düzenleme
Burada Bootstrap’in bize verdiği navbar classından yararlanıyor ve navbarımızı dark (karanlık) tema yapmak için navbar-dark ve bg-dark classlarını birlikte kullanıyoruz. Bu classların sağladığı özellikleri görmek için bootstrap.css dosyasını açıp inceleyebilirsiniz. Örnek olarak navbar classının sağladığı özelliklere birlikte bakalım:
Navbar classının sağladığı temel özellikler burada yer almakta biz class olarak navbarı belirttiğimizde otomatik olarak bu özellikler bizim tanımladığımız div, input veya herhangi bir elemente gelmektedir. Bootstrap en temelinde aslında hazır classlar ile bize bu özellikleri sağlamaktadır. Bootstrap bizi css yazma derdinden de kurtarır. Aslında sadece Bootstrap değil, neredeyse tüm kütüphanelerin başlıca amacı budur.Menümüz de “Hoş Geldiniz” yazısını menünün başlığı olarak kabul edebiliriz. Genel olarak web site sahipleri buralara firma ismi veya logosu koyarlar. Buraya minik düzenlemeler ile sizde firma ismi, veya logosu koyabilirsiniz. Hoş Geldiniz yazısını özel kılmak ve menü bağlantılarının yan yana olmasını engellemek için navbar-nav class’ının yanına “mx-auto” adında bir class daha ekliyoruz. Bu classın kod çıktısı:Şeklindedir. Important önemli olduğunu ve öncelliğin bu classa verilmesi gerektiğini vurgular. Burada mx-auto kodumuzu li taginin içinde ki yazılarımızı ortalamak için kullanacağız. mx-auto Classımızı kullandıktan sonra kod görüntüsü şu şekilde olacaktır:margin-right: auto !important; margin-left: auto !important;
Bu kod sonucunda aldığımız çıktı bu şekildedir:
Navbarımızı yaptıktan sonra aşağı doğru sitemizi oluşturmaya devam edelim.Bootstrap ile Web Sitesi Yapımı Slider Oluşturma
Bootstrap ile web sitesi yapımı konusunda slider oluşturmaya da değinelim. Bu noktada Bootstrap’in yine bizim için oluşturduğu carousel ve slide classlarından yararlanabiliriz. Yapmamız gereken Carousel-item classını kullanarak sliderın içerisinde göstereceğimiz resimleri eklemek. Carousel’ımıza istediğimiz kadar carousel-item ekleyip, fotoğraf yolunu belirtebiliriz. Ne kadar ekleme yaparsak o kadar fotoğrafı sıraya alırız. Bu fotoğrafları sistem ekleme sırasına göre gösterir. Kullanıcılara fotoğrafın sağında görünen ileri ve geri butonlarını carousel-control-prev ve carousel-control-next sınıfları ile hazır olarak sunabiliriz. Bu sunum kullanıcı deneyimini de yüksek oranda etkiler.Bu kod sonunda aldığımız çıktı şu şekildedir:
Şimdi ise yaptığımız işi pazarlamak adına birkaç özelliğimizi sunabileceğimiz bir alan yaratalım.
Bu alanda Bootstrap’in bizim için sağlamış olduğu container ve row classlarından yararlanıyoruz. Bu classları birçok alanda istediğiniz görünümü elde etmek için kullanabilirsiniz.Bootstrap Grid Yapısı
Boostrap’in en önemli özelliklerinden birisi de bize sağladığı grid yapısıdır. Grid yapısı sayfaya yerleştirmiş olduğumuz elementlerin sayfanın neresinde yer alacağını ayarlamak için biçilmiş bir kaftandır. Bootstrap’i Bootstrap yapan özelliktir desek yanlış demiş olmayız.Her row (satır) içinde toplam 12 kolon mevcuttur. 12 Kolonu değişik oranlarla birleşebilir ve böylece kullanım sağlayabiliriz.
İletişim Bilgilerinin Paylaşılması
Şimdi basit bir container oluşturup içerisine başlık, metin ve bir buton ekleyeceğiz.
Container oluşturup burada ki container’ı kapatmamaya dikkat etmeliyiz. Container’ı kapatırsak aşağıya gelecek elementleri container, kendi içine alamaz. Bir diğer Bootstrap özelliği olan card-header ve card-body classlarını kullanıp bilgilerimizi bir card içine alıyoruz. Card-body içerisine başlığımızı, metnimizi ve butonumuzu koyup aşağıdaki çıktıyı elde ediyoruz:
Sıra fotoğrafını çektiğimiz sanat eserlerini sergileyeceğimiz bölüme geldi.Dikey Card ile Fotoğrafları Listelemek
Bootstrap içerisinde birden fazla card yapıları mevcuttur. Burada yine Bootstrap’de ki mevcut card yapılarından birini kullanıyoruz. Card kısmına fotoğraf uzantısı belirttikten sonra card-body içerisine başlık ve metin girişi yapabiliriz. Card-footer kısmına en aşağıda olmasını istediğimiz metni yazabiliriz. Ben projem için çekim tarihi yazacağım. Card-group classının içine 3 adet card aldığımız zaman card’lar yan yana gelecek ve düzenli bir görünüm oluşturacaktır. 3 Adet almak zorunlu değil, card-group içine ne kadar card eklerseniz o kadar card yan yana gelir.Yazdığımız kodun çıktısı da bu şekildedir:
Sanatçıların Fotoğraflarını ve Alanlarını Sergilemek
Sitemizin son kısımlarına yaklaştık. Şimdi yapacağımız işlem ise isimlerini duyurmak adına resimleri çeken sanatçıları göstermek ve listelemek. Fotoğrafları çeken sanatçıların profil fotoğraflarını, yuvarlak çerçevede profil fotoğrafı görünümü ile gösterecek ve hakkında yazılar yazacağız.Yukarıda gösterdiğimiz grid sistemine dayalı 3 adet col-lg-4 adında sınıf oluşturuyorduk. Oluşturduğumuz sınıfların içerisine fotoğraf, başlık ve içerik girişi yaptık. Daha fazla detay göstermek için de temsili bir “detayları gör” butonu ekledik. Ancak bu butonların yönlendirme kısmı boş. Yönlendirmeye istediğiniz site adresini ekleyebilir veya mail, telefonla arama gibi seçenekleri tercih edebilirsiniz. Tamamen sizin hayal gücünüze kalmıştır. img elementine verdiğimiz img-circle sınıfı sayesinde yüklediğimiz fotoğrafların yuvarlak bir biçimde olmasını sağladık. Width ve height değerlerini de manuel olarak vererek fotoğrafların önerilen boyutunu aşmasını engelledik.
Bu kodun çıktısı da burada mevcut.
Sitemize Footer Eklemek
Sitemizin son kısmı olan footer’ı da ekleyip bitirebiliriz. Basit ve küçük bir footer başlangıç için yeterli olacaktır. Gizlilik sözleşmesi, iletişim seçenekleri gibi eklemeler yapmakta tamamen sizin hayal gücünüze kalmıştır.
· kodu ile küçük bir nokta ekleyebiliriz. Ana Sayfaya geri dön kodunun yönlendirmesine # eklediğimiz için otomatik olarak bizi bulunduğumuz sayfanın en üstüne atacaktır.