bootstrap-grid-system

Bootstrap ızgara sistemi – #2. bölüm

344 kez okundu  5 yorum  2017.05.14

Bootstrap derslerinin 2. bölümünde aslında Bootstrapı kullanma sebebimiz olan Grid System yani Izgara sisteminden bahsetmeye çalıştım. Mobil uyumlu / duyarlı siteler tasarlamak için ızgara sistemini bilmeniz kullanmanız gerekir. Bu sistemi Bootstrap bizim için sağlıyor. Unutmadan eğer bootstrap kurulumu dersiniz izlemediyseniz bu dersten önce izlemeniz gerekmektedir.

Izgara sistemi web sayfasını eşit olarak dikey parçalara böler. Genelde 12 eşit parçaya böler ve bu şekilde çalışmanızı sağlar. Yani sayfanızın belirttiğiniz maximum genişliği 12 sütun oluyor. Sayfanızın genişliği 960px de olsa, 1000px de olsa veya 1200px de olsa bu sayfanızın yüzdü yüz genişliği oluyor ve yüzde yüz genişlik de 12 sütun demek oluyor.


Bundan sonrası artık siz 12 sütun üzerinden sayfanızı istediğiniz kadar sütunlara bölebilirsiniz. Tek şart böldüğünüz sütunların toplamı 12 olması gerekiyor.

Örnek kod:

Yukarıdaki kod parçacığında da gördüğünüz gibi sütunlara bölme işlemi için doğru yapı kodlarınızı bir kapsayıcı (container) içerisinde yer alan satırlar (row) içerisinde yazmaktır. Bootstrap sütunlara bölme işlemi için 4 farklı çözünürlük sunar ve bu işlemi col-* isimli sınıflarla yapar.

Bu 4 çözünürlük aşağıdaki gibidir:

grid system bootstrap

Biraz karışık gelebilir belki anlattıklarım fakat videoda uygulamalı şekilde izledikten ve kendiniz uyguladıktan sonra aslında korkulacak birşey olmadığını anlayacaksınız 🙂

Aklınıza takılanları sormaktan çekinmeyin. Kanala abone olmayı da unutmayın 😉

 

etiketler: #bootstrap grid system , #bootstrap ızgara yapısı
5 yorum yapılmış
  1. Bootstrap Tablo yapısı – #3. bölüm | Online Öğren

    […] Bootstrap ızgara sistemi – #2. bölüm […]

    28 Mayıs 2017, 12:32
  1. Mahmut

    Güzel ve öğretici bir makale olmuş genel olarak makalelerin hepsi bir birinden başarılı teşekkür ediyoruz bu geniş bilgiler için

    30 Mayıs 2017, 05:51
  2. Gökhan DUMAN

    Merhabalar, bu güzel yazı için teşekkür ederim. Olması gerektiğinden yalın ve sade olmuş bu tür yazıları internette gördükçe gözlerimiz yorulmadan okuyabiliyoruz.

    30 Mayıs 2017, 17:07
  3. Hakan Kücük

    Bu önemli paylaşım için cani gönülden teşekkür ederim hocam

    16 Haziran 2017, 10:03
  4. Melis Kara

    Birçok sitede yetersiz bilgi var sayenizde işlerimi hallettim.

    14 Temmuz 2017, 19:43

Yorum yapın..