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.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
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.
webbulutu bootstrap tasarim Merhaba Bootstrap!
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-3 | col-lg-3 | col-lg-3 | col-lg-3 |
col-lg-12 |
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.
iyi günler, benim 3-6-3 col-lg ye göre tasarlanmış dizaynım var. tel görünümünde col 6 nın en başta gelmesini istiyorum bunu nasıl yapabilirim?
Merhaba tuğçe hanım. Sorunuzun cevabı “pull” and “push” classları ile alakalıdır.
Sizlere göndereceğim örnek üzerinden ilerleyebilir ve mantığını kavrayabilir siniz.
http://codepen.io/bulutaylak/full/wWKrdL/
Çok teşekkür ederim Bulut Bey 🙂
paylaşım için teşekkürler