sistem grid Bootstrap

Apa grid (Grid)?

Dari Wikipedia:

Dalam desain grafis, grid adalah serangkaian garis lurus digunakan untuk mengatur konten dengan (vertikal, horisontal) struktur berpotongan terdiri dari (biasanya dua dimensi). Hal ini banyak digunakan dalam desain tata letak desain cetak dan struktur konten. Dalam desain web, itu adalah yang digunakan untuk dengan cepat membuat tata letak yang konsisten dan efektif menggunakan HTML dan pendekatan CSS.

Sederhananya, web jaringan desain untuk mengatur konten sehingga situs ini mudah dinavigasi, dan untuk mengurangi beban klien.

Apa sistem grid Bootstrap (Grid System)?

Bootstrap dokumentasi resmi pada sistem grid Keterangan:

Bootstrap termasuk responsif, prioritas perangkat mobile, sistem grid tidak tetap, dengan peningkatan ukuran perangkat atau viewport tepat diperpanjang sampai 12. Ini termasuk kelas standar untuk pilihan layout yang mudah, juga termasuk kuat untuk menghasilkan tata letak yang lebih semantik kelas campuran.

Mari kita memahami bagaimana pernyataan di atas. Bootstrap 3 merupakan prioritas perangkat mobile, dalam pengertian ini, kode bootstrap untuk perangkat layar kecil (seperti ponsel, tablet), kemudian diperluas ke perangkat layar besar (seperti laptop, komputer desktop) pada komponen dan grid.

strategi mobile-pertama

• kadar
  • Putuskan apa yang paling penting.
• tata ruang
  • Prioritas dirancang lebar yang lebih kecil.
  • CSS berbasis perangkat mobile adalah prioritas, kueri media diarahkan untuk komputer tablet, komputer desktop.
• progresif Enhancement
  • Dengan meningkatnya ukuran layar dan menambahkan elemen.

sistem grid responsif dengan meningkatkan layar atau viewport (viewport) ukuran, sistem akan secara otomatis dibagi menjadi maksimal 12.

sistem grid bootstrap (Grid System) karya

Sistem grid melalui serangkaian baris dan kolom dengan konten untuk membuat tata letak halaman. Berikut ini daftar sistem grid Bootstrap adalah cara kerjanya:

• Baris harus ditempatkan dalamkelas .container, untuk mendapatkan keselarasan (alignment) dan padding (padding).
• Gunakan garis untuk membuat satu set horizontal kolom.
• Konten harus ditempatkan dalam kolom, dan kolom dapat hanya baris anak langsung.
• kelas jaringan yang telah ditetapkan,.row tersebut dan .col-xs-4,dapat digunakan untuk dengan cepat membuat tata letak jaringan. kelas campuran KURANG dapat digunakan layout lebih semantik.
• Kolom untuk menciptakan kesenjangan antara isi kolom dengan padding (padding). padding adalah dari luar.rows melalui pada (margin) negasi, dan baris terakhir, kolom pertama menunjukkan offset.
• Sistem grid tersedia dengan menentukan dua belas kolom yang ingin Anda buat salib. Misalnya, untuk membuat tiga kolom yang sama, menggunakan tiga.col-xs-4.

query Media

query Media sangat chic "aturan CSS bersyarat." Ini hanya berlaku untuk beberapa berdasarkan beberapa kriteria yang telah ditentukan CSS. Jika kondisi tersebut puas, kemudian menerapkan gaya yang sesuai.

Bootstrap Media query memungkinkan Anda untuk bergerak berdasarkan pada ukuran viewport, acara dan konten hide. Berikut pertanyaan media menggunakan file KURANG digunakan untuk membuat sistem grid Bootstrap ambang titik demarkasi kritis.

/ * Ultra-kecil perangkat (ponsel, kurang dari 768px) * /
/ * Secara default, Bootstrap ada pertanyaan media * /

/ * Perangkat Kecil (tablet, 768px dan seterusnya) * /
@media (min-width: @ layar-sm-min) {...}

/ * Perangkat Menengah (desktop, 992px dan seterusnya) * /
@media (min-width: @ layar-md-min) {...}

