Bootstrap 5 Ağ: Küçük Cihazlar

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 var. Küçük cihazlar için sütunları 25% / 75% bölmesini istiyoruz.

Küçük cihazlar ekran genişliği olarak tanımlanır576 pikselden 767 piksile。

Küçük cihazlar için kullanacağımız .col-sm-* sınıf.

İki sütuna aşağıdaki sınıfları ekliyoruz:

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

Aşağıdaki örnek küçük (orta, büyük, ultra büyük ve devasa) cihazlarda 25% / 75% bölme üretir. Çok küçük cihazlarda otomatik olarak katlanır (100%):

Örnek

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>1961 yılında 29 Nisan'da kurulan Dünya Doğa Fonu (WWF), logosu bir kurt ayısıdır...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>1980 yılında, WWF, Çin Hükümeti tarafından davet edilerek Çin'e geldi ve kurt ayısının ve yaşam alanının korunmasıyla ilgili çalışmaları başlattı...</p>
    </div>
  </div>
</div>

Kendi Kendine Deneyin

Dikkat:Toplamın 12'ye eşit veya daha az olmasını sağlayın (tüm 12 mevcut sütunu kullanmanız gerekmez):

33.3% / 66.6% bölme için kullanmanız gerektiğini unutmayın .col-sm-4 ve .col-sm-850% / 50% bölme için kullanmanız gerektiğini unutmayın .col-sm-6 ve .col-sm-6)：

Örnek

33.3/66.6% bölme: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>1961 yılında 29 Nisan'da kurulan Dünya Doğa Fonu (WWF), logosu bir kurt ayısıdır...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1980 yılında, WWF, Çin Hükümeti tarafından davet edilerek Çin'e geldi ve kurt ayısının ve yaşam alanının korunmasıyla ilgili çalışmaları başlattı...</p>
    </div>
  </div>
</div>
<!-- 50%/50% bölme: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>1961 yılında 29 Nisan'da kurulan Dünya Doğa Fonu (WWF), logosu bir kurt ayısıdır...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1980 yılında, WWF, Çin Hükümeti tarafından davet edilerek Çin'e geldi ve kurt ayısının ve yaşam alanının korunmasıyla ilgili çalışmaları başlattı...</p>
    </div>
  </div>
</div>

Kendi Kendine 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: yalnızca .col-sm-* içinde numaraları kaldırın ve sadece col öğesiüzerinde .col-sm Kullanılır

Eğer ekran boyutu576px'dan küçükSütunlar yatay olarak yığınlanacaktır:

<!-- İki sütun: tüm ekranlarda 50% genişlik, küçük ekipmanlar (100% genişlik) dışında -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- Dört sütun: tüm ekranlarda 25% genişlik, küçük ekipmanlar (100% genişlik) dışında -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

Kendi Kendine Deneyin

Bir sonraki bölüm, orta ekipmanlara farklı bölme yüzdesi eklenmesini nasıl yapacağınızı gösterecektir.