Bootstrap 5 İnet: Büyük Cihazlar

Ders önerileri:

Büyük cihaz ağ çerçevesi 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 >=768px >=992px >=1200px >=1400px

Önceki bölümde, küçük ve orta boy cihazlar için sinifler içeren bir ağ çerçevesi gösterdik. İki div (sütun) kullandık ve küçük cihazlarda 25%/75% bölünme, orta boy cihazlarda 50%/50% bölünme yaptık:

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

Ama büyük cihazlarda, 33% / 66% bölünme tasarımı daha iyi olabilir.

Büyük cihazlar ekran genişliği olarak tanımlanır992 pikselden 1199 piksile kadar。

Büyük cihazlar için, kullanacağız .col-lg-* Sinifler:

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

Küçük cihazlarda, içeren kullanın -sm- sinifleri. Orta boy cihazlarda, içeren kullanın -md- sinifleri. Büyük cihazlarda, içeren kullanın -lg- sinifleri.

Örnek, küçük cihazlarda 25%/75% bölünme, orta boy cihazlarda 50%/50% bölünme, büyük, xlarge ve xxlarge cihazlarda 33%/66% bölünme neden olabilir. Ç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">
      <p>1961 yılının 29 Nisan'da kurulan Dünya Doğa Fonu (WWF), logosu bir büyük panda'dır ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <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ını yürütmek için ...</p>
    </div>
  </div>
</div>

Kendi Kendine Deneyin

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

Large kullanarak

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

Örnek

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>1961 yılının 29 Nisan'da kurulan Dünya Doğa Fonu (WWF), logosu bir büyük panda'dır ...</p>
    </div>
    <div class="col-lg-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ını yürütmek için ...</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: sadece .col-lg-* Sayıları silin ve sadece col öğeleri üzerinde kullanın .col-lg Sınıfı. Bootstrap, kaç sütun olduğunu tanıyacak ve her sütun aynı genişliği alacaktır.

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

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

Kendi Kendine Deneyin