/ * Peralatan besar (komputer desktop yang besar, 1200px dan seterusnya) * /
@media (min-width: @ layar-lg-min) {...}

Kita kadang-kadang berisi permintaan Mediamax-width di kode, yang akan mempengaruhi CSS terbatas dalam kisaran yang lebih kecil dari ukuran layar.

@media (max-width: @ layar xs-max) {...}
@media (min-width: @ layar-sm-min) dan (max-width: @ layar-sm-max) {...}
@media (min-width: @ layar-md-min) dan (max-width: @ layar-md-max) {...}
@media (min-width: @ layar-lg-min) {...}

permintaan Media memiliki dua bagian, pertama spesifikasi perangkat, maka aturan ukuran. Dalam kasus di atas, menetapkan aturan berikut:

Mari kita lihat baris kode ini:

@media (min-width: @ layar-sm-min) dan (max-width: @ layar-sm-max) {...}

Untuk semua denganmin-width: @perangkatlayar-sm-min,jika lebar layar kurang dari@ layar-sm-max,ia akan melakukan beberapa pengolahan.

Grid Pilihan

Tabel berikut merangkum bagaimana Bootstrap sistem grid di beberapa perangkat bekerja:

Struktur dasar dari grid

Berikut adalah struktur dasar dari grid Bootstrap:

<Class Div = "container">
   <Class Div = "row">
      <Class Div = "col - * - *"> </ div>
      <Class Div = "col - * - *"> </ div>      
   </ Div>
   <Class Div = "row"> ... </ div>
</ Div>
<Div class = "container"> ....

Biarkan beberapa contoh sederhana kita melihat grid:

• Contoh: tingkat tumpukan
• Contoh: menengah dan peralatan besar
• Contoh: ponsel, komputer tablet, komputer desktop

kolom responsif ulang

Contoh berikut mencakup empat grid, tapi kami tidak dapat menentukan posisi grid ditampilkan dalam penjelajahan perangkat kecil.

Untuk mengatasi masalah ini, Anda dapat menggunakan menggunakan.clearfix kelas dan utilitas responsif untuk menyelesaikan, seperti yang ditunjukkan dalam contoh berikut:

Browser mengubah ukuran jendela untuk melihat perubahan, atau untuk melihat efek pada ponsel Anda.

kolom Offset

Offset adalah fungsi yang berguna untuk tata letak yang lebih profesional. Mereka dapat digunakan untuk membuat lebih banyak ruang untuk kolom.Misalnya, .col-xs = * kelas tidak mendukung offset, tetapi mereka bisa hanya dengan menggunakan sel kosong untuk mencapai efek.

Untuk menggunakan offset pada tampilan layar yang besar, menggunakan.col-md-offset- * kategori.Ditinggalkan di luar kelas ini akan kolom dari (margin) meningkat* kolom, di mana *kisaran1-11.

Pada contoh berikut, kita memiliki <div class = "col-md -6"> .. </ div>, kita akan menggunakan.col-md offset--3 kelas untuk pusat div ini.

Hasilnya adalah sebagai berikut:

Kolom bersarang

Default untuk grid bersarang dalam konten, menambahkan.row baru, dan dalam kolom .col-md-ada*Menambahkan kelompok.col-md- *kolom. baris bersarang harus berisi satu set kolom, yang mengatur jumlah kolom tidak bisa lebih dari 12 (pada kenyataannya, tidak ada persyaratan bahwa Anda harus mengisi 12).

Pada contoh berikut, tata letak memiliki dua kolom, kolom kedua dibagi menjadi dua baris empat kotak.

Hasilnya adalah sebagai berikut:

penyortiran kolom

sistem grid bootstrap untuk fitur lain yang sempurna adalah bahwa Anda dapat dengan mudah menulis kolom di urutan, maka order ditampilkan dalam kolom lain.

Anda dapat dengan mudah mengubah urutan dengan.col-md-push dibangun kolom kotak *dan.col-md-pull *kelas, di mana*kisaran1-11.

Pada contoh berikut, kita memiliki tata letak dua kolom, kolom kiri sangat sempit, sebagai sidebar. Kami akan menggunakan.col-md-push * dan .col-md-pull *kelas untuk menukar urutan dua kolom.

Hasilnya adalah sebagai berikut: