Bootstrap’i projeye dahil etmek ve grid sistemini kullanmak.

Merhabalar bu yazımızda  bootstrap’i  projemize  dahil ederek grid sistemi hakkında  bilgi sahibi olacağız. Bir önceki yazımızda az çok bootstrap hakkında  bilgiler vermiştik, şimdi ise uygulama  kısmına  gelerek bootstrap ile web sayfasını yapımını aşama  aşama göreceğiz.

 

ilk olarak Buraya tıklayarak bootstrap download  sayfasına  giriş yapıyoruz ve bootstrap bölümünden download diyerek kütüphaneyi bilgisayarımıza indiriyoruz.

---

 

Rarlı dosyayı masa  üstüne çıkarın ve içindeki klasörün adını “bootstrap” olarak değiştin. Klasörü localhost’ta bulunan projenizin içine atın. Elimizde şuan aşağıdaki şemada  olduğu gibi bir düzen içerisinde dosyalar  bulunması gerekir.

 

Bir sonraki adım ise, css kodlarını, daha doğrusu html nesnelerin tarayıcılarda  bıraktığı defauld ayarları sıfırlamaya. Bu konu hakkında  kısa  bir yazı da  yazabiliriz, şimdilik indirip projeye  dahil edebilir, sonra  ne işe yaradığına google’ı kullanarak bakabilirsiniz. Buraya tıklayın ve  “Normalize CSS” dosyasını indirerek, Bootstrap klasörünün içindeki CSS klasörüne atın.

Son olarak  özel css kodlarımızı yazacağımız bir style dosyası oluşturmaya. Onu da  css klasörü içerisine atabilirsiniz. Bu dosyayı neden oluşturma  gereği duyduğumuzu birazdan anlayacaksınız merak etmeyin.

Şimdi sıra  geldi projemize  entegre  etmeye. ben sıfırdan  bir dosya  açarak projemize entegre  edecek kodları aşağıda  paylaştım. Eğer hazırlanmakta olan bir projeye sonradan bootstrap ekenecekse  siz aşağıdaki örneğe bakarak aynı şekilde  düzenleyebilirsiniz.

 

---

Evet, Boostrap indirme işlemi tamamlandı ve projemizi index’imize dahil ettik. Sıra geldi Grid sistemi kullanmaya. Grid sistem kullanımı tasarım başlamadan belirlenmelidir, sonraki yapılacak değişiklikler veya doğaçlama yol izleme beraberinde  sorunlar  getirecektir. Bir önceki yazımızda  bahsettiğimiz gibi, bootstrap sayfayı 12 parçaya bölerek işlem yapmamız üzerine  ızgara sistemini kullanmış.

col-lg-6

col-lg-6

col-lg-4

col-lg-4

col-lg-4

col-lg-2

col-lg-10

Üstteki örnekte  fark ettiyseniz, divler  kullanılarak  ekranın 12 parçası tamamlanmaya  çalışılır. Bu örnekler çoğaltılabilir, mesela 9+3, 10+2, 1+11 gibi gibi istediğiniz biçimde  parçalar halinde  çalışabilirsiniz. Yeter ki parçaların toplamı 12’yi geçmesin (geçerse zaten taşma olacaktır). Bunlara “sütun” adını veriyoruz yani bir sayfa  12 sütundan  oluşmaktadır.

Şimdi birazdan bir sütun ekleyerek, tarayıcılarda  nasıl göründüğünü ve  nasıl bir yol izlendiğini anlatacağız ama  daha öncesinde  satırlardan yani “row”  classı tanımlanmış divlerden  bahsedelim kısaca. Bir veya birden fazla sütunu  bir arada  tutmak için satırlar kullanırız. Satırları da  bir arada  tutmak için bir tane  kapyasıcı “container” gerekmektedir. Aşağıda  sizler için hazırladığım  görselleri inceleyerek  div yapısı  hakkında bilgi sahibi olabilirsiniz.

 

 

Aşağıda bir adet container içerisine eklenmiş, 3 tane  satır(row) görmektesiniz. Container divi 1170 px  uzunluğunda ve sayfaya ortalı bir vaziyette olur.  container-fluid  ise, tam ekran(esnek yapılı) sitelerde kullanılır.

---

 

