Bootstrap 4 Grıd Yapısı

Bir önceki konuda da bahsettiğim gibi bootstrap'ı bu kadar kısa sürede popüler yapan sebep kullanım kolaylığıdır. İstenilen HTML elemanının class parametresine uygun değeri vermek bizim için yeterli olacaktır. Geri kalan tüm işi bootstrap.min.css dosyası bizim yerimize halledecektir.
Bize sadece sitenin HTML iskeletini oluşturmak ve doğru özelliği doğru HTML elemanında kullanmak kalıyor, işte herşey bu kadar basit

Front-end tasarımcılarının en büyük sorunlarında biri de div, kutu veya p gibi elemanları yan yana getirmek veya ekran küçüldüğünde kutularda kayma olmadan düzgünce alt alta kaydırmaktır. Bootstrap 4 grid(ızgara) yapısı ile tüm bu sıkıntılara son veriyor.Gelin grid(ızgara) sisteminin kullanımına bir göz atalım.
Bootstrap 4 de grid(ızgara) yapısı satırlar ve sütunlardan oluşan bir tablo şeklinde düşünülebilir. Satırlar için oluşturulan div elemanlarının class parametresine row, sütunlar için ise col değerleri verilir.
Izgara yapısını oluşturmak için önce row class ı kullanılır, yani satır oluşturulur. Oluşturulan satır içine sütunlar yani col değerine sahip diğer elamanlar yerleştirilir.
Örnek:

<div class="row"> <div class="col">sütun 1</div> <div class="col">sütun 2</div> <div class="col">sütun 3</div> </div>
Yukarıda görüldüğü gibi önce row değeri verilerek satır div'i oluşturulur, sonrasında satır div'inin içine yan yana gelecek sütun div'leri col değeri verilecek oluşturulur .

Bootstrap 4'te boyutları eşit olan sütunlar için yalnızca class özelliğine col değeri vermek yeterlidir.
Grid(ızgara) yapısında sayfamız dikey olarak 12 eşit parçaya bölünmüştür. Genişlikleri farklı sütunlar oluşturmak için toplamları 12 olacak şekilde genişlik değeri verilmelidir
Önemli Not: Eğer toplam 12'yi aşarsa son eklenen sütun bir alt satırdan başlar.
Örnek : <div class="row"> <div class="col-8">.col-8</div> <div class="col-4">.col-4</div> </div>
Bunların dışında ekran genişliklerine göre farklı ekran düzenleri oluşturmak için ekran genişlik ekleri kullanılmaktadır. col-sm-4, col-md-6, col-lg-3 vs. Ekran genişlik eklerinin en büyük faydası, aynı div'e birden fazla ekran genişlik eki kullanılarak farklı çözünürlüklerde farklı konumlar almasını sağlamaktır.
Örnek: <div class="row"> <div class="col-md-4 col-sm-12">col-md-4 col-sm-12</div> <div class="col-md-4 col-sm-6">col-md-4 col-sm-12</div> <div class="col-md-4 col-sm-6">col-md-4 col-sm-12</div> </div>
Yukarıdaki örnekte tüm sütunlar md genişliğinde yan yana gelir, ancak ekran çözünürlüğü azalıp sm boyutlarına geldiğinde ilk sütun 12, 2. ve 3. sütünlar 6 genişliğine gelecektir. Böylece ekran boyutuna göre farklı bir yerleşim oluşturulmuş olur.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın