Önyükleme ızgarası örnekleri
Bootstrap ızgara sistemi içinde oluşturmaya alışmanız için temel ızgara düzenleri.
Bu örneklerde .themed-grid-col
sı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.
Üç 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.
Üç 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
.col
çocuğu
.row-cols-md-3
.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.
iki sütun
Masaüstlerinden başlayıp büyük masaüstlerine ölçeklenen iki sütun alın .
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.
Karışık: mobil ve masaüstü
Bootstrap v4 ızgara sistemi beş 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) 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ı artar, yani md, lg ve xl için aynı genişlikleri ayarlamayı planlıyorsanız, yalnızca md belirtmeniz gerekir.
Karma: mobil, tablet ve masaüstü
oluklar
Sınıflar ile .gx-*
yatay oluklar ayarlanabilir.
.col
.gx-4
oluklar
ile
.col
.gx-4
oluklar
ile
.col
.gx-4
oluklar
ile
.col
.gx-4
oluklar
ile
.col
.gx-4
oluklar
ile
.col
.gx-4
oluklar
ile
.gy-*
Dikey olukları kontrol etmek için sınıfları kullanın .
.col
.gy-4
oluklar
ile
.col
.gy-4
oluklar
ile
.col
.gy-4
oluklar
ile
.col
.gy-4
oluklar
ile
.col
.gy-4
oluklar
ile
.col
.gy-4
oluklar
ile
Sınıflar ile .g-*
her iki yönde de oluklar ayarlanabilir.
.col
.g-3
oluklar
ile
.col
.g-3
oluklar
ile
.col
.g-3
oluklar
ile
.col
.g-3
oluklar
ile
.col
.g-3
oluklar
ile
.col
.g-3
oluklar
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 xxl
kesme noktası ekler.