Bootstrap Pull & Push işlemleri ile divlerin yerlerini değiştirme. | Web bulutu

Bootstrap Pull & Push işlemleri ile divlerin yerlerini değiştirme.

bootstrap-nedir-temel-seviye-anlatim

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.

bootstrap-egitimleri-pull-and-push-turkce-anlatim

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;

bootstrap-egitimleri-pull-and-push-turkce-anlatim-2

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.

bootstrap-egitimleri-pull-and-push-turkce-anlatim-3

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.

2 Comments

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir