PENGGUNAAN GRID UNTUK PERANGKAT TABLET DAN DESKTOP
Artikel kali ini kita akan membuat suatu tampilan yang akan direapkan pada perangkat tablet dan desktop. Bootstrap juga memungkinkan kita untuk menggunakan dua jenis kolom. Di artikel ini, kita tidak ingin tampilan situs kitalangsung menumpuk begitu saja saat diakses perangkat tablet. Oleh karena itu, kita perlu membuat aturan dengan menentukan presentase pada lebar jendela dengan menggunakan col-sm(tablet) dan untuk menggunakan col-md(desktop).- Perangkat Tablet
Untuk pembuatan grid pada tablet, kita akan memiliki tata letak sederhana dengan dua kolom. Kita dapat membagi kolom menjadi 25% dan 75% untuk layar perangkat handphone yang memiliki lebar layar kurang dari 768px. Untuk jumlah kolom yang pertama adalah (12 * 25)/100 = 3 dan kolom kedua adalah (12 * 75)/100 = 9. - Perangkat Dekstop
Untuk pembuatan grid pada dekstop, kita akan memiliki tata letak sederhana dengan dua kolom. Kita dapat membagi kolom menjadi 50% dan 50% untuk layar perangkat handphone yang memiliki lebar layar kurang dari 768px. Untuk jumlah kolom yang pertama adalah (12 * 50)/100 = 6 dan kolom kedua adalah (12 * 50)/100 = 6.
| Baca juga artikel lainnya : |
Berikut ini contoh kodenya :
Tampilan kode di atas jika diterapkan pada browser akan seperti gambar di bawah ini :
Tampilan di perangat Tablet
Tampilan di perangat Desktop
| Artikel Terkait : |
Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...