Bootstrap: Grid System

Apa itu Grid?

Seperti yang jelaskan oleh Wikepedia:

Dalam desain grafis, grid adalah struktur (biasanya dua dimensi) terdiri dari serangkaian berpotongan lurus (vertikal, horisontal) garis digunakan untuk struktur konten. Hal ini banyak digunakan untuk merancang tata letak dan struktur konten dalam desain cetak. Dalam desain web, itu adalah metode yang sangat efektif untuk membuat tata letak yang konsisten cepat dan efektif menggunakan HTML dan CSS.
Untuk memasukkannya kata grid sederhana dalam desain web mengatur dan konten struktur, membuat website mudah untuk memindai dan mengurangi beban kognitif pada pengguna.
Apa Bootstrap Grid System?
Seperti yang diberikan oleh dokumentasi resmi Bootstrap untuk sistem grid:
Bootstrap termasuk responsif, ponsel pertama sistem grid cairan yang tepat skala hingga 12 kolom sebagai ukuran perangkat atau viewport meningkat. Ini termasuk kelas standar untuk pilihan tata letak yang mudah, serta mixin kuat untuk menghasilkan layout yang lebih semantik.
Mari kita memahami pernyataan di atas. Bootstrap 3 adalah ponsel pertama dalam arti bahwa kode untuk Bootstrap sekarang dimulai dengan menargetkan layar yang lebih kecil seperti ponsel, tablet, dan kemudian "mengembang" komponen dan grid layar yang lebih besar seperti laptop, desktop.

Mobile

Konten

o Tentukan apa yang paling penting.

Tata Letak

o Desain untuk lebar yang lebih kecil pertama.
o perangkat mobile alamat Basis CSS pertama; pertanyaan media mengatasi untuk tablet, desktop.

Progressive Enhancement

o Tambahkan elemen sebagai ukuran layar meningkat.

Cara menggunakan Bootstrap grid System

Sistem Grid digunakan untuk membuat layout halaman melalui serangkaian baris dan kolom yang rumah konten Anda. Berikut adalah cara sistem grid Bootstrap bekerja:
Baris harus ditempatkan dalam kelas .container untuk keselarasan dan padding.

• Gunakan baris untuk membuat kelompok horizontal kolom. 

• Konten harus ditempatkan dalam kolom, dan hanya kolom mungkin anak-anak langsung dari baris. 

• Kelas jaringan Predefined seperti .row dan .col-xs-4 yang tersedia untuk cepat membuat layout jaringan. Mixin KURANG juga dapat digunakan untuk lebih layout semantik. 

• Kolom membuat talang (kesenjangan antara konten kolom) melalui padding. Padding yang disajikan di baris untuk pertama dan terakhir kolom melalui marjin negatif pada .rows.

• Kolom Grid diciptakan dengan menentukan jumlah dua belas kolom yang tersedia yang ingin span. Sebagai contoh, tiga kolom yang sama akan menggunakan tiga .col-xs-4.