Bootstrap 4 Grid Sistem Nedir Ve Nasıl Kullanılır?

Bootsrap 4 ile içeriklerimizi .container ya da .container-fluid sınıfları içine almamız gerekiyor.

** .container ile responsive olarak yani tarayıcı genişliğine göre .container class' i sayfamızın alacağı sabit genişliği belirler.

<div class="container"> </div>

Örnek 1 için tıklayınız.

** .container-fluid ile tarayıcının genişliğini hesaba katmadan tam ekran genişliğinde bir sayfamız olur.

<div class="container-fluid"> </div>

Örnek 2 için tıklayınız.

Boostrap 4 grid sistem ile;

• her satır .row sınıfı,
• her kolon .col-* sınıfı ile belirtilir.

Her .row yani her satır içerisinde toplam 12 kolon bulunmaktadır. Toplamdaki 12 kolonu farklı oranlarda birleştirip kullanabiliriz.

Aşağıdaki örneklerde her bir satırı sırasıyla 3, 2, 4 eşit parçaya bölmüş oluruz.

<div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>

Örnek 3 için tıklayınız.

** Örnekte her hangi bir bootstrap responsive ön eki (.sm,md,lg,xl) kullanılmadığından dolayı .col sınıfı ile satırlar tarayıcının her genişliğinde yan yana olacaktır.

** Grid sistemin en büyük avantajı responsive bir yapıya sahip olmasıdır yani tarayıcı genişliğine göre her bir kolonu yan yana ya da alt alta alabiliriz.

@media query' ler ile tarayıcının o anki genişliğini alabiliyoruz ve aldığımız bu değerlere göre <div> etiketlerini yani bootstrap açısından baktığımızda oluşturduğumuz her kolonu alt alta ya da yan yana alabiliriz.

Eğer ki satırda yer varsa yan yana eğer satırda yer kalmadıysa alt satıra alabiliyoruz ki; masaüstü bilgisayarda açılan bir sitenin görünümü yatayda yer kaplarken mobile bir cihazda açılan site tasarımındaki her kolonun alt alta gelmesi daha bir görünüm sağlayacaktır.

Boostrap 4 aşağıdaki media query değerlerini kullanmaktadır.

// Small devices (landscape phones, 576px ve yukarısı) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px ve yukarısı) @media (min-width: 768px) { ... } // Large devices (desktops, 992px ve yukarısı) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px ve yukarısı) @media (min-width: 1200px) { ... }

Yani tarayıcı genişliği;

• 576px ve aşağısında mı (.xs)
• minimum 576px ve 768px aralığında mı (.sm)
• minimum 768px ve 992px aralığında mı (md)
• minimum 992px ve 1200px aralığında mı (lg)
• ya da 1200px ve üstünde mi (xl)

** .xs sınıfı bootstrap 4 'de kullanılmamaktadır.

media query kullanarak sayısal değerlerle uğraşmak yerine bootstrap 4 ile belirlenen ve her bir sayısal değere karşılık gelen class isimlerini kullanmak çok daha kolaydır. Bu class isimleri .xs (ekstra small), .sm (small), .md (medium), .lg (large) ve .xl (eksra large) sınıflarıdır.

<div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div>

Örnek 4 için tıklayınız.

** col-sm-3 sınıfları ile 12 kolonluk satırı 4 eşit parçaya bölmüş oluruz. Ancak sm sınıfı eklediğimizden dolayı small cihazların altındaki çözünürlükte (576px) kolonlar alt alta gelecektir. Örnekte tarayıcı genişliğini azaltıp 575px 'de her bir div' in alt alta geldiğini görebilirsiniz.

<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-9">.col-md-6</div> </div>

Örnek 5 için tıklayınız.

** col-md-3 ve col-md-9 sınıflarıyla ikiye böldüğümüz satır medium cihaz yani 768px' in altına indiği anda kolonlar alt alta gelecektir.