Apa Itu System grid Pada Bootstrap
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membagikan sedikit nih tentang System Grid Pada Bootstrap, Nah Langsung saja dibaca dan dipahami.
Latar Belakang
Dulu seseorang jika ingin membuat suatu Template atau layout Mereka biasanya masih menggunakan tabel dalam pembuatan, Maka dari itu Sekarang dalam pembuatan layout lebih mudah jika kita menggunakan System grid Ini pada Bootstrap.
Maksud dan tujuan
Agar Mengerti dan paham tentang system Grid Pada bootstap.
Alat dan Bahan
Laptop.
Koneksi Internet.
Teks Editor.
Jangka Waktu yang Dibutuhkan
1 Jam.
Langkah Kerja / Pembahasan
Nah sebelumnya apasih grid system pada bootstrap itu? grid system merupakan pengaturan ukuran yang ditampilkan monitor. grid system berfungsi untuk membuat pengukuran untuk lebar dari masing - masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan dari website yang kita buat dengan bootstrap. bootstrap memiliki 12 sistem grid.
Bootstrap Juga memiiki Class Grid Masing-masing yaitu :
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membagikan sedikit nih tentang System Grid Pada Bootstrap, Nah Langsung saja dibaca dan dipahami.
Latar Belakang
Dulu seseorang jika ingin membuat suatu Template atau layout Mereka biasanya masih menggunakan tabel dalam pembuatan, Maka dari itu Sekarang dalam pembuatan layout lebih mudah jika kita menggunakan System grid Ini pada Bootstrap.
Maksud dan tujuan
Agar Mengerti dan paham tentang system Grid Pada bootstap.
Alat dan Bahan
Laptop.
Koneksi Internet.
Teks Editor.
Jangka Waktu yang Dibutuhkan
1 Jam.
Langkah Kerja / Pembahasan
Nah sebelumnya apasih grid system pada bootstrap itu? grid system merupakan pengaturan ukuran yang ditampilkan monitor. grid system berfungsi untuk membuat pengukuran untuk lebar dari masing - masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan dari website yang kita buat dengan bootstrap. bootstrap memiliki 12 sistem grid.
Bootstrap Juga memiiki Class Grid Masing-masing yaitu :
- col-lg- >> Digunakan Untuk mengatur Grid pada layar Monitor yang besar
- col-md- >> Digunakan untuk mengatur grif pada layar Monitor Berukuran Sedang
- col-xs- >> Digunakan untuk mngatur grid pada layar Smartphone
- col-sm- >> Digunakana untuk mengatur grid pada layar Tablet
Jika tidak ingin menggunakan semua 12 kolom secara terpisah, Anda dapat mengelompokkan kolom bersama-sama untuk membuat kolom yang lebih luas:
Berikut Contohnya :
Nah Sekarang kita coba untuk Menerapkan Sistem Grid Ini pada pembuatan Layout Sederhana :
Berikut Tampilannya.
Dan Berikut SourceCode nya :
Nah gimana? mudah Bukan.
Setelah membaca penjelasan dari mengenal grid system bootstrap dan melihat beberapa contoh diatas diharapkan sobat dapat mendapatkan pemahaman
Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih.
Wassalamu'alaikum Wr.Wb
