Önyükleme 4 Izgara
Bootstrap 4 Izgara Sistemi
Bootstrap'in ızgara sistemi flexbox ile oluşturulmuştur ve 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:
| açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 |
| aralık 4 | aralık 4 | aralık 4 | |||||||||
| aralık 4 | açıklık 8 | ||||||||||
| açıklık 6 | açıklık 6 | ||||||||||
| açıklık 12 | |||||||||||
Izgara sistemi duyarlıdır ve sütunlar ekran boyutuna bağlı olarak otomatik olarak yeniden düzenlenir.
Toplamın 12 veya daha az olduğundan emin olun (mevcut 12 sütunun tümünü kullanmanız gerekmez).
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.
Bootstrap 4 Izgarasının Temel Yapısı
Aşağıdaki, Bootstrap 4 ızgarasının temel yapısıdır:
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
İ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 (*) duyarlılığı temsil eder: sm, md, lg veya xl, ikinci yıldız ise her satır için 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 .
Aşağıda bazı temel Bootstrap 4 ızgara düzeni örneklerini topladık.
Üç Eşit Sütun
Aşağıdaki örnek, tüm cihazlarda ve ekran genişliklerinde üç eşit genişlikte sütunun nasıl oluşturulacağını gösterir:
Örnek
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Duyarlı Sütunlar
Aşağıdaki örnek, tabletlerden başlayıp ekstra büyük masaüstlerine ölçeklendirerek, eşit genişlikte dört sütunun nasıl oluşturulacağını gösterir. Genişliği 576 pikselden az olan cep telefonlarında veya ekranlarda, sütunlar otomatik olarak birbirinin üzerine yığılır :
Örnek
<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>
İki Eşit Olmayan Duyarlı Sütun
Aşağıdaki örnek, tabletlerden başlayan ve büyük ekstra masaüstlerine ölçeklenen çeşitli genişlikte iki sütunun nasıl alınacağını gösterir:
Örnek
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
İpucu: Bu öğreticide daha sonra Bootstrap 4 ızgaraları hakkında daha fazla bilgi edineceksiniz.