Bootstrap 4 Izgara Sistemi

Bootstrap 4 Izgara Sistemi

Bootstrap'in ızgara sistemi, sayfa boyunca 12 sütuna kadar izin verir.

12 sütunun tümünü tek tek kullanmak istemiyorsanız, daha geniş sütunlar oluşturmak için sütunları birlikte gruplayabilirsiniz:

Bootstrap'in ızgara sistemi duyarlıdır ve sütunlar ekran boyutuna bağlı olarak yeniden düzenlenir: Büyük ekranda içerik üç sütun halinde organize edildiğinde daha iyi görünebilir, ancak küçük bir ekranda içerik öğelerinin yığılması daha iyi olur Birbirinin üstünde.

Izgara Sınıfları

Bootstrap 4 ızgara sisteminin beş sınıfı vardır:

• .col-(ekstra küçük cihazlar - ekran genişliği 576 pikselden az)
• .col-sm-(küçük cihazlar - 576 piksele eşit veya daha büyük ekran genişliği)
• .col-md-(orta cihazlar - 768 piksele eşit veya daha büyük ekran genişliği)
• .col-lg-(büyük cihazlar - 992 piksele eşit veya daha büyük ekran genişliği)
• .col-xl-(xlarge cihazlar - 1200 piksele eşit veya daha büyük ekran genişliği)

Yukarıdaki sınıflar, daha dinamik ve esnek düzenler oluşturmak için birleştirilebilir.

İpucu: Her sınıf ölçeklenir, bu nedenle ve için aynı genişlikleri ayarlamak smistiyorsanız md, yalnızca belirtmeniz gerekir sm.

Izgara Sistem Kuralları

Bazı Bootstrap 4 ızgara sistemi kuralları:

• .containerDoğru hizalama ve dolgu için satırlar (sabit genişlik) veya .container-fluid(tam genişlik) içine yerleştirilmelidir .
• Yatay sütun grupları oluşturmak için satırları kullanın
• İçerik sütunlara yerleştirilmelidir ve yalnızca sütunlar satırların hemen alt öğeleri olabilir
• .row Izgara düzenlerini hızlı bir şekilde yapmak için ve gibi önceden tanımlanmış sınıflar .col-sm-4mevcuttur
• Sütunlar, dolgu yoluyla oluklar (sütun içeriği arasındaki boşluklar) oluşturur. Bu dolgu, ilk ve son sütun için satırlarda negatif kenar boşluğu ile dengelenir..rows
• Izgara sütunları, yaymak istediğiniz 12 kullanılabilir sütun sayısı belirtilerek oluşturulur. Örneğin, üç eşit sütun, üç.col-sm-4
• Sütun genişlikleri yüzde cinsindendir, bu nedenle her zaman akışkandır ve üst öğelerine göre boyutlandırılmıştır
• Bootstrap 3 ve Bootstrap 4 arasındaki en büyük fark , Bootstrap 4'ün artık float yerine flexbox kullanmasıdır. Flexbox'ın büyük bir avantajı, belirli bir genişliğe sahip olmayan ızgara sütunlarının otomatik olarak "eşit genişlikte sütunlar" (ve eşit yükseklik) olarak düzenlenmesidir. Örnek: Üç öğenin .col-smher biri otomatik olarak küçük kesme noktasından itibaren %33,33 genişliğinde olacaktır. İpucu: Flexbox hakkında daha fazla bilgi edinmek istiyorsanız, CSS Flexbox Eğitimimizi okuyabilirsiniz .

Bootstrap 4 Izgarasının Temel Yapısı

Aşağıdaki, Bootstrap 4 ızgarasının temel yapısıdır:

İlk örnek: bir satır oluşturun ( <div class="row">). Ardından, istediğiniz sayıda sütun ekleyin (uygun .col-*-*sınıflara sahip etiketler). İlk yıldız (*) yanıt vermeyi temsil eder: sm, md, lg veya xl, ikinci yıldız ise her satır için her zaman 12'ye kadar eklenmesi gereken bir sayıyı temsil eder.

İkinci örnek: her birine bir sayı eklemek yerine, coleşit genişlikte sütunlar oluşturmak için mizanpajı önyüklemenin işlemesine izin verin: iki "col"öğe = her sütun için %50 genişlik. üç sütun = her sütun için %33.33 genişlik. .col-sm|md|lg|xldört sütun = %25 genişlik, vb . Sütunları duyarlı hale getirmek için de kullanabilirsiniz .

Izgara Seçenekleri

Aşağıdaki tablo, Bootstrap 4 ızgara sisteminin farklı ekran boyutlarında nasıl çalıştığını özetler:

Örnekler

Sonraki bölümlerde, farklı cihazlar ve ekran genişlikleri için ızgara sistemleri örnekleri gösterilmektedir:

• Yığından yataya
• Ekstra Küçük Düzen
• Küçük cihazlar
• Orta boy cihazlar
• Büyük cihazlar
• Ekstra büyük cihazlar
• Daha fazla ızgara örneği