Ö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-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-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

Üç eşit sütun alternatifi

Sınıfları kullanarak, .row-cols-*eşit sütunlara sahip bir ızgarayı kolayca oluşturabilirsiniz.

.colçocuğu .row-cols-md-3

Üç 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-4

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

Bootstrap v5 ızgara sistemi altı sınıf sınıfına sahiptir: xs (çok küçük, bu sınıf eklentisi kullanılmaz), sm (küçük), md (orta), lg (büyük), xl (x-large) ve xxl (xx -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ı artar, yani md, lg, xl ve xxl için aynı genişlikleri ayarlamayı planlıyorsanız, yalnızca md belirtmeniz gerekir.

.col-md-8

.col-6 .col-md-4

.col-6

Karma: mobil, tablet ve masaüstü

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

oluklar

Sınıflar ile .gx-*yatay oluklar ayarlanabilir.

.col.gx-4oluklar ile

.gy-*Dikey olukları kontrol etmek için sınıfları kullanın .

.col.gy-4oluklar ile

Sınıflar ile .g-*her iki yönde de oluklar ayarlanabilir.

.col.g-3oluklar ile

Konteynerler

Bootstrap v4.4'te eklenen ek sınıflar, belirli bir kesme noktasına kadar %100 geniş kapsayıcılara izin verir. v5 yeni bir xxlkesme noktası ekler.

.konteyner

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.konteyner-sıvı