PENGGUNAAN GRID UNTUK PERANGKAT PONSEL, TABLET DAN DESKTOP
Artikel kali ini kita akan membuat suatu tampilan yang akan diterapkan pada perangkat ponsel, tablet dan desktop. Bootstrap juga memungkinkan kita untuk menggunakan dua jenis kolom. Seperti contoh sebelumnya, artikel ini, kita tidak ingin tampilan menumpuk pada perangkat kecil. Oleh karena itu kita dapat menggunakan tiga class prefix, yakni .col-xs-*, .col-sm-*, dan .col-lg-*. Untuk membuat tampilan ponsel, tablet dan desktop.- Perangkat Ponsel
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 Tablet
Untuk pembuatan grid pada tablet, kita akan memiliki tata letak sederhana dengan dua kolom. Kita dapat membagi kolom menjadi 50% dan 50% untuk layar perangkat tabet yang memiliki lebar layar antara 768px – 970px. Untuk jumlah kolom yang pertama adalah (12 * 50)/100 = 6 dan kolom kedua adalah (12 * 50)/100 = 6. - Perangkat Dekstop
Untuk pembuatan grid pada dekstop, kita akan memiliki tata letak sederhana dengan dua kolom. Kita dapat membagi kolom menjadi 30,33% dan 66,33% untuk layar perangkat dekstop yang memiliki lebar layar di atas 970px. Untuk jumlah kolom yang pertama adalah (12 * 30,33)/100 = 4 dan kolom kedua adalah (12 * 66,66)/100 = 8.
| 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 Ponsel
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 ...