Bootstrap 5 Ağ: Orta Cihazlar

Orta cihaz ağ örnekleri

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ümde, küçük cihazlar için sınıflar içeren bir ağ örnekini gösterdik. İki div (sütun) kullandık ve onlara %25 / %75 ayırma verdik:

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

Ama orta cihazlarda, %50 / %50 ayırma tasarımı daha iyi olabilir.

Orta cihazlar ekran genişliği olarak tanımlanır768 pikselden 991 piksel。

Orta cihazlar için kullanacağız .col-md-* Sınıfı:

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

Küçük cihazlarda, içeren kullanın -sm- sınıfı. Orta cihazlarda, içeren kullanın -md- sınıfı.

Örnek, küçük cihazlarda %25 / %75 ayırma ve orta (ve büyük, çok büyük ve devasa) cihazlarda %50 / %50 ayırma neden olacaktır. Ç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">
      <p>Doğa Koruma Vakfı (WWF), 29 Nisan 1961'de kuruldu ve logosu bir büyük panda ...</p>
    </div>
    <div class="col-sm-9 col-md-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ı çalışmaları ...</p>
    </div>
  </div>
</div>

Kendi kendine deneyin

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

Medium kullanarak

örneğinde, sadece .col-md-6 sınıfı (sadece .col-sm-*）。Bu, orta, büyük, super büyük ve XXL cihazların 50% / 50% bölüneceği anlamına gelir çünkü bu sınıf genişleyecek. Ancak, küçük ve super küçük cihazlar dikey olarak katlanacaktır (100% genişlik):

Örnek

<div class="row">
  <div class="col-md-6">
    <p>Doğa Koruma Vakfı (WWF), 29 Nisan 1961'de kuruldu ve logosu bir büyük panda ...</p>
  </div>
  <div class="col-md-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ı çalışmaları ...</p>
  </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: Sadece .col-md-* Sayıları silin ve sadece col öğesinde kullanın .col-md Bootstrap, kaç sütun olduğunu tanıyacak ve her sütun aynı genişliği alacaktır.

Eğer ekran boyutu768px'den küçükSütunlar dikey olarak katlanacaktır:

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

Kendi kendine deneyin

Bir sonraki bölümde, büyük cihazlara farklı bölme yüzdesi eklenmesi nasıl yapılacağını göstereceğiz.