Grid: Perangkat Besar Bootstrap 5

Perekomendasi kuliah:

Kelas perangkat besar XSmall Small Medium Large Extra Large
XXL Awalan kelas .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Lebar layar <576px >=768px >=992px >=1200px >=1400px

Dalam bab sebelumnya, kami menunjukkan contoh instance grid yang berisi kelas yang sesuai untuk perangkat menengah dan kecil. Kami menggunakan dua div (kolom), dan melakukan pemecahan 25%/75% di perangkat kecil, dan 50%/50% di perangkat menengah:

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

Tetapi di perangkat besar, desain pemecahan 33% / 66% mungkin lebih baik.

Perangkat besar didefinisikan sebagai lebar layarDari 992 pixel hingga 1199 pixel。

Untuk perangkat besar, kami akan menggunakan .col-lg-* Kelas:

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

Pada perangkat kecil, gunakan yang berisi -sm- kelas. Pada perangkat menengah, gunakan yang berisi -md- kelas. Pada perangkat besar, gunakan yang berisi -lg- kelas.

Contoh di bawah ini akan mengakibatkan pemecahan 25%/75% di perangkat kecil, 50%/50% di perangkat menengah, dan 33%/66% di perangkat besar, xlarge, dan xxlarge. Pada perangkat ekstra kecil, ini akan otomatis tergabung (100%):

Contoh

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>World Wide Fund for Nature (WWF), didirikan tanggal 29 April 1961, logo adalah beruang jerbong ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980, WWF resmi datang ke Cina, diundang pemerintah Cina untuk melakukan pekerjaan perlindungan beruang jerbong dan habitatnya ...</p>
    </div>
  </div>
</div>

Coba Sendiri

Perhatian:Pastikan totalnya sama dengan atau kurang dari 12 (tidak perlu menggunakan semua 12 jalur yang tersedia):

Hanya menggunakan Large

Dalam contoh di bawah, kami hanya menentukan .col-lg-6 kelas (tanpa .col-md-* dan/atau .col-sm-*）。Ini berarti perangkat large, xlarge, dan xxlarge akan dibagi 50/50%. Namun, untuk perangkat medium, kecil, dan extra kecil, itu akan berlapis vertikal (lebar 100%):

Contoh

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>World Wide Fund for Nature (WWF), didirikan tanggal 29 April 1961, logo adalah beruang jerbong ...</p>
    </div>
    <div class="col-lg-6">
      <p>1980, WWF resmi datang ke Cina, diundang pemerintah Cina untuk melakukan pekerjaan perlindungan beruang jerbong dan habitatnya ...</p>
    </div>
  </div>
</div>

Coba Sendiri

Layout otomatis jalur

Dalam Bootstrap 5, ada cara yang mudah untuk membuat jalur yang sama lebar untuk semua perangkat: hanya dari .col-lg-* Hapus angka, dan hanya gunakan di elemen col .col-lg Kelas. Bootstrap akan mengenali berapa banyak jalur, dan setiap jalur akan mendapatkan lebar yang sama.

Jika ukuran layarKurang dari 992px, jalur akan berkelompok secara horizontal:

<!-- Dua jalur: di perangkat besar atau lebih besar adalah lebar 50% -->
<div class="row">
  <div class="col-lg">1 dari 2</div>
  <div class="col-lg">2 dari 2</div>
</div>
<!-- Empat jalur: di perangkat besar atau lebih besar adalah lebar 25% -->
<div class="row">
  <div class="col-lg">1 dari 4</div>
  <div class="col-lg">2 dari 4</div>
  <div class="col-lg">3 dari 4</div>
  <div class="col-lg">4 dari 4</div>
</div>

Coba Sendiri