Bagaimanakah nombor dalam kelas grid Bootstrap seperti col-md-4, col-xs-1 dan col-lg-2 menentukan lebar dan responsif elemen?

Memahami Nombor dalam Kelas Grid Bootstrap: col-md-4, col-xs-1, col-lg-2

The Rangka kerja Bootstrap memperkenalkan sistem grid teguh yang memudahkan penciptaan reka letak responsif. Integral kepada sistem ini ialah kelas dengan format col-*, di mana asterisk mewakili nombor. Nombor ini memainkan peranan penting dalam menentukan cara unsur dalam grid diselaraskan dan cara ia bertindak balas kepada saiz skrin yang berbeza.

Bagaimanakah Nombor Menjajarkan Grid?

nombor dalam kelas col-* mewakili bahagian lebar yang tersedia yang perlu diduduki oleh elemen yang berkaitan. Jumlah lebar baris grid dibahagikan kepada 12 lajur dan nombor dalam kelas menunjukkan bilangan lajur yang elemen akan menjangkau.

Sebagai contoh, kol-4 bermakna elemen akan menjangkau 4 lajur , atau 1/3 daripada lebar yang tersedia. col-12 akan merentangi keseluruhan lebar, mengambil kesemua 12 lajur.

Cara Menggunakan Nombor

Untuk menggunakan kelas ini, hanya berikannya kepada elemen dalam barisan grid. Sebagai contoh, untuk mencipta dua lajur yang sama lebar dalam satu baris, anda akan menggunakan:

<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>

Untuk mencipta tiga lajur yang tidak sama lebar, anda boleh menggunakan:

<div class="col-2">Column 1</div>
<div class="col-6">Column 2</div>
<div class="col-4">Column 3</div>

Apakah yang Diwakili oleh Nombor?

Di luar nombor itu sendiri, adalah penting untuk mengambil perhatian awalan yang digunakan padanya. Dalam Bootstrap, awalan ini mewakili saiz skrin yang berbeza:

• xs: Lebih kecil (peranti mudah alih)
• sm: Kecil (tablet)
• md: Sederhana (desktop )
• lg: Besar (desktop lebih besar)

Dengan memberikan berbilang kelas col-* kepada elemen, anda boleh mengawal cara ia berkelakuan pada setiap saiz skrin ini. Sebagai contoh, col-6 col-sm-4 bermakna elemen akan menjangkau separuh lebar pada skrin mudah alih dan 1/3 daripada lebar pada tablet dan desktop.

Kesimpulan

Memahami nombor dan awalan dalam kelas grid Bootstrap adalah penting untuk mencipta reka letak web yang responsif dan adaptif. Dengan memanfaatkan kelas col-* dengan berkesan, pembangun boleh memastikan reka bentuk mereka bertindak balas dengan lancar kepada saiz skrin yang berbeza, memberikan pengalaman pengguna yang konsisten merentas semua peranti.

Atas ialah kandungan terperinci Bagaimanakah nombor dalam kelas grid Bootstrap seperti col-md-4, col-xs-1 dan col-lg-2 menentukan lebar dan responsif elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!