Bootstrap 5 Ağ: Çok Küçük Cihazlar

Çok küçük cihaz ağı ö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

İki sütunlu basit bir düzenimiz olduğunu varsayalım. SütunlarınTümCihaz bölünmeleri 25% / 75%.

Aşağıdaki sınıfları iki sütuna ekliyoruz:

<div class="col-3">....</div>
<div class="col-9">....</div>

Aşağıdaki örnek, tüm cihazlar (son derece küçük, küçük, orta, büyük, çok büyük ve devasa) için 25% / 75% bölünmeyi sağlar.

Örnek

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>Dünya Doğa Fonu (WWF), 29 Nisan 1961'de kuruldu ve logosu bir büyük panda...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980 yılında, WWF resmen Çin'e geldi ve Çin Hükümeti tarafından davet edilerek büyük panda ve onun yaşam alanının korunması çalışmaları başlatıldı...</p>
    </div>
  </div>
</div>

Kişisel olarak deneyin

Dikkat:Toplamın 12'ye veya daha az olmasına dikkat edin (tüm 12 mevcut sütunu kullanmak zorunlu değil):

33.3% / 66.6% bölme için .col-4 ve .col-850% / 50% bölme için .col-6 ve .col-6):

Örnek

<!-- 33.3%/66.6% bölme -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>Dünya Doğa Fonu (WWF), 29 Nisan 1961'de kuruldu ve logosu bir büyük panda...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980 yılında, WWF resmen Çin'e geldi ve Çin Hükümeti tarafından davet edilerek büyük panda ve onun yaşam alanının korunması çalışmaları başlatıldı...</p>
    </div>
  </div>
</div>
<!-- 50%/50% bölme -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>Dünya Doğa Fonu (WWF), 29 Nisan 1961'de kuruldu ve logosu bir büyük panda...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980 yılında, WWF resmen Çin'e geldi ve Çin Hükümeti tarafından davet edilerek büyük panda ve onun yaşam alanının korunması çalışmaları başlatıldı...</p>
    </div>
  </div>
</div>

Kişisel olarak deneyin

Otomatik düzen sütunları

Bootstrap 5'te, tüm cihazlar için oluşturmak için basit bir yöntem varEş genişlikli sütunlarYalnızca .col-* Sayıları sil ve sadece col elementi üzerinde kullanın .col Class. Bootstrap, kaç sütun olduğunu tanıyacak ve her sütun aynı genişliği alacaktır:

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

Kişisel olarak deneyin

Sonraki bölümde, küçük cihazlara farklı bölme yüzdesi nasıl eklenir gösterilecektir.