Bootstrap 5 Ağ: Çok Büyük Cihazlar

Çok büyük cihaz grid örneği

XSmall Small Medium Large Extra Large XXL
Sınıf öneki .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Ekran genişliği <576px >=576px >=768px >=992px >=1200px >=1400px

Önceki bölümden, küçük, orta ve büyük cihazlar için sınıflar içeren bir grid örneği gösterdik. İki div (sütun) kullandık ve küçük cihazlarda 25%/75% ayırma, orta boy cihazlarda 50%/50% ayırma, büyük cihazlarda 33%/66% ayırma yaptık:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Ama xlarge cihazlarda, 20% / 80% ayırma tasarımı daha iyi olabilir.

Çok büyük cihazlar ekran genişliği olarak tanımlanır 1200 piksel ve üzeri.

xlarge cihazlar için .col-xl-* Sınıf:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

Örnek, küçük cihazlarda 25%/75%, orta boy cihazlarda 50%/50%, büyük cihazlarda 33%/66% ve xlarge ve xxlarge cihazlarda 20%/80% ayırma yapar. Çok küçük cihazlarda otomatik olarak katlanır (100%):

Örnek

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Doğa Koruma Vakfı (WWF), 29 Nisan 1961'de kuruldu, logosu bir büyük panda...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980 yılında, WWF resmen Çin'e geldi ve Çin Hükümeti tarafından davet edildi, büyük panda ve onun yaşam alanının korunması hakkında çalışmalara başladı...</p>
    </div>
  </div>
</div>

Kişisel olarak deneyin

Dikkat:}Toplam her zaman 12 olduğundan emin olun.

Sadece XLarge kullanın

Aşağıdaki örnekte, sadece .col-xl-6 sınıflar (dışında .col-lg-*,.col-md-* ve/veya .col-sm-*）。Bu, xlarge ve xxlarge cihazların 50%/50% olarak bölünmesini anlamına gelir. Ancak, büyük, orta, küçük ve çok küçük cihazlar dikey olarak katmanlanacaktır (100% genişlik):

Örnek

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>Doğa Koruma Vakfı (WWF), 29 Nisan 1961'de kuruldu, logosu bir büyük panda...</p>
    </div>
    <div class="col-xl-6">
      <p>1980 yılında, WWF resmen Çin'e geldi ve Çin Hükümeti tarafından davet edildi, büyük panda ve onun yaşam alanının korunması hakkında çalışmalara başladı...</p>
    </div>
  </div>
</div>

Kişisel olarak deneyin

Otomatik yerleşim sütunları

Bootstrap 5'te, tüm cihazlar için eş genişlikli sütunlar oluşturmak için basit bir yöntem vardır: sadece .col-xl-* Sayıları silmek ve sadece col öğesinde kullanmak .col-xl Sınıf. Bootstrap, kaç sütun olduğunu tanıyacak ve her sütun aynı genişliği alacaktır.

Eğer ekran boyutu1200px'den küçükDizi, yatay olarak katmanlanacak:

<!-- İki sütun: büyük ekipmanlar üzerinde 50% genişlik -->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>
<!-- Dört sütun: büyük ekipmanlar üzerinde 25% genişlik -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

Kişisel olarak deneyin