Önyükleme ızgarası örnekleri

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

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

İç içe iki 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 3 ızgara sistemi dört sınıf sınıfına sahiptir: xs (telefonlar), sm (tabletler), md (masaüstü bilgisayarlar) ve lg (daha büyük masaüstü bilgisayarlar). 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 xs ve sm için aynı genişlikleri ayarlamayı planlıyorsanız, yalnızca xs'yi belirtmeniz gerekir.

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

Karma: mobil, tablet ve masaüstü

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

sütun temizleme

Düzensiz içerikle garip sarmayı önlemek için belirli kesme noktalarında kayan noktaları temizleyin .

.col-xs-6 .col-sm-3 Görünümünüzü yeniden
boyutlandırın veya bir örnek için telefonunuzda kontrol edin.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Ofset, itme ve çekme sıfırlamaları

Belirli kesme noktalarında ofsetleri, itmeleri ve çekmeleri sıfırlayın.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0