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>

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.

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!