CONTOH PENGGUNAAN SISTEM GRID
Setelah kita mengerti aturan dan struktur sistem Grid pada Bootstrap, selanjutnya akan dibahas contoh penggunaannya. Untuk lebih jelas contoh penggunaan sistem grid.STACKED-TO-HORIZONTAL
Pada artikel kali ini akan dibahas salah satu tekhnik dasar yang sangat dibutuhkan dalam membuat desain web responsif, yaitu membuat elemen pada halaman situs dengan otomatis menumpuk secara horizontal ketika ketika browser anda di ubah menjadi lebih kecil. Secara tekhnis tidak ada tekhnik khusus yang digunakan, Karena dalam keadaan default, sistem Grid Bootstrap telah mendukung responsive web design. Seperti membuat Grid, biasa anda hanya perlu membuat container, row dan column. Berikut merupakan markup kode jika anda menggunakan container biasa :Baca juga artikel lainnya : |
Tampilan full-window dengan class container
Tampilan setelah di-rezise
Jika di perhatikan 2 gambar di bawah ini, kita menggunakan Grid dengan container-fluid (full-window). Untuk menggunakan container-fluid, kita perlu mengganti <div class="container"> menjadi "<div class="container-fluid">". Perbedaan antara container-fluid dan container adalah lebar container-fluid beradaptasi dengan lebar browser sehingga menutup dari ujung ke ujung (full-width).
Tampilan full-width dengan class container-fluid
Artikel Terkait : |
Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...