Önyükleme ızgarası örnekleri

Bootstrap ızgara sistemi içinde oluşturmaya alışmanız için temel ızgara düzenleri.

Bu örneklerde .themed-grid-colsınıf, bazı temalar eklemek için sütunlara eklenir. Bu, Bootstrap'ta varsayılan olarak bulunan bir sınıf değildir.

Beş ızgara katmanı

Bootstrap ızgara sisteminde, desteklediğimiz her cihaz aralığı için bir tane olmak üzere beş katman vardır. Her katman, minimum görüntü alanı boyutunda başlar ve geçersiz kılınmadıkça daha büyük cihazlara otomatik olarak uygulanır.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Üç eşit sütun

Masaüstlerinden başlayıp büyük masaüstlerine ölçeklendirerek eşit genişlikte üç sütun elde edin . Mobil cihazlarda, tabletlerde ve altında sütunlar otomatik olarak yığılır.

.col-md-4
.col-md-4
.col-md-4

Üç eşit olmayan sütun

Masaüstlerinden başlayıp çeşitli genişliklerdeki büyük masaüstlerine ölçeklenen üç sütun alın . Unutmayın, ızgara sütunları tek bir yatay blok için 12'ye kadar eklemelidir. Bundan daha fazlası ve görünüm alanı ne olursa olsun sütunlar yığılmaya başlar.

.col-md-3
.col-md-6
.col-md-3

iki sütun

Masaüstlerinden başlayıp büyük masaüstlerine ölçeklenen iki sütun alın .

.col-md-8
.col-md-4

Tam genişlik, tek sütun

Tam genişlikte öğeler için ızgara sınıfı gerekli değildir.


İki iç içe sütunlu iki sütun

Belgelere göre, iç içe yerleştirme kolaydır; yalnızca mevcut bir sütuna bir satır sütun yerleştirmeniz yeterlidir. Bu size , masaüstlerinden başlayan ve büyük masaüstlerine ölçeklenen iki sütun ve daha büyük sütunda başka iki (eşit genişlikte) sütun sağlar.

Mobil cihaz boyutlarında, tabletlerde ve aşağı sürümlerde bu sütunlar ve iç içe geçmiş sütunları yığılır.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Karışık: mobil ve masaüstü

Bootstrap v4 ızgara sisteminin beş sınıf sınıfı vardır: xs (çok küçük), sm (küçük), md (orta), lg (büyük) ve xl (çok büyük). Daha dinamik ve esnek düzenler oluşturmak için bu sınıfların hemen hemen her kombinasyonunu kullanabilirsiniz.

Her sınıf katmanı ölçeklenir, yani xs ve sm için aynı genişlikleri ayarlamayı planlıyorsanız, yalnızca xs belirtmeniz gerekir.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Karma: mobil, tablet ve masaüstü

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4