Bagaimanakah 'col-md-4', 'col-xs-1', dan 'col-lg-2' berfungsi dalam Sistem Grid Bootstrap?

Sistem Grid dalam Bootstrap: Memahami "col-md-4", "col-xs-1" dan "col-lg-2"

Sistem grid Bootstrap membolehkan anda mengawal reka letak dan penjajaran elemen dalam pelbagai saiz skrin. Kelas "col-", ditambah dengan nombor, memainkan peranan penting dalam sistem ini.

Cara Nombor Menjajarkan Grid

Nombor dalam "col-* " kelas mewakili lebar lajur berbanding dengan jumlah lebar bekas. Setiap bekas boleh memuatkan 12 lajur secara keseluruhan. Oleh itu, "col-md-6" akan mengambil 6 lajur daripada 12, menghasilkan lajur separuh lebar bekas.

Menggunakan Nombor

Untuk menggunakan nombor ini, hanya masukkan kelas "col-" yang sesuai diikuti dengan nombor. Sebagai contoh, div dengan kelas "col-xs-3" akan menduduki 3 lajur pada skrin lebih kecil (iaitu, telefon mudah alih), manakala div dengan kelas "col-sm-6" akan mengambil 6 lajur pada kecil skrin (iaitu, tablet).

Apa yang Diwakilinya

Nombor dalam "col-*" mewakili titik putus responsif yang ditakrifkan dalam Bootstrap. Huruf xs, sm, md dan lg sepadan dengan:

• xs: Lebih kecil (telefon bimbit)
• sm: Kecil (tablet)
• md: Sederhana (sesetengah desktop)
• lg: Besar (baki desktop)

Dengan menggunakan berbilang kelas "col-" pada elemen, anda boleh menentukan cara ia harus bertindak pada saiz skrin yang berbeza . Sebagai contoh, kod berikut akan mencipta lajur yang mengambil separuh lebar pada telefon mudah alih tetapi hanya satu pertiga daripada lebar pada tablet:

<div><p>Memahami kelas "col-*" membolehkan anda untuk buat susun atur yang fleksibel dan responsif dalam Bootstrap. Dengan mengawal bilangan dan saiz lajur, anda boleh mencapai pengalaman pengguna yang optimum merentas pelbagai peranti.</p></div>

Atas ialah kandungan terperinci Bagaimanakah 'col-md-4', 'col-xs-1', dan 'col-lg-2' berfungsi dalam Sistem Grid Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!