Apakah maksud "col-md-4", "col-xs-1", dan "col-lg-2" dalam Sistem Grid Bootstrap?

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

Sistem grid Bootstrap menyediakan penyelesaian yang fleksibel dan responsif untuk menstrukturkan susun atur. Tiga awalan kelas utama digunakan: "col-xs", "col-sm", dan "col-lg", diikuti dengan nombor. Nombor ini menentukan cara lajur diselaraskan dalam grid.

Cara Nombor Menjajarkan Grid

Nombor yang mengikuti awalan mewakili bilangan lajur yang akan diduduki oleh elemen tertentu daripada 12 lajur yang tersedia. Setiap baris mempunyai sejumlah 12 lajur, jadi "col--6" akan menduduki separuh daripada ruang yang tersedia, manakala "col--12" ​​akan merentangi keseluruhan lebar.

Cara Menggunakan Nombor

Apabila menggunakan kelas ini, anda perlu menentukan awalan berdasarkan saiz skrin yang dimaksudkan. "xs" digunakan pada skrin kecil tambahan (telefon mudah alih), "sm" pada skrin kecil (tablet), "md" kepada skrin sederhana (sesetengah desktop) dan "lg" pada skrin besar (baki desktop).

Sebagai contoh, untuk mencipta dua lajur yang sama dalam satu baris, anda akan menggunakan:

<div>

Apa yang Diwakili oleh Nombor

Nombor dalam kelas mewakili khusus lebar dalam grid. Setiap lajur mewakili sebahagian kecil daripada jumlah ruang yang tersedia dalam satu baris:

• "col-*-1": 1/12 daripada lebar
• "col-*-2" : 2/12 daripada lebar
• "col-*-3": 3/12 daripada lebar
• ...
• "col-*-12": 12/12 daripada lebar

Dengan menggabungkan kelas ini, anda boleh membuat reka letak tersuai yang menyesuaikan dengan saiz dan resolusi skrin yang berbeza. Ingat untuk menggunakan berbilang kelas lajur untuk menentukan gelagat berbeza pada titik putus yang berbeza. Inilah yang menjadikan Bootstrap responsif dan membolehkan anda membuat reka letak yang fleksibel dan adaptif.

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