Satırları ekledikten sonra  her bir satır içerisine divlerimizi yerleştireceğiz. Aşağıdaki görselde, her bir satıra yerleştirilmiş divler mevcut. Amaç her satırın  içindeki 12 parçayı tamamlamak adına  divler yerleştirmektir. Yani 2 tane sağlı sollu div olacaksa, 2 adet col-lg-6  divi ile 12’ye tamamlanmalıdır. Bu arada, divler arasındaki boşlukalr normalde  yoktur, görselde yaptığımız işlemler  belli olsun diye ben bilerek bıraktım.

İzlenilen yolu az çok anladığınızı umuyorum. Amaç basit; Kapsayıcı > satır > sütunlar     bu yolu asla  unutmayın çünkü grid sistem bundan  ibarettir.

---

Şimdi gelelim en sevdiğim bölüme. Divlerin yerlerini tarayıcıya göre  değiştirmemiz gerekecektir. Çünkü mobil ekranlara  sığdırmak için divler alt alta sıralanır. Peki bunu nasıl yaparız?

Öncelikle bir dive  birden fazla class atandığını biliyor olmanız gerek, bu basit bir bilgidir. Aşağıdaki grid sistem yapısını inceleyin ve fikir sahibi olmaya çalışın.

 

Col-lg-  :  1200 px ve üzeri cihazlar için geçerli.

Col-md- : 992 px   ve üzeri cihazlar (laptop,masaüstü) için geçerli.

Col-sm- :  768 px ve üzeri cihazlar(tablet) için geçerli.

Col-xs- : 768 px altı cihazlar(Mobil & tablet) için geçerli.

 

örnek uygulama; 

container içerisine, 1 adet row class’ı eklenmiş div oluşturuyoruz ve içerisine 2 adet div koyuyoruz. Class’larına ise, en büyük ekranlarda 6*6, masaüstü için 6*6, tablet cihazlar için 6*6 eklediğimiz takdirde, mobil hariç tüm ekranlarda  yan yana iki div olarak görünecektir. İşte amaç burada mobil ekranlar için col-xs-12  classını yazarak, mobil ekranlara gelince  yan yana 2 div yerine, alt alta gelmiş 2 div oluşturmaktır.

 

 

Mobil ekranlarda sonuç;

---

Şimdi en önemli kısımlarından  birisi olan, özell css kodlarımız  ile  müdahale etme  kısmına. İster oluşturduğumuz satırlara, ister sütun divlere  ekstra bir class yazarak, kendi css kodlarımızı dahil edebiliriz. Bunu yapmak zorundayız çünkü, bootstrap grid sisteminde bazı defauld ayarlar bulunmakta ve onları sıfırlamamız gerekebilir. Hatta divlerin yükseklikleri, border, renk gibi bir çok özelliğini kendi tanımladığımız css kodları ile belirleyeceğiz, bunu yaparken boş olarak oluşturduğumuz style dosyasını kullanacağız.

Satırlar (.row)

Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır aynı zamanda taşan kolonları satır başı yaptırmaya yarar.

Kolonlar (.col-*)

Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki mesafe 30px olacaktır.

---

 

.offset sütunlar;

Offset, divleri margin ile birbirinden ayırmak için kullanılır. Eğer, col-lg-3  divleri ile 4 tane div eklenmişse ve bu divleri birbirinden ayırmak istersek aşağıdaki gibi bir yol izlememiz gerekmektedir. Aşağıdaki örneği dikkatlice inceleyin ve margin ile boşluk bırakmak için nasıl bir yol izlenmiş bilgi sahibi olmaya çalışın.

 

---

 

Grid sistem konusunun bu kadar anlatma yeterli diye düşünüyorum. Sonuçta verdiğim örnekler ve anlatımım yeterince açıklayıcı. Daha fazla örnek ve ingilizce açıklamalar için buraya  tıklayın. Her hangi bir sorununuz olursa, yorumlar kısmından  iletişime geçebilirsiniz. Görüşmek üzere 🙂

Web bulutu.

Bir önceki yazımız olan Bootstrap nedir? Temel seviye giriş. başlıklı makalemizde bootstrap, bootstrap anlatim ve bootstrap nedir hakkında bilgiler verilmektedir.