Bootstrap Responsive Grid (Uyumlu Izgara) Yapısı

Bootstrap Responsive Grid (Uyumlu Izgara) Yapısı
Portakal Yazılım
10 / 08 / 2019

Mobil Internet kullanıcı sayısı her geçen yıl hızla artış gösteriyor. Akıllı telefonlarla birlikte son derece hızlı büyüyen kullanıcı tabanı, firmaları çağa ayak uydurmaya zorluyor. Hal böyle olunca günden güne masaüstü bilgisayarlarının önceliği azalıyor ve web uygulamaları mobil öncelikli olarak düzenlenmeye başlıyor.
Bir web sitesi hazırlandığında masaüstü veya dizüstü bilgisayar üzerinde gayet sorunsuz görünürken mobile geçildiğinde aynı site ziyaretçiyi memnun edecek bir görünümde olamayabiliyor. Bu nedenle Responsive bir tema kullanırsak hem mobil, hem tablet hemde dizüstü veya masaüstü bilgisayarlarda düzgün bir görünüm elde edebiliriz.

Peki ‘Mobile First’ ne demek?
Kısaca “Web teknolojilerinde önceliği bilgisayara değil de mobil cihaza vermek” demektir. Tasarımın ve kod yapısının öncelikli mobil de olması da  mobilden sayfanıza ulaşan ziyaretçilerin memnuniyeti açısından önemlidir.


Bir web sitesinin responsive olduğunu nasıl anlarız derseniz; Web sitesini herhangi bir tarayıcıda açıp küçültün. Sonra da boyutunu azaltıp arttırın. Sitenin görünümü farklılaşıyorsa o site responsive yani uyumludur.
İnternet bağlantısı kurabilen ve en çok kullanılan cihazların ekran boyutlarını şu şekilde sıralayabiliriz: 320px (iPhone dik tutuş), 480 px (iPhone yan tutuş), 600px (Android Tabletler), 768px (iPad + Galaxy Tabletler) ve 1024px (iPad yan tutuş ve masaüstü).

  • Extra small cihazlar   ~    Mobil (< 768px)             ~         col-xs-
  • Small cihazlar            ~    Tablet (>= 768px)           ~         col-sm-
  • Medium cihazlar      ~     Bilgisayar (>= 992px)     ~        col-md-
  • Large  cihazlar           ~     Bilgisayar(>= 1200px)    ~         col-lg-
 

Şimdi  grid yapısını  bir örnekle kodlayalım:

 
            //burada container-fluid ile tam sayfa çalışacağımız bir div açtım
                    // row ile bu div bir satırdır dedim. Bootstrap grid sisteminde ızgara 12 sütundan oluşur.Yani 1  satırımız toplam 12 sütundur.
//işte şimdi önemli olan kısım burası. col-xs-4 diyerek benim sayfam da bu div im mobilde toplamda 4 sütun yer kaplasın demek istiyoruz. Tablette demek istediğimizde  col-sm-2  kullanarak ölçülendiriyoruz. Dizüstü veya masaüstü bilgisayarda ise  col-md-2 col-lg-1 kullanıyoruz.Sütunların biraz belirgin olması için icon yerleştirdim, image yerine siz yazı da yazabilirsiniz.
 
//fark ettiğiniz gibi burada bir değişiklik yaptım ve bu div i mobil de görmek istemiyorum dedim. hidden-xs  ile gizledim. //burada da aynı değişikliği yaptım ve bu div i hem mobil de hem tablette hem de küçük ekran bilgisayarlarda görmek istemiyorum dedim. hidden-xs  ile mobilde hidden-sm  ile tablette hidden-md ile ise küçük ekran bilgisayarda gizledim.
 //burada container ile sayfamın kenarlarında boşluk olacak şekilde çalışacağımız bir div açtım.
 //mobilde tam sayfa  ve bilgisayarda 4 sütun yer kaplayacak şekilde bir div açtım.Bu row olarak açtığımız satırımızın bir sütunudur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation.

 //mobilde tam sayfa  ve bilgisayarda 6 sütun yer kaplayacak şekilde bir div açtım. Hala aynı satır (row) dayız.
 //sütunumuzun içine  sırayla 3 satır yerleştiriyorum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

 //yeni bir row (satır) açıyorum. 
//mobilde tam sayfa olsun diyorum ve  bilgisayarda 2 ye bölüyorum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 

 bilgisayardan görünüm
Tabletten Görünüm
Mobilden Görünüm
 
 

Fark ettiyseniz  üst kısımda bilgisayarda 12 tane yaprak, tablette 6 tane yaprak ve mobil de 3 tane yaprak var. Bunun sebebi ise  hidden-xs hidden-sm hidden-md sınıflarını kullanmamız. Ayrıca sayfayı küçülttükçe altta bir scrollbar çıkmaması ve ekrandaki görüntünün değişmesi de bizim doğru bir çalışma yaptığımızı gösterir.

Meryem Akdoğan
Portakal Yazılım