Bootstrap Grid - Large Devices

Bootstrap Grid Contoh: Large Devices

Dalam bab sebelumnya, kita disajikan contoh grid dengan kelas untuk perangkat kecil dan menengah. Kami menggunakan dua divs (kolom) dan kami memberi mereka 25%/75% split pada perangkat kecil, dan 50%/50% split pada perangkat media:

Tapi pada perangkat besar desain mungkin lebih baik sebagai 33%/66% split.

Tip: perangkat besar didefinisikan sebagai memiliki lebar layar dari 1200 piksel dan di atas.

Untuk perangkat besar kita akan menggunakan .col-lg-* kelas.

Jadi sekarang kita akan menambahkan lebar kolom untuk perangkat besar:

Sekarang Bootstrap akan mengatakan "pada ukuran kecil, melihat kelas dengan -sm- di dalamnya dan menggunakan mereka. Pada ukuran medium, melihat kelas dengan -md- di dalamnya dan menggunakan mereka. Pada ukuran besar, melihat kelas dengan kata -lg- di dalam mereka dan menggunakan mereka ".

Contoh berikut akan menghasilkan 25%/75% split pada perangkat kecil, 50%/50% split pada perangkat media, dan 33%/66% split pada perangkat besar:

Menggunakan Hanya Besar

Pada contoh di bawah, kita hanya menentukan .col-lg-6 kelas (tanpa .col-md-* dan / atau .col-sm-* ). Ini berarti bahwa perangkat besar akan dibagi 50% / 50%. Namun, untuk media DAN kecil perangkat, itu akan menumpuk secara vertikal (100% lebar):