Bootstrap 5 Ağ Sistemi

ızgı sistemi

Bootstrap ızgı sistemi flexbox ile inşa edilmiştir ve sayfada en fazla 12 sütun izin verilir.

Tüm 12 sütunu ayrı ayrı kullanmak istemiyorsanız, bu sütunları birleştirerek daha geniş sütunlar oluşturabilirsiniz:

ızgı sistemi hızlı yanıt verir ve sütunlar ekran boyutuna göre otomatik olarak yeniden düzenlenir.

Toplamın 12'ye veya daha az olmasına dikkat edin (tüm 12 kullanılabilir sütun kullanmak zorunda değilsiniz).

ızgı sınıfları

Bootstrap 5 ızgı sistemi altı sınıf sunar:

  • .col- (Çok küçük cihazlar - ekran genişliği 576px'dan küçükse)
  • .col-sm- (Küçük cihazlar - ekran genişliği 576px veya daha büyükse)
  • .col-md- (Orta boy cihazlar - ekran genişliği 768px veya daha büyükse)
  • .col-lg- (Büyük cihazlar - ekran genişliği 992px veya daha büyükse)
  • .col-xl- (Çok büyük cihazlar - ekran genişliği 1200px veya daha büyükse)
  • .col-xxl- (Çok büyük cihazlar - ekran genişliği 1400px veya daha büyükse)

Yukarıdaki sınıfları birleştirerek daha dinamik ve esnek yerleşimler oluşturabilirsiniz.

İpucu:Her sınıf oransal olarak genişletilmiştir, bu yüzden sm ve md için aynı genişliği ayarlamak istiyorsanız, sadece sm'yi belirtmeniz yeterlidir.

Bootstrap 5 ızgı sisteminin temel yapısı

Aşağıda Bootstrap 5 ızgı sisteminin temel yapısı verilmiştir:

<!-- Sütun genişliğini ve farklı cihazlardaki görünümlerini kontrol et -->
<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>
<!-- veya Bootstrap otomatik düzenleme yapmasını sağlayın -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Kişisel olarak deneyin

İlk örnek: Bir satır oluşturmak için:<div class = "row">）。Gerekli sayıda sütun ekleyin ( .col-*-* sınıf etiketleri）。İlk yıldız (*) duyarlılığı temsil eder: sm, md, lg, xl veya xxl, ikinci yıldız ise bir numarayı temsil eder ve her satırda toplam 12 olmalıdır.

İkinci örnek: Her birine sınıf etiketi vermek yerine: col Bir numara eklemek yerine, bootstrap'un düzeni işlemesini sağlayarak eş geniş sütunlar oluşturmak için: "col" Element = her sütunun %50 genişliği, üç sütun = her sütunun %33.33 genişliği. Dört sütun = %25 genişlik gibi. Ayrıca, eş geniş sütunlar oluşturmak için "col" kullanabilirsiniz: .col-sm|md|lg|xl|xxl Sütunların duyarlılığını sağlar.

Ağ seçenekleri

Aşağıdaki tablo, Bootstrap 5 ağ sistemi farklı ekran boyutlarında nasıl çalıştığını özetlemektedir:

Çok küçük (<576px) Küçük (>=576px) Orta (>=768px) Büyük (>=992px) Çok büyük (>=1200px) Çok büyük (>=1400px)
Sınıf öneki .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Ağ işlevi Her zaman yatay Dönüşüm noktası üzerinde yatay olarak başlar, dönüşüm noktası之上 Dönüşüm noktası üzerinde yatay olarak başlar, dönüşüm noktası之上 Dönüşüm noktası üzerinde yatay olarak başlar, dönüşüm noktası之上 Dönüşüm noktası üzerinde yatay olarak başlar, dönüşüm noktası之上 Dönüşüm noktası üzerinde yatay olarak başlar, dönüşüm noktası之上
Konteyner genişliği None (auto) 540px 720px 960px 1140px 1320px
Uygun Telefon dikey Telefon yatay Tablet Dizüstü bilgisayar Dizüstü bilgisayar ve masaüstü bilgisayar Dizüstü bilgisayar ve masaüstü bilgisayar
Sütun # 12 12 12 12 12 12
Gutter genişliği 1.5rem (sütunun her yanında .75rem) 1.5rem (sütunun her yanında .75rem) 1.5rem (sütunun her yanında .75rem) 1.5rem (sütunun her yanında .75rem) 1.5rem (sütunun her yanında .75rem) 1.5rem (sütunun her yanında .75rem)
Yerleştirilebilir Evet Evet Evet Evet Evet Evet
Ofset Evet Evet Evet Evet Evet Evet
Sütun sıralama Evet Evet Evet Evet Evet Evet