Bootstrap pek çok özelliğe sahip olan ve birçok projede kullanılan bir css framework’dür. Bootstrap grid sistemi üzerinden çalışarak, sayfayı 12 sutunda bizlere sunar ve kullanmamızı sağlar. Bazı özellikleri sayesinde, Mobil cihazlarda bu grid sisteminin yerlerini değiştirmemize imkan sağlar. Örnek olarak 12 sutunumuzu 3 parça halinde kullarak (A)(B)(C) olara bir sistem üzerinden tasarımımızı yaptık. Mobil boyutlara geldiğimiz zaman biz bu sistem üzerinde değişiklik yaparak, sıralamayı (B)(A)(C) olarak değiştirmek istiyoruz. Genelde content bölümü içerikler olur ve (B) bölümünde yer alır ve o bölümü mobilde öne çıkarmak isteriz.
Bilgisayar görüntüsü;
| A(left bar) | B (content) | C (right-bar) |
Mobilde istediğim düzen;
| B (content) |
| A(left bar) |
| C (right-bar) |
Pull And Push Class ve bootstrap grid sistemi;
Standart grid sistemi yapısı;
.col-xs-#, .col-sm-#, .col-md-#, ve .col-lg-#.
Push ve pull kullanımı;
.col-xs-push-# veya .col-xs-pull-#. Şunlar üzerindende uygulanabilir; sm, md, xs ve lg.
Burada ufak bir hileye başvuracak ve html kodlarımızda ufak bir düzenlemeye gideceğiz. Bildiğiniz gibi yapılan tasarımlar divlerin sıralarına göre ekrana çıktı verir. Biz ilk olarak bu sıralamayı pull ve push classları ile değiştireceğiz.
Alttaki görseli incelediğimizde hilesiz bir şekilde yapılan tasarımdan örnek görüyorsunuz.
Yukardaki görüntü size hiç yabancı gelmiyordur çünkü bu kodlamada kullandığımız sistemdir. Şimdi buna bunda ufak bir düzenlemeye gidelim.
Şimdi olayın püf noktası css hilemize gelelim. divlerin sırası değil de içerisinde bulunan içeriklerin yerlerini değiştireceğiz ve büyük ekranlarda “col-md-push-4” ve “col-md-pull-4” class’ları ile birini 4 grid sistemi ileri iterken, diğerini 4 grid sistemi geri çekeceğiz. Bu sayede kodlama kısmında sıralama farklı iken ekrana yazdırılan görüntü daha farklı olacaktır.
Örneği güzelce inceleyelim ve divlerin sıralamasının değiştiğine ama ekrana verilen çıktının diğeri ile aynı olduğuna dikkat edelim;
Burdaki amaç ilk sırada yer alan “orta” içerikli divi 4 grid sistemi ileri itmek ve “sol” içeriğe sahip 2. divi 4 grid sistemi geri çekerek sıralamalarını değiştirmekti. Fakat col-md-# classında kullanıldığı için bu yer değiştirme olayı sadece masa üstünde geçerli oldu yani ekran küçüldüğü zaman mobil boyuta geçtiğinde sıralama tekrar eski haline dönecek ve ileri ittiğimiz orta kısım en başa gelirken, geri çektiğimiz sol kısım ile kendi yerine tekrar geçecektir. Zaten bizim yapmak istediğimiz de tam olarak buydu öyle değil mi? 🙂
Şimdi son olarak mobilde görünümünü düzenleyelim. Yani col-xs-# classlarını girelim ve alt alta getirerek işlemimizi tamamlayalım, bootstrap dersimizi de burada bitirelim.
Canlı örnek için buraya tıklayın.
Web bulutu…
Bir önceki yazımız olan Bootstrap'i projeye dahil etmek ve grid sistemini kullanmak. başlıklı makalemizde bootstrap, bootstrap anlatim ve bootstrap tr hakkında bilgiler verilmektedir.
Çok teşekkürler. Gayet net ve anlaşılır bir anlatım olmuş. Emeğinize sağlık.
Elinize sağlık çok işime yaradı.
tek kelimeyle harika anlatım emeğinize sağlık