Bootstrap ile Adım Adım Web Sitesi Yapımı

İçindekiler

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:

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 Kaynaklar

Web 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 Etmek

Bootstrap 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; <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
JS; <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

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’in <head> </head> tagleri 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.)

bootstrap-site-yapimiİ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; <head> </head> 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ı projemizin <head> etiketi içine dahil ediyoruz ve projemizi Bootstrap kodlarını kullanmaya uygun hale getiriyoruz.

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"></script>

Şimdi ise jQuery’i projemize bağlamayı görelim:

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.

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

İ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.

<head> etiketimizin son hali bu şekilde oluyor:

bootstrap header örnegijQuery 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ı olan <body> etiketinin 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:

bootstrap nav menu kodlarıBu kod sonucunda html web sitesi kodlarından aldığımız çıktı bu şekildedir:

bootstrap-nav-menu-gorunumBootstrap 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:

bootstrap-navbar-cssNavbar 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ı:

  margin-right: auto !important;

  margin-left: auto !important;

Ş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:

bootstrap-navigasyon-menusu

Bu kod sonucunda aldığımız çıktı bu şekildedir:

bootstrap-navigasyon-ornegi

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-slider-kodlariBootstrap 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:

bootstrap-slider-ornegiŞimdi ise yaptığımız işi pazarlamak adına birkaç özelliğimizi sunabileceğimiz bir alan yaratalım.

bootstrap-row-col

bootstrap-row-col-2Bu 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.

bootstrap-grid-yapisiİletişim Bilgilerinin Paylaşılması

Şimdi basit bir container oluşturup içerisine başlık, metin ve bir buton ekleyeceğiz.

bootstrap-iletisim-bilgileriContainer 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:

bootstrap-iletisim-ornekSıra fotoğrafını çektiğimiz sanat eserlerini sergileyeceğimiz bölüme geldi.

Dikey Card ile Fotoğrafları Listelemek

bootstrap-dikey-card-fotoları-koduBootstrap 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:

bootstrap-dikey-card-foto-ornegiSanatçı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.

bootstrap-yuvarlak-fotoBu kodun çıktısı da burada mevcut.

bootstrap-yuvarlak-foto-ornek

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.

bootstrap-footer&middot; 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.

bootstrap-footer-ornek

E-Ticaret, Web Tasarım ve Sosyal Medya Hakkında

Bültenimize Kaydolun, İşinizi Geliştirecek Gelişmelerden Haberdar Olun

İlgili Yazılar