Bagaimanakah Nombor dalam Kelas Grid Bootstrap Mengawal Susun Atur?

Memahami Sistem Grid dalam Bootstrap

Dalam Bootstrap, sistem grid mendayakan kawalan susun atur yang tepat menggunakan kelas seperti col-md-4, col-xs-1 dan col-lg-2. Kelas ini memanfaatkan nombor untuk menentukan penjajaran grid, penggunaan dan perwakilan.

Cara Nombor Menentukan Penjajaran Grid

Nombor dalam nama kelas ini (1-12) menandakan perkadaran lebar bekas yang menjangkau lajur grid tertentu. Contohnya, col-*-6 merentangi enam daripada jumlah 12 lajur, col-*-12 merentangi keseluruhan lebar (12 lajur) dan seterusnya.

Menggunakan Nombor

Untuk menggunakan nombor ini dengan berkesan, bayangkan sebuah bekas dibahagikan kepada 12 lajur yang sama. Dengan memberikan kelas dengan nombor tertentu, anda boleh menentukan dengan tepat cara lajur menduduki bekas. Contohnya, menggunakan col-xs-6 dua kali dalam bekas menghasilkan dua lajur bersaiz sama yang secara kolektif mengisi seluruh bekas.

Perwakilan Nombor

Nombor dalam nama kelas mewakili bilangan lajur elemen grid menjangkau dalam saiz bekas masing-masing. Sebagai contoh, col-xs-6 menunjukkan bahawa elemen menduduki separuh lebar bekas pada skrin lebih kecil (telefon).

Kesan Reka Bentuk Responsif

Bootstrap menawarkan beberapa kelas lajur, seperti xs, sm, md dan lg, untuk memenuhi saiz skrin yang berbeza. Awalan kelas ini menentukan saiz skrin di mana konfigurasi grid tertentu menjadi berkesan. Dengan menggabungkan kelas dengan awalan yang berbeza (cth., col-xs-6 col-md-4), anda boleh membuat reka letak responsif yang menyesuaikan berdasarkan peranti yang digunakan.

Sokongan Saiz Skrin Berbilang

Jika anda memperuntukkan berbilang kelas lajur kepada elemen, konfigurasi grid yang ditentukan digunakan pada saiz skrin yang sepadan dan lebih besar. Sebagai contoh, col-xs-6 col-md-4 akan menjangkau enam lajur pada skrin kecil dan kecil tambahan, dan empat lajur pada skrin sederhana dan besar, melainkan ditindih oleh pengisytiharan lain.

Nota: Apabila tiada kelas xs ditentukan, elemen lalai kepada col-xs-12, bermakna ia akan merentangi keseluruhan lebar pada lebih kecil skrin.

Pengendalian Limpahan

Perlu diingat bahawa melebihi 12 lajur dalam bekas akan menyebabkan elemen limpahan dipaparkan pada baris seterusnya dan bukannya membalut dalam baris semasa .

Atas ialah kandungan terperinci Bagaimanakah Nombor dalam Kelas Grid Bootstrap Mengawal Susun Atur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!