Responsive web page development with bootstrap 4 in VS Code- Part1 [Turkish Tutorial]

Bootstrap

The most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

What Will I Learn? (Neler Öğreneceğiz?)

• What is Boostrap? (Bootstrap Nedir?)
• What is Grid? (Grid Nedir?)
• What is Responsive Development? (Responsive Geliştirme Nedir?)

Requirements (Gereksinimler)

• Visual Studio Code (Download)
• Basic html and css knowledge (Basit seviye html ve css bilgisi)
• Browser (Tarayıcı)

Difficulty (Zorluk Seviyesi)

• Basic (Temel)

Tutorial Contents (Eğitim İçeriği)

Bootstrap Nedir ?

Bootstrap açık kaynak kodlu (open source) ücretsiz olarak sunulan bir CSS framework yapısıdır. Kullanmış olduğumuz telefonlar, bilgisayarlar, tabletler daha doğrusu web sitelere ulaşabilecek her türlü cihaz için responsive(elastik denilebilir) olarak web sayfaları tasarlamamıza olanak veren bir yapıya sahiptir. İçerisinde hazır olarak yazılmış css classları barındırır ve çok az bir css bilgisi ile üst düzey responsive sayfalar tasarlamamıza olanak verir.

Bootstrap Nasıl İndirilir ?

Bootstrap için buraya tıklayarak ulaşım sağlayabiliriz.
Alttaki görselde bulunan download butonuna tıklayarak css ve js dosyalarını indirebiliriz.

CSS dosyasını kendi sunucunuzda değil de BootstrapCDN olarak dahil etmek için kodunuza aynı
linkte bulunan bu kısımda ki kodları kodunuza dahil edebilirsiniz.

NOT: Bootstrap kütüphanesi ile jquery kütüphanesinide kodumuza dahil etmemiz gerekmektedir.
Onu da buraya tıklayarak indirebiliriz ve css dosyalarımız ortak css klasörü altında, js dosyalarımızı ise ortak js klasörü altında toplayalım.

Responsive Geliştirme Nedir?

Türkçe olarak elastik yapı anlamına gelmektedir. Oluşturulan web sayfalarının görüntülendiği cihaza uygun(bilgisayar, telefon, tablet vb. ) olarak boyut almasını sağlayan, her cihaz için esnek olan bir geliştirme yapısıdır.

Grid Nedir?

Grid yatay ve dikey olarak gösterilmek istenilen verilerin yerleştirildiği yapıdır. Türkçe olarak ızgara yapısıda denilmektedir.

---

Basit bir html sayfası oluşturup projemize CDN linklerini ya da indirmiş olduğumuz css ve js dosyalarını ekliyoruz.

Dizin yapımız şu an bu şekilde oluştu.

Css dosyalarımız "head" etiketleri içine,

Viewport elementinin alabileceği özellikleri de vermiş olalım:

width: device-width ile cihazın ekran genişliği de verilebilir.

initial-scale: Sayfayı ilk gösterilirken ne kadar ölçekli olarak verileceği. Örneğin 1.0 değeri verilirse başlangıç görünütüsü ölçeklenmeden gösterilir. 0 ile 10.0 arası bir değer olabilir.

shrink-to-fit: kullanıcının sığdırmak için küçültme işlemini önlüyoruz.

Js dosyalarımız "body" bitiş tagımızın hemen üzerine yollarını göstererek kodumuza ekliyoruz.

Şimdi en çok kullanacağımız grid yani ızgara yapısının bootstrap ile nasıl yapıldığını görelim.

Bu şekilde bir kod parçacığı eklediğimizde çıktı olarak şunu görmekteyiz.

Buradaki div class özellikleri ;
container : eklenen div yapısının row ve col yapıları içereceğini yani grid yapısı olacağını belirtir.
row : eklenen div için satır olduğunu ifade eder.
col : eklenen div için içerisinde bulunduğu satırın bir sütunu olduğunu belirtir.

Bootstrap ile bir satır 12 parça olarak düşünülebilir ve bu satırlara numaralar vererek istenilen boyutta ayırma işlemleri yapabiliriz.

Her col-(istenilen boyut) şeklinde yapılarak boyutlandırma yapılabilir, bu sayıların toplamı 12 olmalıdır.
Çıktı;

Burada ki ek olarak eklenen doldur class'ı özel bir css class yapısıdır, gridin anlaşılabilir gözükmesi için eklendi. Yeni bir "custom" adında css dosyası oluşturup koda dahil edildi.

doldur class;

Başka bir örnek;
Bu sefer 4 sütunlu ilk 3 sütun 1'er boyut son sütun kalan 9 boyut olacak şekilde ayarlanıyor.

Çıktı;

Bilindiği gibi bootstrap responsive geliştirme imkanı sunmaktadır. Tarayıcı boyutumuzu küçülttüğümüz zaman grid yapısı da ona göre boyutlanmaktadır.

Grid yapısı için pencere boyutumuz çok küçültüldüğü zaman sütunlar resimdeki gibi alt alta gelebilmektedir.

Grid yapısında boyutlandırma olarak 5 yapı bulunmaktadır;

• col
• col-sm
• col-md
• col-lg
• col-xl
  

Tabloda gözüktüğü gibi col yanına istenilen boyutlandırma yazılabilir ve web sayfası o boyutlardan daha aza küçültüldüğü durumlarda grid yapısı ona göre davranır.
Son 4. sütunlu grid yapısına col-* yapılarını col-xl-* olarak güncelleyelim.

Çıktı;

Görüldüğü gibi col-xl yapısı normal yani extra small col yapısına göre daha farklı çıktı vermektedir. Bunun sebebi xl yapısında 1200px altına düştüğü zaman yapı sütunlar alt alta gelmeye başlamaktadır. Değerler tablodan görülmektedir.

Yapımıza 2. satırı ekleyelim ve bunu 2 ve 10 şeklinde boyutlandıralım.

Çıktı;

Satırlar(row) için sütun(col) boyutlandırmaları bu şekilde yapılmaktadır.

Eşit genişliğe sahip sütunlar oluşturmak istediğimiz zaman her seferinde örnek olarak 2 sütun için col-lg-6 demek veya 4 sütun için col-lg-3 olarak her birini tanımlamız gerekmektedir. Bu yapılarda düz olarak boyut vermeden col tanımlaması otomatik boyutlandırma yapmaktadır.

Görüldüğü gibi sadece col olarak class tanımlamaları yapıldı.

Çıktı;

Ve üstteki görselde görüldüğü gibi kaç sütun var ise col ona göre otomatik boyutlandırma yapmaktadır.
Ya da belirli bir sütunu boyutlandırıp diğer sütunları otomatik olarak boyutlandırmasını istiyor isek ;

Çıktı;

Grid yapısı için boyutlandırma işlemleri bu şekilde yapılmaktadır, serinin devamında ileri seviye grid yapısı ve nav class yapısı ele alınacaktır.
Aklınıza takılanları sorabilirsiniz, diğer derste görüşmek üzere.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---